The E-commerce mega project, to be completed soon

• create index.html
• create header main footer
• style elements

• create products div
• add products attributes
• add link, image, name, price

• npx create-react-app frontend
• npm start
• Remove unused files
• copy index.html content to app.js
• copy styles.css content to index.css
• replace class with classname

• creating components/Rating.js
• create div.rating
• style div.rating, span and last span
• create product component
• use rating component

• Install react-router-dom
• User BrowserRouter and Route for HomeScreen
• Create HomeScreen.js
• Add product list code there
• Create ProductScreen.js
• Add new Route from product details to App.js
• create 3 columns for product image, info and action

• run npm init in root folder
• Update package.json set type:module
• Add.js to imports
• npm install express
• create server.js
• add start command as node backend/server.js
• require express
• create route for / return backend is ready
• move product.js from frontend to backend
• create route for /api/products
• return products
• run npm start

• edit HomeScreen.js
• define products, loading and error.
• create useEffect
• define async fetchData and call it
• install axios
• get data from /api/products
• show them in the list
• create loading component
• create Message Box Component
• Use them in HomeScreen

• install VSCode eslint extension
• npm install -D eslint
• run ./node_modules/.bin/eslint --init
• Create ./frontend/.env
• Add SKIP_PREFLIGHT_CHECK=true

• npm install redux react-redux
• Create store.js
• initState={products:[]}
• reducer = {state,action}=> switch LOAD_PRODUCTS:{products:action.payload}
• export default createStore(reducer, initState)
• Edit HomeScreen.js
• shopName = useSelector(state=>state.products)
• const dispatch =useDispatch()
• useEffect(()=>dispatch({type:LOAD_PRODUCTS,payload:data}))
• add store to index.js

• create product detail constants, actions and reducers
• add reducer to store.js
• use action in ProductScreen.js
• add /api/v1/product/:id to backend api

• Handle Add to cart in ProductScreen.js
• Create CartScreen.js

• create addToCart constants, actions and reducers
• add reducer to store.js
• use action in CartScreen.js
• render cartItems.length

• Create 2 columns for cart item and cart action
• cartItems.length === 0 ? cart is empty
• show item, image, qty and price
• Proceed to checkout button
• Implement remove from cart action

• create removeFromCart constants, actions and reducers
• add reducer to store.js
• use action in CartScreen.js

• npm install mongoose
• connect to mongodb
• create config.js
• npm install dotenv
• export MONGODB_URL
• create models/userModel.js
• create userSchema and userModel
• create models/productModel.js
• create productSchema and productModel
• create userRoute
• Seed sample data

• create models/productModel.js
• create productSchema and productModel
• create productRoute
• seed sample data

• Create /signin api
• check email and password
• generate jwt token
• install json web token
• install dotenv
• return token and data
• test it using postman

• Create SigninScreen
• Render email and password fields
• Create signin constants, actions and reducers
• Update Header based on user login

• Create SignIn constants, actions and reducers
• add reducer to store.js
• use action in SigninScreen.js

• Create API for /api/v1/users/register
• insert new user to database
• return usern info and token
• create RegisterScreen
• Add fields
• Style fields
• Add screen to App.js

• Create CheckoutSteps.js component
• Create Shipping Fields
• Implement Shipping Constant, actions and reducers

• Create Payment Fields
• Implement Shipping Constant, actions and reducers

• Design order summary fields
• Design order action

• createOrder API
• create orderModel
• create orderRouter
• create post order route

• Handle place order button click
• create place order constants, action and reducer

• Build Order API for /api/v1/orders/:id
• create OrderScreen.js
• dispatch order details action in useEffect
• load data with useSelector
• show data like place order screen
• create order details constant, action and reducer

• get client id from paypal
• set it in .env file
• create route from /api/v1/paypal/clientId
• create getPaypalClientID in OrderScreen.js
• add paypal checkout script in OrderScreen.js
• show paypal button

• update order after payment
• create payorder in api.js
• create route for /:id/pay in orderRouter.js
• rerender after pay order

• create customer orders api
• create api for getMyOrder
• show orders in profile screen
• style orders

• Create user details api
• show user information

• Create user update api
• update user info

• Create Admin View
• Create Admin Middleware in backend
• Create Admin Route in Frontend

• Create Product List Screen
• Add reducer to store
• show products on the screen

• Build Create Product API
• Build Create Product Button
• Define product create constant, action and reducer
• use action in Product List Screen

• create edit screen
• define state
• create fields
• load product details
• add to routes

• Define update api
• define product update constant, action and reducer
• use action in Product Edit Screen

• npm install multer
• define upload router
• create uploads folder
• handle frontend

• create delete api in backend
• create delete constants, action and reducer
• use it in product list screen

• create order list api
• create order list screen
• add reducer to store
• show products on the screen

• create delete order action and reducer
• add order delete action to order list

• Create Constant, actions and reducers for deliver order
• add order deliver action to order details screen

• Create git repository
• Create Heroku Account
• Install Heroku CLI
• Heroku login
• heroku apps:create amazoning
• Edit package.json for build script
• Create Procfile
• Create mongodb atlas db
• set database connection in heroku env variables
• commit and push

• Build API for List Users
• Create User List Screen
• Create Order Details constant, actions and reducer

• build api for delete users
• create order details constant, action and reducer
• use action in UserListScreen

• build api for updated user
• create edit screen UI

• add seller menu
• create seller route
• list products for seller
• list orders for seller
• add Seller to Product list and Details Screen

• create seller page
• create seller carousel

• install react carousel
• implement actions and reducers for top sellers
• use react carousel with data in Home Screen

• update addToCart action to buy from one seller at an order

• Create search bar in Header.js
• Add Style
• Handle submit form
• Edit parse url to get query string
• update product list api for search by name

• Filter by Category
• Filter by Price Range
• Filter by Average Rating

• filter by price
• filter by rating
• sort by rating, price, ...

• rate products
• create actions and reducers