Skip to content

Latest commit

 

History

History
87 lines (54 loc) · 1.7 KB

README.md

File metadata and controls

87 lines (54 loc) · 1.7 KB
Raw

This project was bootstrapped with Create React App.

Electronica

Basic E-Commerce App project for Beginners to React. This app also features loading product data from firestore and persisting cart data to localstorage.

Challenge 1

Organise the project without breaking it. Create multiple directories that represent separation of concerns

Challenge 2

Add tabs to the user interface

  • add top level tabs
  • refactor into Nav component
  • add tab body via pages
  • add active state to tabs
  • hide and show page based on state (conditional rendering)

Challenge 3

Rendering list view

  • adding static mock data
  • rendering list view
  • extr- acting common Item component
  • Adding PropTypes

Challenge 4

Rendering Data from Firestore

  • Creating firestore app
  • Adding firestore integration
  • Using React component lifecycle to make api call
  • Rendering items from firestore
  • Adding a loader component

Challenge 5

Add Item to cart

  • Write Event handler
  • Logic for adding item
  • Logic for adding quantity
  • Show CartPage
  • Add and remove single item

Challenge 6

Add Routing

  • Add React Router
  • Create unique route for cart

Challenge 6

Refactoring

  • Use Functional SetState for updating state
  • Create separate api

Challenge 7

Add Total Panel in Nav

  • Show items subtotal
  • Show number of unique items in cart

Challenge 8

Refactor firestore api

  • Load Data via Api

Challenge 9

Make cart persistent

  • set initial cart state from localstorage
  • Load Data via localstorage
  • Add persistence via api