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