/proshop-z

A Full Stack Ecommerce Application using MERN Stack deployed on Render

Primary LanguageJavaScript

ProShop-Z

A Full Stack Ecommerce Web App created using MERN Stack including Redux Toolkit in the Frontend, deployed on Render.

Deployed Link:

https://proshop-z.onrender.com/

Some screenshots:

Home Page:

1

2

Product Page:

product page

Empty Cart Page:

Empty Cart Page

SignUp Page:

Sign Up page

Sign In Page:

Sign In page

Tech Stack used:

Frontend:

  • ReactJS
  • React Bootstrap
  • Redux
  • Redux Toolkit

Backend:

  • NodeJS
  • ExpressJS

Database:

  • MongoDB

Features

  • Full featured shopping cart
  • Product reviews and ratings
  • Top products carousel
  • Product pagination
  • Product search feature
  • User profile with orders
  • Admin product management
  • Admin user management
  • Admin Order details page
  • Mark orders as delivered option
  • Checkout process (shipping, payment method, etc)
  • PayPal / credit card integration
  • Database seeder (products & users)

Usage

Env Variables

Rename the .env.example file to .env and add the following

NODE_ENV = development
PORT = 5000
MONGO_URI = your mongodb uri
JWT_SECRET = 'abc123'
PAYPAL_CLIENT_ID = your paypal client id
PAGINATION_LIMIT = 8

Change the JWT_SECRET and PAGINATION_LIMIT to what you want

Install Dependencies (frontend & backend)

npm install
cd frontend
npm install

Run


# Run frontend (:3000) & backend (:5000)
npm run dev

# Run backend only
npm run server

Build & Deploy

# Create frontend prod build
cd frontend
npm run build

Seed Database

You can use the following commands to seed the database with some sample users and products as well as destroy all data

# Import data
npm run data:import

# Destroy data
npm run data:destroy
Sample User Logins

admin@email.com (Admin)
123456

john@email.com (Customer)
123456

jane@email.com (Customer)
123456