Shopify

View Deployed Website

Features and Interfaces

1. Register Page

   • Seamless registration page which asks for basic details of the user and registers new users using mail id and password which is encrypted!
   
   • When password and confirm password are not same or the email id already exist, it will display an error message.

   

2. Login Page

   • When the user already have an account and clicks the sign in button, he/she will be directed to the login page where the user needs to enter the registered email id.
   
   • If the user enters an incorrect password or tries to login by entering an unregisterted email id, it will display an error message.

   

   • When the user enters valid email id and password, he/she will be allowed to add items to cart and buy them successfully.

3. Home Page

   • As soon as the user login successfully, it will direct to the home page.
   • Here the user can view the items to buy and add them to cart.
   
   • The navbar has a filter by category option also. As soon as the user clicks the button the items will get filtered according to the value choosen.
   

4. Product Page

   • As the user clicks the particular product, he/she is directed to that product which contains all the details of the product.
   • The user can add the products to the cart as well as remove the products from the cart. The cart can be viewed by clicking on the cart icon in the navbar.
   • The quantity can be increased or decreased and the total amount gets updated automatically as the products are removed or the quantity gets changed.
   

5. Cart Page

   • When the user adds the item to cart, he/she is directed to cart page containing all the items that user wish to buy.
   

• Cart page contains the proceed to checkout button where user can proceed further to buy their items.
• The user is then asked to enter the address and the payment he wish to use.

6. Place Order

• when the user selects the payment option and clicks continue, he/she is then directed to order page where the order can be placed.

• User can make payment using paypal by entering a valid paypal account details.

• As soon as the payment is done, payment details get updated.

• Now user can relax and wait for the item to be delivered.

7. Profile Page

• The navbar has a dropdown on User's name from where user can click on profile button to update his/her profile.
• User can also add image to look profile attractive.

8. My Orders Page

• The navbar has a dropdown on User's name from where user can click on my order button to view order details.
• Here user can view his/her orders which are placed or pending to be placed.
• This page contains all the details about the product and the payment done.

9. Logout
   • The navbar has a dropdown on User's name from where user can click on logout button which directs the user back to the login page.

Also the website has a favicon icon to enhance its UI and increase its authenticity.

Tech stack

• Node.js
• Express
• MongoDB
• CSS3
• Git
• Heroku
• Netlify
• Figma
• Bootswatch
• Paypal

Getting Started

Required Environment Variables

VARIABLE	Sample value
JWT_KEY	sample_key
NODE_ENV	sample_value
MONGO_URL	mongodb://localhost/Shoppieshop
PORT	8080
PAYPAL_CLIENT_ID	paypal_client_id

Installation Instructions

1. Install Node.js
2. Install npm
3. If you plan to use a local instance of MongoDB database, install MongoDB atlas.
4. Clone this github repo git clone https://github.com/agnihotri099/Shopify.
5. In the local project directory, create a new file called ".env".
6. Setup the environment variables as described above.
7. Open the local project directory in a terminal, and run: npm install.
8. Create a paypal account and then create the app to obtain PAYPAL_CLIENT_ID.

To start the application locally

In the project directory, you can run:

npm run dev To start frontend and backend simultaneusly.

Runs the front-end client app in the development mode.
Open http://localhost:3000 to view it in the browser.

Runs the back-end server app in the development mode.
Open http://localhost:8080 to view it in the browser. Please note that the server requires an active instance of the MongoDB database. Either provide a MongoDB atlas link in the MONGO_URL environment variable, or use a local database, by placing its URI in the same.

---