LIVE DEMO

Capstone: Stickerslug

--Tristan Emmerson--

Purpose/Goal:

• As an admin I want to be able to delete the hundreds of spreadsheets I am currently using to manage all of our product data

• As an admin I want to be able to inventorize all of my product data

• As an admin I want to be able to query data at a granular level (deep skus)

• As an admin I want to be able to query more complex ranges of products by field data

Pain Point: As my business scaled over the years, my inventory system could not keep pace with the quantity of products Stickerslug was offering. Updating and making changes became arduous and time-consuming.

MVP:

A database that is single-field queryable for "raw data" of a parent product sku. Products information is queryable at a basal serial level.

• Firebase database
• React client interface
• VSCode to write it all
• Bootstrap to make it pretty

Technologies Used:

• Visual Studio Code
• React
• Google Realtime Database
• Firebase Hosting
• Material UI
• Bootstrap
• Amazon S3
• Microsoft Excel
• Adobe Photoshop
• Figma
• React Chart.js 2

Stretch Goals:

• Seed some portion of child data points for variants
• Add photo representation of queried product.
• Add marketplace specified field headers for parent data.
• Create exportable reports that interface with various marketplaces
• AMZ SellerCentral API for product information update.
• admin authentication
• implement visualizations for data
• Add customer editing functionality
• Use custom work and customer submitted photos in gallery

Installation

cd project_directory

npm install

npm run build

npm run start

Splash Page

Customer Editor

Product Editor

Reports

Splash Page

Customer Manager

Product Manager

Reports

ACTIVITY LOG

9/24/20

• Homework

  • APIs and Further Exploration Objectives
  • Making an API Call with fetch()
  • Introduction to Redux Middleware
  • Building an API Application with React and Redux
  • Writing Custom Middleware
  • Async Actions with Redux Thunk
  • Building an API Application with React and Redux: Part 2
  • Full Stack Development Project
  • Further Exploration Topics
  • Pitching Your Capstone
  • Further Exploration: React Native
  • Further Exploration: React Hooks
  • Further Exploration: Creating a Custom React Environment
  • Further Exploration: Data Visualization
  • Further Exploration: Animations with React
  • Further Exploration: SEO with React

9/25/20

• Watch Cloud Firestore Data Modeling

• watch more youtube videos on Firestore database structures and limitations

9/26/20

• clear out bookmarks

• Research seeding firestore databases

• Create stickerslug-capstone app in firestore

• start routing elements

9/27/20

• Reports

  • Shipped Items
  • Shipping Cost
  • Country Comparison
  • Customers
  • Shipped Items
    • 2013
    • 2014
    • 2015
    • 2016
    • 2017
    • 2018
    • 2019

  Shipping Cost

  • Country Comparison
    • 2013
    • 2014
    • 2015
    • 2016
    • 2017
    • 2018
    • 2019
  • Customers
    • 2013
    • 2014
    • 2015
    • 2016
    • 2017
    • 2018
    • 2019

• Capstone

  • get amazon product format fields
  • get etsy product format fields
  • get my parental data sheets
  • find and verify image locations are accessible for all 12.6m

• General

  • Re-read thinking in React

• Data

  • combine country comparison
  • combine shipped items
  • Clean Shipped Items
  • Clean Country Comparison

9/28/20

• find main product data

i cant solve how to efficiency upload all this product data. i think i can write some middleware (i think that's what it would be) to handle that. just pass the json data in.

9/30/20

• move data into assets
• move index into assets
• move package into assets
• move package-lock into assets
• move serviceAccountKey into assets
• swap favicon out
• Rank internship companies

10/02/20

• Kiddie Kredit
  • research
  • resume/cover
  • email docs

10/04/20

lots of reading and little code.

10/05/20

• wrap up last readings
• port data back to realtime database
• write middleware
• read about effect hook
• watch videos on Gatsby

oh good lord is it time for a gif...

I finally got the data hooked up to the front end!!!!

• "needs reviewed" checkbox
• look into charts.js/ d3.js
• Consider exporting reports with BigQuery: Connected Sheets

• new data upload
  • sizeData
  • skuOther
  • skuDecal
  • imageDecal
  • imageOther
  • parentData

10/06/20

chased a bug all day from a detached head error

10/07/20

• Maybe Do

  • integrate peripherals for middleware
  • finish up component model
  • watch demo day pitch vid

10/08/20

• something with the channel
• write up/test install instructions to README