Shopify

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

Demo

Home page

image

Signin page

image

Signup page

image

Shop page

image

Single product view page

image

Shop page(using filters)

image

Dashboard(user login)

image

Cart & checkout page

image

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 https://github.com/Dhruvgoyal431/Shopify.git

  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

    MONGO_URI=YOUR_MONGO_URI
JWT_SECRET=YOUR_JWT_SECRET
BRAINTREE_MERCHANT_ID=YOUR_BRAINTREE_MERCHANT_ID
BRAINTREE_PUBLIC_KEY=YOUR_BRAINTREE_PUBLIC_KEY
BRAINTREE_PRIVATE_KEY=YOUR_BRAINTREE_PRIVATE_KEY

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

    sample code for frontend .env
    REACT_APP_API_URL=YOUR_API_URL
    Instructions:
    1. for mongodb atlas database creation follow this tutorial->https://www.youtube.com/watch?v=KKyag6t98g8
    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

Authors

Omkar Salvi
Shruti Nogja
Dhruv Goyal

GitHub

View Github