MakeIt – an eCommerce platform with customizable products


MakeIt🔗 UI🔗

 



Overview of Submission

  • Make-It is an E-Commerce platform for selling and buying items. This platform is built using the MERN stack ( MongoDB, Express, React, Node js). With all the E-Commerce platform features, it has extra features to customize the product in which sellers showcase the required attachments for customizing, and customers upload desired images for customizing. 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.

  • There are major 3 Component in this project, first one is frontend which is made using React framework, second is backend, in which we used Node.js + Express + MongoDB and third is storage which is a api made using Express and Node.js which stores image for us in Cloudinary storage.



Submission Category:

 



MongoDB Atlas search:



We used auto-complete feaure of atlas-search and our searching index name is “Search index” and this was it’s propoties

{
  "mappings": {
    "dynamic": false,
    "fields": {
      "search_key": [
        {
          "dynamic": true,
          "type": "document"
        },
        {
          "maxGrams": 19,
          "type": "autocomplete"
        }
      ],
      "title": [
        {
          "dynamic": true,
          "type": "document"
        },
        {
          "foldDiacritics": false,
          "maxGrams": 2,
          "type": "autocomplete"
        }
      ]
    }
  }
}
Enter fullscreen mode

Exit fullscreen mode



Implementation

  const products = await Product.aggregate([
        {
          $search: {
            index: "Search index",
            autocomplete: {
              query: keyword,
              path: "search_key",
            },
          },
        },
      ])
        .sort({ star: -1 })
        .limit(10);
      return products;
    } else {
      const products = await Product.aggregate([
        {
          $search: {
            index: "Search index",
            autocomplete: {
              query: keyword,
              path: "search_key",
            },
          },
        },
      ]);
      return products;
    }
Enter fullscreen mode

Exit fullscreen mode

 



FrontEnd

MakeIt – an eCommerce platform with customizable products

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

Screens shots:

Home Page

Top-Picks

toppicks

Product page

toppicks

Profile Page (Seller)



BackEnd

jXAvz9h-removebg

Technologies

Project is created with:

  • nodejs version: 16.13.0
  • express version: 4.17.1
  • mongoose version: 5.11.17
  • jsonwebtoken version: 8.5.1
  • multer version: 1.4.4
  • bcrypt version: 5.0.1
  • deployment: Microsoft azure
  • swagger

Getting Started

  1. Fork the repository
  2. Clone the repository
https://github.com/S-Rank-Coders/backend.git
Enter fullscreen mode

Exit fullscreen mode

  1. Open the folder containing the cloned repository
  2. Install the required packages, libraries and dependencies
npm install
Enter fullscreen mode

Exit fullscreen mode

  1. Custom API keys can be set up in a .env file. The format for .env file can be found in .env.example.
  2. Start the project using:-
npm run dev
Enter fullscreen mode

Exit fullscreen mode

  1. Open http://localhost:8080/api-explorer/ to view the API documentation.

S-Rank-Coders

Team members:



Storage

image 42

Created with Cloudinary

Technologies

Project is created with:

  • nodejs version: 16.13.0
  • express version: 4.17.1
  • mongoose version: 5.11.17
  • multer version: 1.4.4
  • cloudinary version: 1.28.0

Getting Started

  1. Fork the repository
  2. Clone the repository
https://github.com/S-Rank-Coders/backend.git
Enter fullscreen mode

Exit fullscreen mode

  1. Open the folder containing the cloned repository
  2. Install the required packages, libraries and dependencies
npm install
Enter fullscreen mode

Exit fullscreen mode

  1. Custom API keys can be set up in a .env file. The format for .env file can be found in .env.example.
  2. Start the project using:-
npm run dev
Enter fullscreen mode

Exit fullscreen mode

  1. Open http://localhost:3200/addImages/ to cloudnariy.

S-Rank-Coders

Team members:

 



Screens shots:



Home Page

Imagedescription



Top-Picks

Imagedescription



Product page

Imagedescription



Profile Page (Seller)

Imagedescription



Profile Page (Customer)

Imagedescription



Wishlist

Imagedescription



Dashboard (Seller)

Imagedescription



Products (Seller)

Imagedescription



Order Page (Seller)

Imagedescription



Order Page (Customer)

Imagedescription

 

Don’t forget to check out live version of MakeIt

 



S Rank Coders



Team members:



Source link

%d bloggers like this: