React Mountain Sports - E-Commerce App

• Online store with filter, checkout, persistent database and admin authentication to view orders. Deployed on Heroku with a cloud MongoDB.

• Front-end built with React, Redux, React-Router, Auth0 API.

• Back-end built with Node, Express, and MongoDB. Products and Orders accessed on front-end via REST API routes.

Check out the deployed version HERE

Features

• Products: Filter by price, view individual products, add items to cart

• Cart: Shows items, count and total cost

• Checkout: submits user/order info into the DB and adds to the admin orders page.

• Admin Page: requires user authentication using Auth0. Access the admin page via the footer sign in. The Heroku login credentials to see the order page are:
  email: admin@example.com // password: admin-12345

  Final Product

  Home Page - Products

  

  Individual Product

  

  Checkout Panel

  

  Order Receipt

  

  Admin Login - Auth0

  

  Orders Admin Page

  

Project Goals and Challenges

• Building this app was a great introduction to Redux, React Router, and MongoDB which were all brand new to me. I also hadn't had much experience with class-based components in react and even though I much prefer hooks/functional components, this was a good chance to get some practice with them before potentially working on a class-based legacy project in the future. This was also my first time using Auth0.

  Some Future Goals and Improvements

• There are a lot more features that I would like to add. Here are a few of them.

• 1. Functional payment using Stripe at checkout.

• 2. A product search bar.

• 3. Forms and Buttons in the admin area to add/delete/update products and orders through the UI rather than using Postman.

• 4. Convert to functional components/hooks for practice

• 5. Send confirmation email to the customer after checkout.

Getting Things Running

• Fork and Clone the Repository
• Run npm install

In the project directory, run:

npm start - React Client - localhost:3000

npm run server Node Server - localhost:5000

Running Mongo DB Locally - install community MongoDB > brew services start mongodb-community