Instead of going to the local malls for a shopping spree, more and more people are using the variety of online resources to discover the right products for them. From giants like Amazon to small Etsy stores, online shopping is the future of consumerism! This project is a web based shopping system.This project is an attempt to provide the advantages of online shopping to customers of a real shop. It helps buying the products in the shop anywhere. Thus the customer will get the service of online shopping and home delivery from his favorite shop. This system can be implemented to any shop in the locality or to multinational branded shops having retail outlet chains. If shops are providing an online portal where their customers can enjoy easy shopping from anywhere, the shops won’t be losing any more customers to the trending online shops such as flipcart or ebay. Since this is a website it is easily accessible and always available

App Description:

1. user can view all products
2. user can view single product
3. user can search products and view products by category and price range
4. user can add to cart checkout products using credit card info
5. user can register & sign in
6. admin can create, edit, update & delete products
7. admin can create categories
8. admin can view ordered products


Home page


Signin page


Signup page


Shop page


Single product view page


Shop page(using filters)


Dashboard(user login)


Cart & checkout page


Technologies Used

Frontend-> React JS

Backend-> Node JS & Express JS

Database-> MongoDB Atlas

Installation & deployment(local server) process

  1. clone the repo using this command

    git clone
  2. install npm packages

    1. install backend packages

    cd Shopify
    npm install
    1. install frontend packages

    cd client
    npm install
  3. go to the parent folder of Shopify & create .env for mongodb connection, JWT_SECRET, BRAINTREE_MERCHANT_ID, BRAINTREE_PUBLIC_KEY and BRAINTREE_PRIVATE_KEY.

    sample code for backend .env

  4. create another .env file inside client directory for REACT_APP_API_URL.

    sample code for frontend .env
    1. for mongodb atlas database creation follow this tutorial->
    2. you can use any random string as JWTSECRET
    3. for localhost REACT_APP_API_URL is http://localhost:5000/api but for heroku (server deployment) it will be different
    4. note: add .env on .gitignore

    5. for server deployment use secrets directly
  5. deploy this project on your local server by using this command

    cd Shopify
    npm run server

    In another terminal/power shell

    cd Shopify\client
    npm start

    note: both backend & frontend server will start with the above commands.

  6. Database Structure: (Table: columns)

    1. categories: _id, name, createdAt, updatedAt;
    2. orders: _id, status, products (Array), transaction_id, amount, address, user (Object), createdAt, updatedAt
    3. products: _id, photo (Object), sold, name, description, price, category, shipping, quantity, createdAt, updatedAt
    4. users: _id, role, history (Array), name, email, salt, hashed_password, createdAt, updatedAt


Omkar Salvi
Shruti Nogja
Dhruv Goyal


View Github