Amazona ECommerce Website

You Will Learn

• HTML5 and CSS3: Semantic Elements, CSS Grid, Flexbox
• React: Components, Props, Events, Hooks, Router, Axios
• Redux: Store, Reducers, Actions
• Node & Express: Web API, Body Parser, File Upload, JWT
• MongoDB: Mongoose, Aggregation
• Development: ESLint, Babel, Git, Github,
• Deployment: Heroku
• Watch React & Node Tutorial

Run Locally

1. Clone repo

$ git clone git@github.com:basir/amazona.git
$ cd amazona

2. Setup MongoDB

• Local MongoDB
  • Install it from here
  • Create .env file in root folder
  • Set MONGODB_URL=mongodb://localhost/amazona
• Atlas Cloud MongoDB
  • Create database at https://cloud.mongodb.com
  • Create .env file in root folder
  • Set MONGODB_URL=mongodb+srv://your-db-connection

3. Run Backend

$ npm install
$ npm start

4. Run Frontend

# open new terminal
$ cd frontend
$ npm install
$ npm start

5. Seed Users and Products

• Run this on chrome: http://localhost:5000/api/users/seed
• It returns admin email and password
• Run this on chrome: http://localhost:5000/api/products/seed
• It creates 6 sample products

6. Admin Login

• Run http://localhost:3000/signin
• Enter admin email and password and click signin

Support

• Q/A: https://webacademy.pro/amazona
• Contact Instructor: Basir

Lessons

1. Introduction to this course
   1. what you will build
   2. what you will learn
   3. who are audiences
2. Install Tools
   1. Code Editor
   2. Web Browser
   3. VS Code Extension
3. Website Template
   1. Create amazona folder
   2. create template folder
   3. create index.html
   4. add default HTML code
   5. link to style.css
   6. create header, main and footer
   7. style elements
4. Display Products
   1. create products div
   2. add product attributes
   3. add link, image, name and price
5. Create React App
   1. npx create-react-app frontend
   2. npm start
   3. Remove unused files
   4. copy index.html content to App.js
   5. copy style.css content to index.css
   6. replace class with className
6. Share Code On Github
   1. Initialize git repository
   2. Commit changes
   3. Create github account
   4. Create repo on github
   5. connect local repo to github repo
   6. push changes to github
7. Create Rating and Product Component
   1. create components/Rating.js
   2. create div.rating
   3. style div.rating, span and last span
   4. Create Product component
   5. Use Rating component
8. Build Product Screen
   1. Install react-router-dom
   2. Use BrowserRouter and Route for Home Screen
   3. Create HomeScreen.js
   4. Add product list code there
   5. Create ProductScreen.js
   6. Add new Route from product details to App.js
   7. Create 3 columns for product image, info and action
9. Create Node.JS Server
   1. run npm init in root folder
   2. Update package.json set type: module
   3. Add .js to imports
   4. npm install express
   5. create server.js
   6. add start command as node backend/server.js
   7. require express
   8. create route for / return backend is ready.
   9. move products.js from frontend to backend
   10. create route for /api/products
   11. return products
   12. run npm start
10. Load Products From Backend
    1. edit HomeScreen.js
    2. define products, loading and error.
    3. create useEffect