Craftco

INTRODUCTION :

Hello Everyone, We have build a clone of Craftvilla. Currently, we are pursuing the Full Stack Web Development course at Masai School. We are in last week of unit 6 which is known by construct week . In this week we build the clone of Dermstore which is given by Masai School . Thanks to Masai School for this opportunity.

🚀 Demo

Front-end deployed URL:

[Craftco] (https://craftco.netlify.app/)

📁 Folder structure

• public - This holds all of our static files

• src

  • assets - This folder holds assets such as images, docs, and fonts

  • components - This folder holds all of the different components that will make up our pages

  • pages - These represent a unique page on the website i.e. Home or About.

  • redux - It consists of store, reducer, action and actiontypes and is responsible for global state management of our app.

  • App.js - This is what renders all of our browser routes and different pages

  • index.js - This is what renders the react app by rendering App.js.

• package.json - Defines npm behaviors and packages for the client

.gitignore - Tells git which files to ignore

README - This file!

System display size 💻 = 1024 to 1680 pixels

Home Page :

On the Home Page, there are many options like a search bar where users can search products by product name or Brand, then there is also an account option where users can log in or signup and beside this, cart option or admin panel is also there and by clicking on the cart option users can see the products which they have added to the cart. users can also see new arrivals products and scroll through them just by clicking the buttons which are present on the left and right side.

Landing Page

This is the home page of the website which contains different categories of products. And it also contains various crousels containing links to the products page. Also some of the adds are present in the last section of the home page, they also lead to products page.

SignUp Page/Login:

Signup / Login for our clone has been done by using firebase auth. An user can login into our website by using his mobile number. An otp will be sent to his phone through firebase, By which the user can Login. Also user can login using his google id. On successfull login the user gets redirected to the Home page with an successfull alert.

Footer/NavBar part :-

Navbar consists of links for various product page, We can routes through different pages using navbar. React-router dom has used to make this possible

Products page

Products page consists of all the data comming from the backend server and it show them in a grid format.

Single Product page

On clicking on any of the products from the product page the website will redirect us to the single product page, where we can see all the details of that specific product. Which includes image, price, title, description etc.

Cart Page :

Cart consists of all the data the user has added from products page and the single product page. Here the user can change the quantity for the products and the price data will update accordingly.

Payment Page:-

This is the Checkout page, which is the last page of the website. The user will get redirected to this page once he clicks on the checkout securely button on the cart page. The user needs to fill his account details and then after clicking on submit my order button.

Team Members

• Anmol jagota
• Harshal Apsunde
• Dhanush Saji
• Rashmiranjan Mahanta

Technology Used

• React • React-Redux • React-Router • Material UI • Module CSS • JSON Server • ExpressJS • MongoDB • NodeJS

Tools Used

• VS Code • GitHub • Cyclic • Git • Postman