This content originally appeared on DEV Community and was authored by WeryZebra-Yue
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:
- E-Commerce
Â
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"
}
]
}
}
}
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;
}
Â
FrontEnd
Makeit-S-Rank-Coders
/
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
Product page
Profile Page (Seller)
…
BackEnd
Make-It Backend
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
- Fork the repository
- Clone the repository
https://github.com/S-Rank-Coders/backend.git
- Open the folder containing the cloned repository
- Install the required packages, libraries and dependencies
npm install
- Custom API keys can be set up in a
.envfile. The format for.envfile can be found in.env.example. - Start the project using:-
npm run dev
- Open http://localhost:8080/api-explorer/ to view the API documentation.
S-Rank-Coders
Team members:
Storage
Make-It Storage
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
- Fork the repository
- Clone the repository
https://github.com/S-Rank-Coders/backend.git
- Open the folder containing the cloned repository
- Install the required packages, libraries and dependencies
npm install
- Custom API keys can be set up in a
.envfile. The format for.envfile can be found in.env.example. - Start the project using:-
npm run dev
- Open http://localhost:3200/addImages/ to cloudnariy.
S-Rank-Coders
Team members:
Â
Screens shots:
Home Page
Top-Picks
Product page
Profile Page (Seller)
Profile Page (Customer)
Wishlist
Dashboard (Seller)
Products (Seller)
Order Page (Seller)
Order Page (Customer)
Â
Â
S Rank Coders
Team members:
This content originally appeared on DEV Community and was authored by WeryZebra-Yue
WeryZebra-Yue | Sciencx (2022-01-13T13:34:50+00:00) MakeIt – an eCommerce platform with customizable products. Retrieved from https://www.scien.cx/2022/01/13/makeit-an-ecommerce-platform-with-customizable-products/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.