rbhomale17 / CraftsHub-Project

An Indian e-commerce portal that sells ethnic apparel, footwear, fashion accessories, beauty products, handcrafted home accessories, and other ethnic fashion and lifestyle products and variety of products on the online platform.
https://craftshub.netlify.app/
5 stars 1 forks source link
css html javascript json-server

JS201 - Construct Week Project For Unit-3 JS201.

Project Code:- happy-notebook-3138

Introduction :

For the Construct Week Project, We created a clone of an Indian E-Commerce website called Craftvilla.com. Craftsvilla is an Indian e-commerce portal that sells ethnic apparel, footwear, fashion accessories, beauty products, handcrafted home accessories, and other ethnic fashion and lifestyle products. The company is headquartered in Mumbai, Maharashtra.


Team Members :

Team Lead & Student Code : Rushikesh Diliprao Bhomale ( fw25_348 ) https://github.com/rbhomale17

Team Member-1 & Student Code : Vaibhav Mohan Mahandiratta ( fw23_0017 ) https://github.com/vkmr007

Team Member-2 & Student Code : Ajit Kumar Roy ( fw25_259 ) https://github.com/Ajitroy01

Team Member-3 & Student Code : Rameshwar Gaidhane ( fw24_312 ) https://github.com/rhgaidhane123

Team Member-4 & Student Code : Astha Sachan ( fw23_0814 ) https://github.com/astha9040

IA Manager: Adarsha Khatua


Tech Stacks

Front End: CSS, HTML, JAVASCRIPT

Back End: CSS, HTML, JAVASCRIPT & JSON SERVER

External CSS for Icons : font-awesome :- https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css


json Server: Deployed on Rendor.com

API for All users ( Admin & customer):- https://mock-api-json-server-ooya.onrender.com/

API for All Products:- https://project-json-server-dkem.onrender.com/


Project App: Deployed on Netlify.com

CraftHub.com: https://craftshub.netlify.app/


Front End

We have used json server API for the functionality of the login page. In the Navbar section, you can click on the login button which will open a Sign-up Page if you are a new user on our website so you have sign-up first. After creating a new account you will automatically be redirected to the login page within 1 second. Where you can use UserName as your registered Email id: - user@gmail.com and the password that was given at the time of sign-up as - user to login into the page, after successfully Logging in you will be redirected to the Index Page or a Home Page automatically. If you enter any wrong information on the Login page it will not show you Wrong Email or Password... Where you can see the different tabs present on a navigation bar like product tabs, carts, and wishlists.

Then clicking on any tab present on the navbar will redirect that category products page where you can different products are shown. We have shown filtering functionality on the left side where you can filter based on price. At a time you can filter the products based on one selected filtering option. You can Sort the product based on the Price from low to high and Price from high to low. Then on every product, two buttons are there that you can use to add the product to the cart & wishlist respectively. After adding the product to the Cart user can proceed to checkout by clicking on the Checkout button after filling details of the order and the delivery order will be placed if the cart is not empty.


Back End

For the back end, we have created the Admin Site in the navigation bar there is an option present called sign-up/Log-in after clicking on that option admin will be redirected to the login page ( for Admin Only ). When a person tries to log in to the admin site to log in he/she must have to enter the correct Username & Password for login, After successful log in admin user will be redirected to the admin dashboard. On the Admin dashboard, there are multiple options are present like Admin registration: Logged-in admin can create a new admin user from here only. Add Product: on clicking on this button new add product page will open after filling necessary data on the form and clicking on submit button new product is added to your webpage or site. Track Order: Here Admin can track all orders that have been placed by users ( Customers ), It has search functionality by (name of the user, pin code of delivery, city name, buy_item, mobile number) to check or track the orders. Log Out: In the upper right corner of the admin webpage, there is an option called Log Out present after clicking on that Admin user will be logged out of the admin site and redirected to the Home page of the website.


Our Crafthub website basic flow is Given Below


1. Sign-in & Sign-up Page for Crafthub customers

Screenshot 2023-04-03 190922

2. Navigation Bar

Screenshot 2023-04-03 190623

3. Home Page of Our Site

Screenshot 2023-04-03 190612

4. Product Page

Screenshot 2023-04-03 190714

5. Cart Page

Screenshot 2023-04-03 190809

6. Checkout Page

Screenshot 2023-04-03 190859

7. Admin Login Page

Screenshot 2023-04-03 191940

8. Admin Dashboard Page

Screenshot 2023-04-03 191442

9. Track Order Page for Admin

Screenshot 2023-04-03 191359

THANK YOU