{"id":18575598,"url":"https://github.com/jsiqbal/next-ecommerce","last_synced_at":"2025-06-20T12:14:09.254Z","repository":{"id":183002048,"uuid":"669451483","full_name":"JsIqbal/next-ecommerce","owner":"JsIqbal","description":"Admin Portal of E-commerce in Nextjs","archived":false,"fork":false,"pushed_at":"2023-08-08T17:10:31.000Z","size":194,"stargazers_count":6,"open_issues_count":2,"forks_count":2,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-24T18:49:33.796Z","etag":null,"topics":["axios","clerkauth","env","javascript","mysql","nextjs13","pagination","planetscale","prisma","prismadb","react-hook-form","react-hot-toast","shadcn-select","shadcn-ui","table-action","tablefilter","tailwindcss","typescript","zod","zustand"],"latest_commit_sha":null,"homepage":"","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/JsIqbal.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}},"created_at":"2023-07-22T10:19:57.000Z","updated_at":"2024-08-20T02:00:10.000Z","dependencies_parsed_at":"2023-07-22T11:44:14.200Z","dependency_job_id":null,"html_url":"https://github.com/JsIqbal/next-ecommerce","commit_stats":null,"previous_names":["jsiqbal/next-ecommerce"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JsIqbal%2Fnext-ecommerce","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JsIqbal%2Fnext-ecommerce/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JsIqbal%2Fnext-ecommerce/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JsIqbal%2Fnext-ecommerce/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/JsIqbal","download_url":"https://codeload.github.com/JsIqbal/next-ecommerce/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248185256,"owners_count":21061483,"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":["axios","clerkauth","env","javascript","mysql","nextjs13","pagination","planetscale","prisma","prismadb","react-hook-form","react-hot-toast","shadcn-select","shadcn-ui","table-action","tablefilter","tailwindcss","typescript","zod","zustand"],"created_at":"2024-11-06T23:20:29.961Z","updated_at":"2025-04-10T08:30:51.528Z","avatar_url":"https://github.com/JsIqbal.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Complete Documentation of this project!\n\n-   Step -1\n\n## create next app\n\n```bash\nnpx create-next-app@latest ecommerce-admin --typescript --tailwind --eslint\n```\n\ndo not use src\nuse app router\n\n```bash\n$ npx create-next-app@latest next-portfolio --typescript --tailwind --eslint\n√ Would you like to use `src/` directory? ... No / Yes = No\n√ Would you like to use App Router? (recommended) ... No / Yes = Yes\n√ Would you like to customize the default import alias? ... No / Yes = No\n```\n\nafter creating the app:\n\ncommand :\n\n```bash\nnpx shadcn-ui@latest init\n```\n\nconfiguration :\n\n```bash\n✔ Would you like to use TypeScript (recommended)? … no / yes\n✔ Which style would you like to use? › Default\n✔ Which color would you like to use as base color? › Slate\n✔ Where is your global CSS file? … app/globals.css\n✔ Would you like to use CSS variables for colors? … no / yes\n✔ Where is your tailwind.config.js located? … tailwind.config.js\n✔ Configure the import alias for components: … @/components\n✔ Configure the import alias for utils: … @/lib/utils\n✔ Are you using React Server Components? … no / yes\n✔ Write configuration to components.json. Proceed? … yes\n```\n\ncheck out shadcn ui components and how to add them.\n\nsign in to clerk documentation and add clerk to the project using this comand:\n\n```bash\nnpm install @clerk/nextjs\n```\n\nadd new file .env and paste the clerk authentification in there. make sure to gitignore the .env file\n\ncreate another file named middleware.ts and paste the middleware from the clerk documentation page\n\ncreate organization routes inside the app folder and the routing system will be :\n\n```vscode\napp/sign-up/[[...sign-up]]/page.tsx\n```\n\n---\n\n-   step -2\n\ncreate store:\n\nuse shadcn:\n\n```bash\nnpx shadcn-ui@latest add dialog\n```\n\nadd zustand for state management:\n\n```bash\nnpm install zustand\n```\n\n-   create the hooks/use-store-modal.tsx and configure the store for modal\n\n-   create providers folder in root to access any component or modal from anywhere the project\n\n-   create modal-provider.tsx and learn the logic about hydration and dyhydration\n\n-   learned : global reusable modal, uses global store\n\n---\n\n-   step -3\n\nForm, form validate:\n\nreact-hook-form and zod\n\nadd shadcn form:\n\n```bash\nnpx shadcn-ui@latest add form\n```\n\nadd shadcn input:\n\n```bash\nnpx shadcn-ui@latest add input\n```\n\n---\n\n-   step -4\n\ninstall prisma as a dev dependency\n\n```bash\nnpm i -D prisma\nnpm i @prisma/client\n```\n\ninitialize prisma:\n\n```bash\nnpx prisma init\n```\n\ncreate lib for prisma db\n\n-   setup planetscale\n\n-   sign in to planetscale\n\n-   create a database\n\n-   wait for initialization\n\n-   click connect to your database:\n\n-   connect to prisma\n\n-   copy the .env file\n\n-   paste it in database url\n\n-   copy the shema.prisma from the planetscale\n\n-   paste it in schema.prisma\n\n-   configure the schema.prisma and create models\n\n-   generate the prisma models:\n\n```bash\nnpx prisma generate\n```\n\nwe can do crud operation with prisma\n\ncheck if we successfully set up our database string:\n\n```bash\nnpx prisma db push\n```\n\ntroubleshoot:\ncheck .env = DATABASE_URL\n\ncreate api route\n\ninstall axios and use it in store-modal\n\nfor troubleshooting more : generate new configuration in planetscale and reconfigure the .env url and schema.config. afterwards run this commands:\n\n```bash\nnpx prisma generate\nnpx prisma db push\n```\n\n---\n\n-   step -5\n\nWe will create Dashboard organization and create a layout for it\n\nconfigure in root organization as well\n\n### most important\n\n-   Tutorial link : to uderstand the project flow\n\n```link\nhttps://youtu.be/5miHyP6lExg?t=6939\n```\n\ndelete the prisma database records:\n\n```bash\nnpx prisma migrate reset\n\nnpx prisma generate\n\nnpx prisma db push\n```\n\nrehydrations again.\n\nredirect to dashboard after creating a store\n\n---\n\n-   step -6 : Admin Navigation\n\nCreate navbar component for admin dashboard. this will be a part of the dashboard layout.\n\nnavigation implementation [ComboBox] from shadcn:\n\n```bash\nnpx shadcn-ui@latest add popover\n\nnpx shadcn-ui@latest add command\n```\n\nrevise type and interface\nrevise about 'use client'\n\nnavbar store switcher find store functionality :\n\nTutorial Link to understand:\n\n```link\nhttps://youtu.be/5miHyP6lExg?t=8597\n```\n\nfeel the power of zustand store management and see how the modal is triggered from the navigation + Create Store Button\n\n---\n\n-   Step - 7 : part 1: Add the update settings for store\n\ncreate settings folder inside dashboard organization and create a page for settings\n\n-   We always have the params in our server components \\*\n\nUnderstanding the flow inside settings-form.tsx:\n\n```link\nhttps://youtu.be/5miHyP6lExg?t=10717\n```\n\n---\n\n-   Step - 6 : part 2:\n\nTo handle the settings form.\n\nwe will create a dynamic route for the settings: link [storeId]\nwe will create a route.ts file and then create 2 routes : path route for update button and delete route for delete store\ncomplete the update or PATCH function for the store settings\n\n---\n\n-   Step - 6 : part 3:\n\nTo handle the settings form.\n\nwe will create a dynamic route for the settings: link [storeId]\nwe will create a route.ts file and then create 2 routes : path route for update button and delete route for delete store\ncomplete the delete function for the store settings\n\n---\n\n-   Step - 6 : part 4:\n\nAlert message in the settings page.\n\ninstall alert:\n\n```bash\nnpx shadcn-ui@latest add alert\n```\n\ncreate another component in ui named: api-alert.tsx\n\nsee the file for more information\n\ninstall badge for the api-alert.tsx :\n\n```bash\nnpx shadcn-ui@latest add badge\n```\n\nwhat is window object in client side? check out the use-origin.tsx in hooks folder\n\nEvery single form is going to have this component\n\nComplete the Alert UI component and complete integration with Settings page\n\n-   step -7 part-1:\n\nCreate second entity in prisma for Bilboards.\n\nreference :\n\n```link\nhttps://youtu.be/5miHyP6lExg?list=LL\u0026t=13002\n```\n\nshut down application and\n\n```bash\nnpx prisma generate\nnpx prisma db push\n```\n\ncreate billboard folder, billboard components inside root\n\n-   step -7 part-2:\n\nCreate and setup cloudinary in the project\n\nlogin to cloudinary and go to dashboard.\n\ninstall next cloudinary package in the project:\n\n```link\nhttps://next-cloudinary.spacejelly.dev/\n```\n\nfollow the installation guide\n\n```bash\nnpm install next-cloudinary\n```\n\nin [.env] :\n\n-   NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=\"\u003cYour Cloud Name\u003e\"\n-   get the cloud name from coudinary dashboard\n-   go to settings \u003e upload \u003e Add upload preset \u003e sigining mode = unsigned\n-   copy the preset name\n-   complete image upload component\n\n---\n\n-   step -8: Data Table\n\nUse Shadcn UI table : npx shadcn-ui@latest add table\ntable dependency: npm install @tanstack/react-table\nin order to convert date to string: npm i date-fns\n\nModify table for : pagination, filtering, cellActions\n\n-   step -9: category entity\n    -   create Generator Model\n\n```bash\nnpx prisma genrate\nnpm prisma db push\n```\n\nreference:\n\n```link\nhttps://youtu.be/5miHyP6lExg?list=LL\u0026t=19295\n```\n\ncopy the entire billboard folder inside dashboard and modify it for categories.\n\ninstall select component for category selection:\n\n```bash\nnpx shadcn-ui@latest add select\n```\n\ncomplete category API and category controller from the billboard copy:\n\n```code\napp \u003e api \u003e [storeId] \u003e billboards -- billboards copy = categories\n```\n\n---\n### Munab Documentation: \n\n- Changed nothing\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjsiqbal%2Fnext-ecommerce","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjsiqbal%2Fnext-ecommerce","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjsiqbal%2Fnext-ecommerce/lists"}