Skip to content

Latest commit

 

History

History
103 lines (67 loc) · 3.45 KB

README.md

File metadata and controls

103 lines (67 loc) · 3.45 KB


Welcome 👋


About this project: 🙌

This is a team project, built by us in the Construct Week - Unit 4 at Masai School.


Presentation Video:


Project Demo:

Our Team Members ❤️


Pages & Features 👇

  • Home Page: Responsiveness.
  • Sign-Up Page: User details validated directly from backend.
  • Sign-In Page: User authentication to check whether user email and password match with details existing in the database.
  • Product Category Page: Products created dynamically, with sorting and filtering features. Used event listener to dynamically change the image on hover.
  • Single Products Page: Images from different view angle for products.
  • Cart Page: User can see or remove products added in the cart.
  • Checkout Page: Users can add the delivery address which will be stored to the backend.
  • Payment Page: Users can add their payment details.
  • Order Successful Page : cart gets empty and products are added to my orders page.

How To Use ✅

  • At First user has to click on login on landing page. User have to signup if he does not have an account. In signup page user has to fill all the fields in the form.
  • After signup user has to login with same details, otherwise it will show invalid credentials.After login user will be redirected to landing page.
  • Users can use the navigation bar, present at top of the page to browse different categories and they can click on any category as per their requirement and it will be redirected to particular category page.
  • Users can see the products, and clicking on particular product, they will be redirected to product details page.
  • On products details page users can see the details and also the add to cart button.
  • If he clicks on cart then he will be redirected to cart page where he can see products which he has added to cart.If he wants to remove any product he can click on remove button which will remove the product.
  • After adding all the products user can click on checkout.
  • Then they will proceed to checkout page, where user has to fill all the details for delivering the product.
  • After filling all the details including payment details then click on pay button. It will take some time for payment.
  • After payment has completed successfully then he will be redirected to landing page.

Tech Stack Used 🔧

  • EJS
  • Vanila CSS
  • Tailwind CSS
  • JavaScript
  • MongoDB Atlas
  • Mongoose
  • Express
  • Json web token
  • Bcrypt

Screenshots:

Homepage

image

Products Page

image

Product Details Page

image

Cart Page

image

Checkout Page

image image