{"id":19710105,"url":"https://github.com/mariangle/nextjs-ecommerce-cms","last_synced_at":"2025-05-07T18:09:23.713Z","repository":{"id":179030895,"uuid":"660952938","full_name":"mariangle/nextjs-ecommerce-cms","owner":"mariangle","description":"A Content Management System for Ecommerces","archived":false,"fork":false,"pushed_at":"2023-08-31T11:58:38.000Z","size":228,"stargazers_count":9,"open_issues_count":0,"forks_count":3,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-05-07T18:09:11.826Z","etag":null,"topics":["mysql","nextjs13","tailwindcss","typescript"],"latest_commit_sha":null,"homepage":"https://nextjs-ecommerce-cms.vercel.app","language":"TypeScript","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/mariangle.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":"2023-07-01T10:19:26.000Z","updated_at":"2025-01-30T19:07:48.000Z","dependencies_parsed_at":"2024-11-11T22:06:32.324Z","dependency_job_id":"ac0f0b8d-042e-4f15-a792-adaa7c82f2a8","html_url":"https://github.com/mariangle/nextjs-ecommerce-cms","commit_stats":null,"previous_names":["mariangle/cms-admin","mariangle/nextjs-ecommerce-cms"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mariangle%2Fnextjs-ecommerce-cms","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mariangle%2Fnextjs-ecommerce-cms/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mariangle%2Fnextjs-ecommerce-cms/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mariangle%2Fnextjs-ecommerce-cms/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mariangle","download_url":"https://codeload.github.com/mariangle/nextjs-ecommerce-cms/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252931555,"owners_count":21827112,"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":["mysql","nextjs13","tailwindcss","typescript"],"created_at":"2024-11-11T22:06:21.848Z","updated_at":"2025-05-07T18:09:23.665Z","avatar_url":"https://github.com/mariangle.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://nextjs-ecommerce-cms.vercel.app/\"\u003e\n    \u003cimg alt=\"ecommerce cms screenshot\" src=https://github.com/mariangle/nextjs-ecommerce-cms/assets/124585244/236ffe58-7c47-41cc-a6e9-3329545dc273\n\u003e\n    \u003ch1 align=\"center\"\u003eEcommerce CMS\u003c/h1\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  A full stack application built with TypeScript and Next.js\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"#introduction\"\u003e\u003cstrong\u003eIntroduction\u003c/strong\u003e\u003c/a\u003e ·\n  \u003ca href=\"#tech-stack\"\u003e\u003cstrong\u003eTech Stack\u003c/strong\u003e\u003c/a\u003e ·\n  \u003ca href=\"#usage\"\u003e\u003cstrong\u003eUsage\u003c/strong\u003e\u003c/a\u003e ·\n  \u003ca href=\"#database-design\"\u003e\u003cstrong\u003eDatabase Design\u003c/strong\u003e\u003c/a\u003e ·\n  \u003ca href=\"#installation\"\u003e\u003cstrong\u003eInstallation\u003c/strong\u003e\u003c/a\u003e ·\n  \u003ca href=\"#license\"\u003e\u003cstrong\u003eLicense\u003c/strong\u003e\u003c/a\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.linkedin.com/in/maria-nguyen-le\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/-MariaLe-blue?style=plastic-square\u0026logo=Linkedin\u0026logoColor=white\u0026link=https://www.linkedin.com/in/maria-nguyen-le/\" alt=\"License\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\u003cbr/\u003e\n\n\u003c!-- ABOUT THE PROJECT --\u003e\n\n## Introduction\n\nThe Ecommerce CMS is a tool developed to simplify the management of online stores. With its integrated API, connect and integrate your online store with this CMS. This allows for easy and convenient management of your store's data. To see an example implementation, you can refer to my other [project](https://github.com/mariangle/nextjs-ecommerce-store) which uses it's own unique API endpoints.\n\nHere are some of the key features:\n\n- [Manage multiple stores](#multiple-stores)\n- [Advanced product customization](#product-customization)\n- [Unique APIs endpoints](#unique-api-endpoints)\n- [API Filtering](#api-filtering)\n\n### Multiple stores\n\nCreate and manage multiple stores. Each store gets its unique store ID, making it simple to keep track of all your ventures.\n\n![STORES](https://github.com/mariangle/nextjs-ecommerce-cms/assets/124585244/ce698c16-9cb0-4a68-a323-8e79facf9a30)\n\n### Product Customization\n\nYou have the ability to customize your store by creating billboards, as well as improve your product offerings by creating different variants based on size, color, brand, storage, or condition. Additionally, this flexibility allows you to set different prices for each variant, enabling you to offer a diverse range of products that cater to various markets.\n\n![PRODUCTS](https://github.com/mariangle/nextjs-ecommerce-cms/assets/124585244/f7d9961c-43a2-44db-9530-9962bd44fdfb)\n\n![VARIANTS](https://github.com/mariangle/nextjs-ecommerce-cms/assets/124585244/4889cc3b-0406-4658-9247-dd0f1026cc10)\n\n### Unique API Endpoints\n\nWhen creating your store, you will be assigned a unique storeId, which grants you access to your own individual endpoint. You can retrieve lists of entities for each entity type, which can be dynamically rendered on your website. For instance, you can fetch categories and display them in your frontend store's navigation bar.\n\n\n![API LISTS](https://github.com/mariangle/nextjs-ecommerce-cms/assets/124585244/c534195e-822d-464a-baf4-959445b4c158)\n\n### API Filtering\n\nThe API allows you directly to filter when fetching data. This functionality allows you to filter products based on specific criteria or sort them by price.\n\nHere are some examples:\n\n   ```sh\n   /api/{store-id}/products/?isFeatured=true\n   ```\n\n   ```sh\n   /api/{store-id}/products/?q=macbook\n   ```\n\n   ```sh\n   /api/{store-url}/product-variants/?sorting=lowest\n   ```\n\n   ```sh\n   /api/{store-id}/product-variants/?brandId={brand-id}?colorId={color-id}\n   ```\n\n## Tech stack\n\n- [Next.js](https://nextjs.org/) - framework\n- [TypeScript](https://www.typescriptlang.org/) - language\n- [Tailwind](https://tailwindcss.comm) - CSS\n- [MySql](https://mysql.com) - database\n- [Clerk](https://clerk.com/) - auth\n- [Vercel](https://vercel.com/) - hosting\n\n## Usage\n\nTo fetch from the API, copy the URL from the settings page into a .env file for your front end store.\n\n![image](https://github.com/mariangle/nextjs-ecommerce-cms/assets/124585244/5908abcb-fdd3-423f-8a1c-da215244c4d5)\n\n\n\u003c!-- GETTING STARTED )--\u003e\n\n## Database Design\n\nWhile this project shares similarities with [my first ecommerce project](https://github.com/mariangle/ecommerce-app-ms-sql-net-react), it primarily distinguishes itself through its backend architecture. Focusing on the API and database as standalone components, this project represents a significant improvement in several areas.\n\n**Dynamic API Endpoint**\n\nThis project introduces a dynamic API endpoint that can be used for different stores. It offers flexibility and adaptability to cater to various store requirements.\n\n**Improved Data Organization**\n\nThe new project implements a well-structured database design, where the store table establishes a one-to-many relationship with all other tables. This allows for efficient retrieval of entity data specific to each store, improving data organization and accessibility.\n\n**Improved Modularity and Separation of Tables**\n\nUnlike the previous project, this new design focuses on modularization and separation of tables. It addresses previous challenges related to adding new features by improving the separation between tables. This separation improves the flexibility and scalability of the database.\n\n**Better Normalization**\n\nThe database in this project is properly normalized, addressing previous issues related to duplicate products and poorly organized data. This ensures that you don't create multiple products with the same descriptions and names, resulting in a more efficient and organized database structure.\n\n**Entity-based Approach**\n\nIn this project, entities such as brands are treated as separate entities. This allows for easier editing and management. Any changes made to an entity, such as correcting a typing error, will automatically update all products associated with that entity.\n\n\n![image](https://github.com/mariangle/nextjs-ecommerce-cms/assets/124585244/6877aaf5-e0c3-4720-8971-1a675aa6cdb8)\n\n\n## Installation\n\nTo get a local copy up and running, follow these steps.\n\n1. Clone the repository:\n\n   ```sh\n   git clone https://github.com/mariangle/nextjs-ecommerce-cms.git\n   ```\n\n2. Configure your environment variables in a .env file. Include the following variables:\n\n   ```sh\n   NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=\n   CLERK_SECRET_KEY=\n   NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in\n   NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up\n   NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/\n   NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/\n\n    This was inserted by `prisma init`:\n    Environment variables declared in this file are automatically made available to Prisma.\n    See the documentation for more detail: https://pris.ly/d/prisma-schema#accessing-environment-variables-from-the-schema\n    Prisma supports the native connection string format for PostgreSQL, MySQL, SQLite, SQL Server, MongoDB and CockroachDB.\n    See the documentation for all the connection string options: https://pris.ly/d/connection-strings\n    \n    DATABASE_URL=\n    NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=\n    STRIPE_API_KEY=\n    FRONTEND_STORE_URL=http://localhost:3001\n    STRIPE_WEBHOOK_SECRET=\n   ```\n\n3. Install the required npm packages:\n\n    ```sh\n    npm install\n    ````\n\n4. Set up the database:\n\n   ````sh\n   px prisma generate\n   npx prisma db push   ```\n\n   ````\n\n5. Start the development server:\n\n   ```sh\n   npm run dev\n   ```\n\n## License\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cb\u003eMIT License\u003c/b\u003e\u003c/summary\u003e\n\nPermission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the \"Software\"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.\n\n\u003c/details\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmariangle%2Fnextjs-ecommerce-cms","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmariangle%2Fnextjs-ecommerce-cms","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmariangle%2Fnextjs-ecommerce-cms/lists"}