/MERN-ecommerce

Primary LanguageJavaScript

MERN E-Commerce

A faux e-commerce website where users can "purchase" items of various colors, sizes, and quantities, and view there past orders.

mern-ecommerce

The backend was built with javascript, node.js, express, mongodb atlas,
bcryptjs to encrypt and decrypt the users' password, colors to make certain console logs pop out, cors tells the browser that the app at its origin has access to resources at another origin, dotenv to keep certain information secret, express-async-handler to handle async express route exceptions, jsonwebtoken to give each user a unique token, multer to upload the product images, prop-types to declare the type of props for eslint, and stripe to handle payment logic.

The developer version's backend, which can be cloned in the below section, also features prettier to make the code easier to read, eslint (Airbnb and Prettier configurations) to find problems in the code, nodemon to restart the app when a server change is made, and concurrently to run both the client and server simultaneously.

The frontend utilizes Material-UI with Emotion for styling, axios for HTTP requests, react-redux and reduxjs/toolkit to manage the logged in user's state, react-router-dom to handle the app's web routing, react-material-ui-carousel for the image carousel, stripe-js and react-stripe-js to handle payment UI, and Google Fonts.

How to run this project

Cloning the Code

  1. Open your terminal and type git clone https://github.com/christiandeandemesa/MERN-ecommerce.git
  2. Cd into MERN-ecommerce, then type git checkout e46ca8a166a to get commit before deployment.
  3. To download the backend dependencies, stay in the root folder (MERN-ecommerce) and type npm install.
  4. To download the frontend dependencies, cd into the client folder and type npm install.

Connecting to MongoDB

  1. Create an account or login to MongoDB Atlas.
  2. Click New Project, name your project, click Next, then Create Project.

mongo-1 mongo-2 mongo-3

  1. Click Build a Database, and choose the free option.

mongo-4 mongo-5

  1. Leave AWS as the Cloud Provider & Region, the region closest to where you are, and click Create Cluster.

mongo-6

  1. Type in a username and password, click Create User, leave it on My Local Environment, click Add My Current IP Address, then Finish and Close.

mongo-7 mongo-8

  1. Click Connect, Connect your application, then copy the connection string.

mongo-9 mongo-10 mongo-11

  1. Create a .env in your root folder and add the following:
PORT = 5000
MONGO_URI = MongoDB connection string (Note: Don't forget to replace <password> with your password)
JWT_SECRET = Any Text Here
STRIPE_SECRET_KEY = Below Section

Add Stripe Key

  1. Create an account or login to Stripe.
  2. Click Developers then API Keys.

stripe-1 stripe-2

  1. Copy the Secret Key and put it in the .env's STRIPE_SECRET_KEY.

stripe-3

Creating Products with Postman

  1. Download Postman, and open your terminal and type npm start to start the server.
  2. Open Postman, copy the below POST route, fill in the fields, make sure isAdmin is set to true, then create your admin user account.

postman-2

  1. Copy the below POST route, make sure your form is set to form-data, fill in the fields, fill in the fields, make sure Auth is set to bearer token and your token should have shown when you created your admin user account, then create a product (Note: You can find png images in the server's assets sub-folder).

postman-3 postman-4 postman-5

  1. Type ctrl + c to stop the server, then type npm run dev to run both the client and server.

Features

  • User can register and log in to their account.
  • Logged in user can view, edit, and delete their profile.
  • User can filter all the items by category (e.g. men, clothing, etc.), size, color, name, price, and rating.
  • User can add items to their cart.
  • Logged in user can increase or decrease the quantity of items in their cart.
  • Logged in user can "purchase" their items using Stripe (Note: Please view the Stripe Payment video to see the testing card used).
  • Logged in user can view their past orders.
  • Logged in user can write, edit, or delete their review for each product.
  • Responsive web design for all portrait and landscape devices.
  • Browser support for Edge/Internet Explorer.

Upcoming Features

  • Cross browser support for Chrome, Firefox, Opera, and Safari.
  • User will have the ability to type a product's name in a search field to filter all the products.
  • User will have the ability to type in their email in the footer to get an email notification about joining the fake newsletter.
  • Admin panel for admin users to view and handle all products, users, their carts, and their orders.

Bugs

  • The cart is not independent to each user because it is not implemented in the redux yet.
  • Changing screen sizes messes with the stepper's text because the text is set to appear or not appear depending on the screen size upon first render.

Cart Bug

cart-bug.-.Made.with.Clipchamp.mp4

Stepper Bug

stepper-bug.-.Made.with.Clipchamp.mp4

Author