- Code Editor
- Web Browser
- VS Code Extension
- Create amazon folder
- create template folder
- create index.html
- add default HTML code
- link to style.css
- create header, main and footer
- style elements
- Display Products
- create products div
- add product attributes
- and link, image, name and price
- Create React App
- yarn create @vitejs/app frontend
- Remove unused files
- copy index.html content to App.js
- copy style.css content to index.css
- replace class with className
- Create Rating and Product Component
- create components/Rating.js
- create div.rating
- style div.rating, span and last span
- Use Rating component
- Build Product Screen
- Install react-router-dom
- Use BrowserRouter and Route for Home Screen
- 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
- Create Node.js Server
- 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 products.js from frontend to backend
- create route for /api/products
- return products
- rum yarn start
- Load Products From Backend
- edit HomeScreen.js
- define products, loading and error
- create useEffect
- define async fetchData and call it
- install axios
- get data from /api/products
- show theme in the list
- create Loading Component
- create Message Box Component
- use theme in HomeScreen
- Install ESlint For Code Linting
- install VSCode eslint extension
- npm install -D eslint
- run ./node_modules/,bin/eslint --init
- Create ./frontend/.env
- Add SKIP_PREFLIGHT_CHECK=true
- Add Redux to Home Screen
- yarn add redux react-redux | 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:}))
- Add store to index.js
- Add Redux to Product Screen
- create product details constants, actions and reduces
- add reducer to store.js
- use action in ProductScreen.js
- add /api/products/:id to backend api
- Handle Add To Cart Button
- Handle Add To Cart in ProductScreen.js
- create CartScreen.js
- Implement Add to Cart Action
- create addToCart constants, actions and reducers
- add reducer to store.js
- use action in CartScreen.js
- render cartItems.length
- Build Cart Screen
- create 2 columns for cart items and cart action
- cartItems.length === 0 ? cart is empty
- show item image, name, qty and price
- Proceed to Checkout button
- Implement remove from cart action
- Implement Remove From Cart Action
- create removeFormCart constants, actions and reducers
- use action in CartScreen.js
- Connect To MongoDB
- 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 Sample Products In MongDB
- create models/productModel.js
- create productSchema and productModel
- create productRoute
- Seed sample data
- Create Sign-in Backend
- create /signIn api
- check email and password
- generate token
- install json web token
- install dotenv
- return token
- test is using postman
- Design SignIn Screen
- create SignInScreen
- render email and password fields
- create signIn constants, actions and reducers
- Update Header based on user login
- Implement SignIn Action
- create signIn constants, action and reducers
- add reducer to store.js
- use action in SignInScreen.js
- Create Register Screen and Backend API
- create API for /api/users/register
- insert new user to database
- return user info and token
- create RegisterScreen
- Add fields
- Style field
- Add screen to App.js
- Create Shipping Screen
- create CheckoutStep.js component
- create shipping fields
- implement shipping fields
- implement shipping constant, action and reducers
- Create Payment Screen
- create payment fields
- implements shipping constant, action and reducers
- Design Place Order Screen
- design order summary fields
- design order action
- Create Place Order API
- createOrder api
- create orderModel
- create orderRouter
- create post order route
- Implement PlaceOrder Action
- handle place order button click
- create place order constants, action and reducer
- Create Order Screen
- build order api for /api/orders/:id
- create OrderScreen.js
- dispatch order details action in useEffect
- load data witch useSelector
- show data like place order screen
- create order details constant, action and reducer
- Add PayPal Button
- get client id from PayPal
- set it in .env file
- create route form /api/paypal/clientId
- create getPaypalClientID in api.js
- add paypal checkout script in OrderScreen
- show paypal button
- Implement Order Payment
- update order after payment
- create payOrder in api.js
- create route for /:id/pay in orderReducer.js
- reRender after pay order
- Display Orders History
- create customer orders api
- create api for getMyOrders
- show orders in profile screen
- style orders
- Display User Profile
- create user details api
- show user information
- Update User Profile
- create user update api
- update user info
- Create Admin View
- Create Admin Menu
- Create Admin Middleware in Backend
- Create Admin Route in Frontend
- List Products
- Create Product List Screen
- Add reducer to store
- show products on the screen
- Create Product
- build create product api
- build create product button
- define product create constant, action and reducer
- use action in Product List Screen
- Build Product Edit screen
- create edit screen
- define state
- create fields
- load product details
- add to route
- Update Product
- define update api
- define product update constant, action and reducer
- use action in Product Edit Screen
- Upload Product Image
- npm install multer
- define upload router
- create uploads folder
- Handle frontend
- Delete Product
- create delete api in backend
- create delete constants, action and reducer
- use it in product list screen
- List Orders
- create order list api
- create Order List Screen
- Add reducer to store
- show products on the screen
- Delete Order
- create delete order action and reducer
- add order delete action to order list
- Deliver Order
- create constant, action and reducers for deliver order
- add order deliver action to order details screen
- Publish To Heroku
- Create git repository
- Create heroku account
- install Heroku CLI
- heroku login
- heroku apps:create amazon
- Edit package.json for build script
- Create Profile
- Create mongodb atlbas database
- Set database connection in heroku env variables
- Commit and push
- List Users
- build api for list users
- create UserList Screen
- create order details constants, action and reducer
- Delete Users
- build api for delete users
- create order details constants, action and reducer
- Use action in UserListScreen
- Edit User
- build api for update users
- create edit screen UI
- Implement Seller View
- 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 and Carousel
- create seller page
- create seller carousel
- Add Top seller Carousel
- install react carousel
- implement actions and reducers for top seller
- use react carousel with data in Home Screen
- Force Order Items From One Seller
- update addToCart action to buy from one seller at an order
- Create Search Box and Search Screen
- 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
- Add Advance Search Filter
- filter by category
- filter by price range
- filter by average rating
- Complete Advanced Search
- filter by price
- filter by rating
- sort by price, rating, ...
- Rate and Review Products
- rate products
- create actions and reducers