Welcome to ProShopApp’s documentation!

ProShopApp is a MERN tutorial project. I followed this Udemy course created by Brad Traversy to learn more about React and other technologies. The main website can be found here.

Check out the Introduction section for further information, including how to Welcome, Project Demo & Resources the project.

Note

This documention is under active development. It’s main purpose is to help me gain understanding from Brad Traversy’s ProShopApp course.

Contents

• Introduction
  • Welcome, Project Demo & Resources
  • Section 1.1: Course Welcome
  • Section 1.2: ProShop Project Demo
  • Section 1.3: Resources & Environment
• Starting The Front End
  • Section 2.4: React Setup & Git Initialize
  • Section 2.5: React-Bootstrap Setup, Header & Footer Components
  • Section 2.6: HomeScreen Product Listing
  • Section 2.7: Rating Component
  • Section 2.8: Note on React Router
  • Section 2.9: Implementing React Router
  • Section 2.10: Product Details Screen
• Serving & Fetching Data From Express
  • Section 3.11: Front End / Back End Workflow & Explanation
  • Section 3.12: Serving Products - Back End Routes
  • Section 3.13: Fetching Products from React (useEffect)
  • Section 3.14: Nodemon & Concurrently Setup
  • Section 3.15: Environment Variables
  • Section 3.16: ES Modules in Node.js
• Getting Started With MongoDB
  • Section 4.17: MongoDB Atlas & Compass Setup
  • Section 4.18: Connecting To The Database
  • Section 4.19: Adding Colors To The Console (Optional)
  • Section 4.20: Modeling Our Data
  • Section 4.21: Preparing Sample Data
  • Section 4.22: Data Seeder Script
  • Section 4.23: Fetching Products From The Database
  • Section 4.24: Getting Started With Postman
  • Section 4.25: Custom Error Handling
• Implementing Redux For State Management
  • Section 5.26: An Overview Of Redux
  • Section 5.27: Create a Redux Store
  • Section 5.28: Product List Reducer & Action
  • Section 5.29: Bringing Redux State Into HomeScreen - useDispatch & useSelector
  • Section 5.30: Message & Loader Components
  • Section 5.31: Product Details Reducer & Action
• Adding The Shopping Cart
  • Section 6.32: Qty Select & Add To Cart Button
  • Section 6.33: Cart Reducer & Add To Cart Action
  • Section 6.34: Add To Cart Functionality
  • Section 6.35: Cart Screen
  • Section 6.36: Remove Items From Cart
• Back End User Authentication
• Front End User Authentication & Profile
• Checkout Process - Part 1
• Checkout Process - Part 2
• Admin Screens - Part 1
• Admin Screens - Part 2
• Product Reviews, Search & More
• App Deployment
• NPM Libraries
  • Additiona Information: NPM Packages and Docs
• Folder Structure
• Redux
• Strategic Reasoning
• Postman
  • What is Postman?!?

ProShopApp has its documentation hosted on Read the Docs.