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.

It was a collaborative project it took 6 days to complete the project we created a basic flow for the Front End of the website.
- Index Page
- Product pages
- Sign-Up Page for the customer
- Login Page the customer
- Cart page
- Wishlist page,
- Checkout page
- filter & sort functionality added on product pages.
We have also created a basic flow for the Back End of the website
- Admin Login
- Product adding page
- Admin Registration page
- Track Order with Location Page and search functionality added.

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.