{"id":19606726,"url":"https://github.com/learnwithfair/mern-ecommerce-electro-master","last_synced_at":"2026-04-10T02:03:24.921Z","repository":{"id":218994874,"uuid":"747254943","full_name":"learnwithfair/mern-ecommerce-electro-master","owner":"learnwithfair","description":"mern-ecommerce-electro-master [learnwithfair, Learn with fair, Rahatul Rabbi, Md Rahatul Rabbi ,rahatulrabbi]","archived":false,"fork":false,"pushed_at":"2024-11-15T06:33:03.000Z","size":17491,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-09T09:24:18.327Z","etag":null,"topics":["e-commerce-project","e-commerce-website","express-js","learnwithfair","mern","mern-project","mern-stack","mongodb","mongodb-atlas","node-js","rahatul","rahatul-rabbi","react","reactjs"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/learnwithfair.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-01-23T15:19:25.000Z","updated_at":"2024-11-15T06:33:07.000Z","dependencies_parsed_at":"2024-05-17T06:40:02.737Z","dependency_job_id":null,"html_url":"https://github.com/learnwithfair/mern-ecommerce-electro-master","commit_stats":null,"previous_names":["learnwithfair/mern-ecommerce-electro-master"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/learnwithfair%2Fmern-ecommerce-electro-master","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/learnwithfair%2Fmern-ecommerce-electro-master/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/learnwithfair%2Fmern-ecommerce-electro-master/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/learnwithfair%2Fmern-ecommerce-electro-master/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/learnwithfair","download_url":"https://codeload.github.com/learnwithfair/mern-ecommerce-electro-master/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240894497,"owners_count":19874822,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["e-commerce-project","e-commerce-website","express-js","learnwithfair","mern","mern-project","mern-stack","mongodb","mongodb-atlas","node-js","rahatul","rahatul-rabbi","react","reactjs"],"created_at":"2024-11-11T10:07:02.786Z","updated_at":"2026-04-10T02:03:24.820Z","avatar_url":"https://github.com/learnwithfair.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## MERN STUCK E-COMMERCE PROJECT\n\nThanks for visiting my GitHub account!\n\n![](https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRTZT5qJiTrdjCqCliDz_UQGGFTvr_hmqFt9DOjGKC80Q\u0026s)\n\nWeb development refers to the creating, building, and maintaining of websites. It includes aspects such as web design, web publishing, web programming, and database management. One of the most famous stacks that is used for Web Development is the MERN stack. This stack provides an end-to-end framework for the developers to work in and each of these technologies play a big part in the development of web applications. [more](https://www.geeksforgeeks.org/mern-stack/)\n\n## Source Code (Download)\n\n[Click Here](https://mega.nz/file/AX1QXBzT#tkKTBeiS2r32mF88reoBp7iAiiUrS0FedWZdsCTc9PA)\n## Features\nThe following features are included here,\n- Authentication System (Login, Logout, Forgot Password, etc)\n- Admin Banned and Unbanned Systems\n- Admin, Logo, Order Management\n- Product Management\n- Notification, Summary of Business\n- AddToCart, Checkout, and Payment System\n- SMTP Mailing System\n- JWT Token System\n- Real-Time Add Item\n- Grid and List View\n- Product Filtering with Category, Price, etc\n- Recent and Related Products\n- Product Reviews and Comment Systems\n- Single Product's Page \n- Profile with Personal, Permanent address, and Photo\n- Account Delete\n- Toast\n- Sweet Alert and many more. \n  \n## Required Software (Download)\n\n- VS Code, Download -\u003ehttps://code.visualstudio.com/download\n- Node, Download-\u003e https://nodejs.org/en/download\n- MongoDB Shell(msi) , Download-\u003e https://www.mongodb.com/try/download/shell\n- MongoDB Compass (msi), Download-\u003e https://www.mongodb.com/try/download/community\n- Postman, Download-\u003e https://www.postman.com/downloads/\n\n**Or Online Database (MongoDB Atlas)**\n\n- Register -\u003e https://www.mongodb.com/cloud/atlas/register\n\n## ========== Environment Setup ==========\n\n1. Instal Node.js\n2. To verify installation into command form by node -v\n3. For initialization npm write the query in the command window as npm init -y\n4. Setup the opening file into the package.json and change the file with main:'server.js'\n5. To create a server using the express package then write a query into the command window as npm install express.\n   Write code in the server file for initialization\n   const express = require(\"express\");\n   const app = express();\n   app.listen(3000, () =\u003e {\n   console.log(\"Server is running at http://localhost:3000\");\n   });\n\n6. Install the nodemon package for automatically running the server as- npm i --save-dev nodemon (For Developing purpose)\n7. setup the package.json file in the scripts key, write\n   \"scripts\": {\n   \"start\": \"node ./resources/backend/server.js\",\n   \"dev\": \"nodemon ./resources/backend/server.js\",\n   \"test\": \"echo \\\"Error: no test specified\\\" \u0026\u0026 exit 1\"\n   },\n8. use the Morgan package for automatic restart. Hence install the morgan package as npm install --save-dev morgan (Development purpose)\n   Write code in the server file for initialization\n   const morgan = require(\"morgan\");\n   app.use(morgan(\"dev\")); --\u003e Middlewire.\n9. Install Postman software for API testing by the URL endpoint.\n10. Install Mongobd + MongobdCompass and Mongoshell (For Database)\n\n## ========== Connect MongoDB Database ==========\n\n1. Install Mondodb + Mongodb Compass and Mongodb Shell download from the google.\n2. Set up Environment Variable in drive:c/program file\n3. Create a directory in the base path of the c drive named data. Inside the data directory create another folder db.\n4. Write the command in the CMD window as Mongod. And write the other command in the other CMD window as mongosh.\n5. Then Check the version as mongod --version and mongosh --version.\n6. Install mongoose package as npm i mongoose\n7. Create an atlas account. In the atlas account create a cluster that have a user(as atlas admin) and network access with any access IP address.\n8. Connect the database using URL from the atlas cluster or local Mongodb compass using the mongoose package as mongoose. connect('mongodb://localhost:27017/database-name);\n\n## Step-1: Client Side Configuration\n\n### API-\u003e client/src/config/Config.jsx\n\n```bash\nconst BASE_URL = \"http://localhost:5173\";\nconst CLIENT_URL = \"http://localhost:3000\";\n```\n\n## Step-2 Run Command in Terminal (client)\n\n```bash\ncd client\nnpm install --force\nnpm run dev\n```\n\n## Step-3: Server Side Configuration\n\n### API-\u003e server/.env\n\n```bash\nPORT_NUMBER=3000\nMOGODB_ATLAS_URL=From-Atlas-cluster-account\n\nJWT_ACTIVATION_KEY=JWTUserProcessRegisterToken\nJWT_RESET_PASSWORD_KEY=JWTUserResetPasswordKey\nJWT_LOGIN_KEY=UserAccessKeyHere\n\nSMTP_USERNAME=Email-ID\nSMTP_PASSWORD=password\nCLIENT_URL=http://localhost:3000 (Server URL)\nBASE_URL=http://localhost:5173 (Frontend URL)\n\nSTORE_ID=SSLPayment-ID\nSTORE_PASSWORD=sslPayment-Password\n```\n\n### API-\u003e server/resources/js/secret.js\n\n```bash\nconst mongodbURL = \"mongodb://localhost:27017/ecommerceMernDB\";(For Local Database)\n```\n\n## Step-4 Run Command in another Terminal (server)\n\n```bash\ncd server\nnpm install --force\nnpm run dev\n```\n\n## Step-5 \nvisit -\u003e http://localhost:5173/\nDashboard -\u003e http://localhost:5173/api/admin/dashboard\n## Socket IO\n\n**If any error occur for socket.io/Network error then change the port (8080) for socket.io in both app.js and Cart.jsx file with your recomendd port.**\n\n## Project Overview\n\n### Backend\n\n|                                                                                                                       |\n| :-------------------------------------------------------------------------------------------------------------------: |\n|                                                   Dashboard Preview                                                    |\n| ![backent](https://github.com/learnwithfair/mern-ecommerce-electro-master/blob/main/screenshot/dashboard/preview.jpg) |\n\n### Frontend\n\n|                                                                                                                             |                                                                                                                        |\n| :-------------------------------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------------: |\n|                                                            Home                                                             |                                                        Product                                                         |\n|       ![Home](https://github.com/learnwithfair/mern-ecommerce-electro-master/blob/main/screenshot/frontend/Index.png)       |   ![Product](https://github.com/learnwithfair/mern-ecommerce-electro-master/blob/main/screenshot/frontend/Store.png)   |\n|                                                       Single Product                                                        |                                                        Checkout                                                        |\n| ![single-product](https://github.com/learnwithfair/mern-ecommerce-electro-master/blob/main/screenshot/frontend/Product.png) | ![checkout](https://github.com/learnwithfair/mern-ecommerce-electro-master/blob/main/screenshot/frontend/Checkout.png) |\n|                                                           Profile                                                           |                                                        Regular                                                         |\n|    ![profile](https://github.com/learnwithfair/mern-ecommerce-electro-master/blob/main/screenshot/frontend/profile.png)     |  ![reqular](https://github.com/learnwithfair/mern-ecommerce-electro-master/blob/main/screenshot/frontend/Regular.png)  |\n\n## Necessary Code\n\n```bash\nconst express = require(\"express\"); // Create Express server\nconst morgan = require(\"morgan\"); // For automatically run server\nconst cookieParser = require(\"cookie-parser\"); // For set Cookie\nconst createError = require(\"http-errors\"); // For create HTTP Error\nconst xssClean = require(\"xss-clean\"); // For  Secure API\nconst bodyParser = require(\"body-parser\"); // For Get/ Set data into body\nconst cors = require(\"cors\"); // To set access for client-side URL\n```\n\n/_\n|--------------------------------------------------------------------------\n| Initialize Middleware\n|--------------------------------------------------------------------------\n_/\n\n```bash\napp.use(cookieParser()); // For set Cookie\napp.use(morgan(\"dev\")); // For automatically run server\napp.use(xssClean()); // For  Secure api\napp.use(bodyParser.json()); // For Set, Read data into the body and display JSON Format Text\napp.use(bodyParser.urlencoded({ extended: true })); // Get HTML Form Data\napp.use(setRefreshToken); // For set Refresh Token [Automatically call this middleware for all route]\n// To get access to Client side URL\napp.use(cors(\n {\n   origin: BASE_URL, // Frontend Base URL\n   credentials: true\n }\n));\napp.use(express.static(\"public\")); // To Display Server site image\n```\n\n/_\n|--------------------------------------------------------------------------\n| Socket IO\n|--------------------------------------------------------------------------\n_/\n\n```bash\nconst io = require(\"socket.io\")(8080, {\n cors: {\n   origin: BASE_URL\n },\n});\nio.on(\"connection\", (socket) =\u003e {\n console.log(\"User connected\", socket.id);\n\n setInterval(() =\u003e {\n   io.emit(\"refresh\", {});\n }, 500)\n\n // socket.on(\"disconnect\", function () {\n //   console.log(\"Disconnect\");\n\n // })\n\n});\n```\n\n\n#learnwithfair #rahtulrabbi #rahatul-rabbi #learn-with-fair\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flearnwithfair%2Fmern-ecommerce-electro-master","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flearnwithfair%2Fmern-ecommerce-electro-master","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flearnwithfair%2Fmern-ecommerce-electro-master/lists"}