/makeit-frontend

MakeIt - an eCommerce platform with customizable products

Primary LanguageJavaScriptMIT LicenseMIT

MakeIt

149317179-c574250e-8689-483e-bdcf-bb53dd48b002

MakeIt🔗 Figma🔗

Overview of Make-It

  • Make-It is an E-Commerce platform for selling and buying products with customization according to buyer affections. This platform is built using the MERN stack ( MongoDB, Express, React, Node js). With all the E-Commerce platform features, it also has unique features to customize the product to the buyer's needs. Sellers provide the required attachments for customizing, and customers upload desired product previews. After confirmation of the order, the Customer can also ask for changes in design and reject the designs provided by the seller. From the seller's perspective, the seller can confirm customer orders, make designs, Wait for approval, and get delivered after approval from both sides. It is designed in Figma.

Technologies:

  • React version: 17.0.1
  • axios version: 0.21.1
  • react-cookie version: 4.1.1
  • react-toastify version: 8.1.0
  • redux version: 4.0.5
  • @mui/material version: 5.2.7
  • Figma ( Design )
  • Vercel ( Deployment )

Screens shots:

Landing Page

  • On visiting the site🔗 user will be with a login popup. He may also choose to signup he is not registered before. Also, as the user is free to surface site without login, if the user only wants to check products, he can do it without the need of login.

    login.png

    signup.png

    home-full.png

Search Results:

  • User will be redirected here on the search, and the user may also browse top picks here.

    toppicks.png

    watch.png

Product Page:

  • User can see reviews of products, visualize the product wishlist items, Place order directly from here, or add the product to the cart from here.

    product.png

Cart Page:

  • There are two different versions of the cart in MakeIt. One is when the cart is empty, and another one is when the cart has some items in it. For each item user can either remove or move it to the wishlist.

    cart full.png

    cart empty.png

Profile Page:

  • Profile page has various sections depending on the type of the user (if he is a seller or not).

    • User:

      profil user 1.png

      profil user 2.png

      profil user 3.png

      profil user 4.png

    • Seller:

      profil seller 1.png

      profil seller 2.png

      profil seller 3.png

      profil seller 4.png

Run this on your local Server

Paste this line in your CLI

git clone https://github.com/RajVarsani/makeit-frontend

cd frontend

npm start

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

The page will reload if you make edits.
You will also see any lint errors in the console.

To Connect with backend visit https://github.com/RajVarsani/makeit-backend