{"id":17076858,"url":"https://github.com/sebe2k04/genkart-next-node-ecommerce-v2","last_synced_at":"2025-08-12T14:42:02.895Z","repository":{"id":257210608,"uuid":"857579363","full_name":"Sebe2k04/Genkart-Next-Node-Ecommerce-v2","owner":"Sebe2k04","description":"Open Source Next js , Node js Ecommerce Website to provide enhanced UI and backend functionality using js libraries and framewords , For education purpose , feel free to use it..","archived":false,"fork":false,"pushed_at":"2025-02-18T07:12:12.000Z","size":5373,"stargazers_count":11,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-04T11:51:16.438Z","etag":null,"topics":["authentication","cloudinary","context-api","ecommerce","expressjs","fullstack","mern","mern-stack","mongodb","mui","nextjs","nodejs","protected-routes","reacthooks","reactjs","restful-api","taiwindcss","website"],"latest_commit_sha":null,"homepage":"https://genkart.vercel.app","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Sebe2k04.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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,"zenodo":null}},"created_at":"2024-09-15T03:09:44.000Z","updated_at":"2025-03-12T01:02:26.000Z","dependencies_parsed_at":"2024-09-15T10:23:37.544Z","dependency_job_id":"d6aba610-ef11-4e43-be29-e80c5c4a0c7e","html_url":"https://github.com/Sebe2k04/Genkart-Next-Node-Ecommerce-v2","commit_stats":null,"previous_names":["sebe2k04/genkart-next-node-ecommerce-v2"],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/Sebe2k04/Genkart-Next-Node-Ecommerce-v2","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sebe2k04%2FGenkart-Next-Node-Ecommerce-v2","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sebe2k04%2FGenkart-Next-Node-Ecommerce-v2/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sebe2k04%2FGenkart-Next-Node-Ecommerce-v2/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sebe2k04%2FGenkart-Next-Node-Ecommerce-v2/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Sebe2k04","download_url":"https://codeload.github.com/Sebe2k04/Genkart-Next-Node-Ecommerce-v2/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sebe2k04%2FGenkart-Next-Node-Ecommerce-v2/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":270078387,"owners_count":24523373,"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","status":"online","status_checked_at":"2025-08-12T02:00:09.011Z","response_time":80,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["authentication","cloudinary","context-api","ecommerce","expressjs","fullstack","mern","mern-stack","mongodb","mui","nextjs","nodejs","protected-routes","reacthooks","reactjs","restful-api","taiwindcss","website"],"created_at":"2024-10-14T12:09:56.062Z","updated_at":"2025-08-12T14:42:02.849Z","avatar_url":"https://github.com/Sebe2k04.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Genkart-Ecommerce\r\n\r\n\u003cimg src=\"./readme-assets/herosc.png\" alt=\"\" /\u003e\r\n\u003cimg src=\"./readme-assets/exploresc.png\" alt=\"\" /\u003e\r\n\u003cimg src=\"./readme-assets/productsc.png\" alt=\"\" /\u003e\r\n\u003cimg src=\"./readme-assets/adminsc.png\" alt=\"\" /\u003e\r\n\r\n\r\nGenkart is a sophisticated e-commerce platform designed to demonstrate a wide range of web development skills. Unlike traditional e-commerce sites, Genkart intentionally omits payment and \"Buy Now\" options, focusing instead on the user experience, product management, and robust backend functionality. The project is built using cutting-edge technologies and frameworks to ensure scalability, performance, and maintainability.\r\n\r\n### Tech Stack Overview:\r\n\r\nFrontend: Built with Next.js, a powerful React-based framework that supports server-side rendering and static site generation, enhancing both performance and SEO.\r\n\r\nBackend: Powered by Node.js and Express.js, providing a flexible and efficient environment for handling API requests and managing server-side logic.\r\n\r\nDatabase: Utilizes MongoDB, a NoSQL database, for storing product information, user data, and other critical information. The schema-less nature of MongoDB allows for rapid development and flexibility in data management.\r\n\r\nImage Management: Cloudinary is integrated for efficient image storage and delivery, offering responsive images and optimized media assets across the platform.\r\n\r\nStyling: The user interface is styled with Tailwind CSS and Material UI, combining the utility-first approach of Tailwind with the component-rich Material UI to create a visually appealing and responsive design. Material Tailwind further enhances the design with additional UI components.\r\n\r\n### Key Features:\r\n\r\nAuthentication \u0026 Authorization:\r\n\r\nSecure user authentication and role-based authorization are implemented using JWT (JSON Web Tokens). This ensures that only authenticated users can access certain features, with secure token exchange managed via cookies.\r\nThe platform supports user roles such as admin and customer, each with specific access levels and permissions.\r\n\r\nProduct Management:\r\n\r\nProduct Pages: Each product category, such as T-shirts and casual shirts, has dedicated pages. These pages dynamically display products pulled from the database, with detailed information and images stored via Cloudinary.\r\nCategory Pages: Users can browse products by categories, which are organized to provide a seamless shopping experience.\r\nUser Profile:\r\n\r\nThe profile page allows users to manage their personal information, view their browsing history, and update account settings. It is a hub for user-specific interactions, designed to be intuitive and user-friendly.\r\n\r\nAdmin Panel:\r\n\r\nThe admin dashboard is a critical feature of Genkart, empowering administrators to perform CRUD (Create, Read, Update, Delete) operations on products, categories, and user accounts. This panel is designed with security in mind, ensuring that only authorized admins can make changes to the platform’s content.\r\n\r\n### Project Objectives:\r\n\r\nGenkart is not just a showcase of products; it is a demonstration of full-stack web development skills. By integrating modern technologies and best practices, this project serves as a portfolio piece, illustrating the ability to build scalable, maintainable, and user-friendly applications. The project also highlights proficiency in handling complex authentication mechanisms, managing media assets efficiently, and designing responsive and interactive user interfaces.\r\n\r\n### Potential Future Enhancements:\r\n\r\nAlthough the current version of Genkart does not include payment and \"Buy Now\" options, it is architected to easily integrate these features in the future. Possible enhancements include:\r\n\r\nPayment Gateway Integration: Adding secure payment processing with popular gateways like Razorpay or Stripe.\r\nShopping Cart: Implementing a fully functional shopping cart to manage user selections.\r\nOrder Management: Developing an order management system to track purchases and handle user orders efficiently.\r\n\r\n## Technologies used ...\r\n\r\nthis project is developed by using\r\n\r\n- Next js\r\n- Node js\r\n- Express js\r\n- MongoDB\r\n- Tailwind css\r\n- Cloudinary\r\n- Material UI\r\n- Material Tailwind\r\n  etc...\r\n\r\n## How to use\r\n\r\n### requirements\r\n\r\ncreate a mongodb atlas account : https://www.mongodb.com/products/platform/atlas-database\r\n\r\ncreate a cloudinary account : https://cloudinary.com/\r\n\r\nuse visual studio code editor : https://code.visualstudio.com/download\r\n\r\nintall git\r\nfor windows : https://git-scm.com/download/win\r\nfor mac : https://git-scm.com/download/mac\r\n\r\ninstall node js : https://nodejs.org/en/download/package-manager\r\n\r\n### get code from github\r\n\r\ncreate a folder and open in visual studio code\r\n\r\nopen new terminal in vs code then run below command\r\n\r\n```bash\r\ngit clone https://github.com/Sebe2k04/Genkart-Next-Node-Ecommerce-v2.git ./\r\n```\r\n\r\nthen provide env files provided below\r\n\r\n### Environment Variables\r\n\r\ninitially create a env file in root folder of next js - location (/client/.env)\r\n\r\nimportant note : you can provide jwt secret based on you wish but provide same secret value for client and server\r\n\r\n```bash\r\n\r\n# backend url\r\nNEXT_PUBLIC_API='http://localhost:5000/api'\r\n# frontend url\r\nNEXT_PUBLIC_CLIENT_URL=\"http://localhost:5000/\"\r\n# jwt secret for verify user - replace as per you wish -same as backend\r\nNEXT_PUBLIC_JWT_SECRET=\"adminfksnkzv\"\r\n# jwt secret value for verify admin- replace as per you wish -same as backend\r\nNEXT_PUBLIC_JWT_USER_SECRET=\"usernsdbdskvn\"\r\nNEXT_PUBLIC_NODE_ENV=\"development\"\r\n\r\n```\r\n\r\nafter that create a env file in root folder of server - location (/server/.env)\r\n\r\n```bash\r\n# your mongodb uri - replace username and password and provide yours\r\n\r\nMONGO_DB_URI=\"mongodb+srv://username:password@project.wvpqroq.mongodb.net/genkartv2?retryWrites=true\u0026w=majority\u0026appName=project\"\r\n# gmail to send mail to users for reset password\r\nEMAIL_USER=\"genriotesting@gmail.com\"\r\n# gmail app password to provide access to send emails --for info search how to send mail use nodemailer in node js\r\nEMAIL_PASS=\"vivh ztpd snny zjda\"\r\n# client url\r\nCLIENT_URL=\"http://localhost:3000\"\r\n# node environment\r\nNODE_ENV=\"production\"\r\n# cloudinary name\r\nCLOUDINARY_CLOUD_NAME=\"\"\r\n# cloudinary api key\r\nCLOUDINARY_API_KEY=\"\"\r\n# cloudinary secret key\r\nCLOUDINARY_API_SECRET=\"\"\r\n# cloudinary folder name to store files in specific folder\r\nCLOUDINARY_FOLDER_NAME=\"Genkartv2\"\r\n# jwt secret to encode and decode admin token between client and server -provide same value as frontend\r\nJWT_SECRET=\"adminfksnkzv\"\r\n# jwt secret to encode and decode user token between client and server -provide same value as frontend\r\nJWT_USER_SECRET=\"usernsdbdskvn\"\r\n# jwt expiration\r\nJWT_EXPIRES_IN=\"1d\"\r\n```\r\n\r\n### how to run it\r\n\r\nnote : initially the website will be blank because no user , admin or products are not present in your database..\r\n\r\ncreate two terminals in vs code\r\n\r\nin first one\r\n\r\n```bash\r\ncd server\r\nnpm install\r\nnpm start\r\n```\r\n\r\nin second one\r\n\r\n```bash\r\ncd client\r\nnpm install\r\nnpm run dev\r\n```\r\n\r\nNow you have running your frontend and backend\r\nall the running url will be displayed on respective terminal\r\n\r\n### create admin user\r\n\r\nImportant note :\r\n\r\ninitially go to below file\r\n\r\n/server/routes/authRoutes.js\r\n\r\nthen uncomment the admin signup route\r\n\r\n--\r\n\r\nnote i didn't provide admin signup ui , due to secure concerns . after create admin comment the respective route in server auth route - (admin signup)\r\n\r\nopen postman\r\n\r\nthen create new workspace\r\n\r\nthen provide url backend url with respective route\r\nfor example : if you running in localhost 5000\r\n\r\nhttp://localhost:5000/api/auth/admin/signup\r\n\r\n\u003cimg src=\"./readme-assets/postman.png\" alt=\"\" /\u003e\r\n\r\nafter that you got a response similar like above image\r\n\r\nthen in frontend url login with respective email and password to gain access to admin dashboard in ,\r\n\r\nhttp://localhost:3000/admin\r\n\r\nthen you can add and remove products in admin dashboard\r\n\r\n# project authority\r\n\r\nthis project is developed only by @sebe2k04 , if you have any queries contact me on ,\r\n\r\ngithub :\r\n\r\nhttps://github.com/Sebe2k04\r\n\r\nlinked in :\r\n\r\nhttps://www.linkedin.com/in/sebe2k04/\r\n\r\ngmail :\r\n\r\nsebe2k04@gmail.com\r\n\r\nwebsite:\r\n\r\nhttps://sebe2k04.vercel.app/\r\n\r\nthis project is developed only by myself - sebe , to showcase my developing skills , im a fresher and im currently looking full time job oppurtunities , thank you all...\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsebe2k04%2Fgenkart-next-node-ecommerce-v2","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsebe2k04%2Fgenkart-next-node-ecommerce-v2","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsebe2k04%2Fgenkart-next-node-ecommerce-v2/lists"}