MERN-Marketplace.md

MERN Marketplace

Hello and Welcome to my coding course to build a multi-vendor ecommerce website by MERN stack. In this course you will learn the essential tools and skills to design, develop and deploy a fully-function marketplace website using React and Redux in frontend and Node and MongoDB in backend.

What You Will Learn

This is a practical coding course and we are gonna learn and build lots of stuff in this multi-vendor ecommerce website like:

• create functional component by react
• use react hooks to handle form inputs
• manage application state by redux using custom hooks
• create backend web api by node and express js
• design database model by mongodb
• perform CRUP operations on orders, products and users by mongoose ORM
• handle authentication and authorization using JsonWebToken
• create seller and admin roles to manage products, orders and users
• handle shopping cart for customer to place orders

Audiences

This course is for non-coders or juniors who want to be a professional web developer to get a job in 22 million job opportunities around the world. Basic knowledge of web developments like html, css and basic javascript is necessary for this course.

What You Will Build

1. What we will build
   1. HomeScreen
      1. Create react app
      2. Use bootstrap and react-bootstrap
   2. Product Screen
      1. Url routing in react
      2. handle events in react
   3. Cart Screen
      1. Save and retrieve data in local storage
      2. Working javascript array functions
      3. Update summary based on cart changes
   4. Sign-in and Register Screen
      1. Create dynamic form
      2. Input validation in frontend and backend
      3. Create web server using node.js
      4. Connect to Mongodb database
      5. Add registered user to the database
      6. Authenticate user based on email and password
      7. Using Jsonwebtoken to authorize users
   5. Shipping and Payment Screen
      1. Create wizard form to get user data in multiple steps
      2. Save user info in the local storage
   6. Place Order Screen
      1. Validate and create order in the database
   7. Order Screen
      1. Payment with paypal
      2. Show order state based on user and admin activities
   8. Profile Screen
      1. Create authenticated routes
      2. enable user to update their informations
      3. enable user to logout and clear local storage
      4. show list of orders to user and link it to details
   9. Seller Menu
      1. add products, upload files
      2. manage orders
   10. Admin Menu
       1. manage users

Table Of Content

1. Create React Bootstrap App
   • Create react app
   • Install react-bootstrap
   • Add project to git repo and publish on GitHub
2. Build Home Screen
   • create an array of products
   • use map function to render products array
   • create Product component
   • use Card and Link to shape product thumbnails
3. Create Product Details Screen
   • use Row and Col to shape 3 columns content
   • read url params to get product id
   • create button for Add To Cart
4. Create Node.JS Server
   • npm init in root folder
   • create backend folder and server.js file
   • create a simple express server to server products
5. Use ES6 Syntax In Backend
   • install babel transpiler
   • config babel
6. Enable Code Linter and Essential Extension
   • npm install -D eslint
   • install VSCode eslint extension
   • JavaScript (ES6) code snippets
   • ES7 React/Redux/GraphQL/React-Native snippets
   • Prettier - Code formatter
7. Load Products From Backend

• send ajax request using axios
• use useEffect
• list items in react

8. Manage State With Redux
   • What is Redux
   • create store
   • import in App.js
9. Connect HomeScreen to Redux
   1. create actions, reducers for product list
   2. load products from redux store
10. Connect Product Screen to Redux
11. Add To Cart Action
12. Cart Screen UI
13. Update and Delete Cart Items
14. Connect To MongoDB and Create Admin User
15. Sign-in Screen UI
16. Sign-in Screen Backend
17. Sign-in Screen Action
18. Create Progress Indicator and Alert Component
19. Register Screen
20. User Profile Screen
21. Checkout Wizard
22. PlaceOrder Screen UI
23. PlaceOrder Screen Action
24. Order Screen
25. PayPal Payment
26. Display Orders History
27. Admin Dashboard UI
28. Admin Products UI
29. Create Product
30. Edit Product UI
31. Edit Product Backend
32. Upload Product Image
33. Build Project
34. Delete Product
35. Admin Orders
36. Deliver Order
37. Handle Seller Role
38. Handle User Role
39. Publish to heroku
40. Search Products

it exist ?

Where to learn??

Please provide link to repository if it exists.