This was inserted by `prisma init`:

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_cHJvcGVyLWpheS04Ni5jbGVyay5hY2NvdW50cy5kZXYk CLERK_SECRET_KEY=sk_test_VIVCzvWq0PpgqLrhWYSBeiYU1f0B8eRdSltTogYX3K NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/ NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/

NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME="dn8driyop"

This was inserted by `prisma init`:

Environment variables declared in this file are automatically made available to Prisma.

See the documentation for more detail: https://pris.ly/d/prisma-schema#accessing-environment-variables-from-the-schema

Prisma supports the native connection string format for PostgreSQL, MySQL, SQLite, SQL Server, MongoDB and CockroachDB.

See the documentation for all the connection string options: https://pris.ly/d/connection-strings

This is a Next.js project bootstrapped with create-next-app.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Inter, a custom Google Font.

Learn More

To learn more about Next.js, take a look at the following resources:

Next.js Documentation - learn about Next.js features and API.
Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

Package Installation

First Step: npx create-next-app@latest my-app --typescript --tailwind --eslint

Second Step: npx shadcn-ui@latest init

Third Step: npx shadcn-ui@latest add button

Fourth Step: npm install @clerk/nextjs

Now Follow this link for authetication

https://clerk.com/docs/nextjs/get-started-with-nextjs

wrap entire laout jsx into Like this:

<ClerkProvider>
    <html lang="en">
      <body className={inter.className}>{children}</body>
    </html>
</ClerkProvider>

Add middleware from clerk docs site

and copy middleware code and paste it on middleware page

Craete auth folder to app folder

Like: (auth) => routes => sign-up => [[ ...sign-up ]] => page.tsx

cope code from clerk docs to page.tsx page.

Do it for sign in also

Like: (auth) => routes => sign-in => [[ ...sign-in ]] => page.tsx

cope code from clerk docs to page.tsx page.

Update your environment variables

Next, add environment variables for the signIn , signUp and afterSignUp , afterSignIn paths:

==> Now your sign in and sign up authentication is ready, If you want to make it center create a layout page for all group page like: (routes) => layout.tsx it will cover all pages under routes folder. Now you can control your all page layout. Like this

export default function AuthLayout({ children }:{ children: React.ReactNode }) { return(

{children}

) }

Now try to login or sign up

after sign in by google or your email it will redirect you to root folder page.tsx. It's your admin main page.

Add userbutton in after login dahsboard on your root pag, Like:

    <UserButton afterSignOutUrl="/"/>

Now create Modal for adding store on dashboard

Step 1: npx shadcn-ui@latest add dialog for adding dialog popup.

Now create your Modal in Components => ui folder;

Now go to your root page and this Modal here.

Use zustand for global state management => npm install zustand

After Installaing Create a folder name hooks and then create a file name use-store-modal.tsx

Now work on this page.

After completing this page craete a folder namee modals in components folder and the create a file name store-modal.tsx

after completinf this page create a folder in main folder name providers then create file name modal-provider.tsx

After completing this page import modal provider in app layout.tsx page.

Now add Modal by import modal to the root page.tsx page.

Now add form from shadcn by using this command::: npx shadcn-ui@latest add form

Now add input from shadcn by using this command::: npx shadcn-ui@latest add input

Now create form schema on store-modal.tsx page

Now when you work on this page please make sure you have this packe installed in package.json => @hookform/resolvers and react-hook-form dependencies.

after completing the dynamic form then Install prisma to sent data to db

Install Prisma Dev dependencies: npm i -D prisma

Install Prisma Dev dependencies: npm install @prisma/client

Now initialize prisma by this command: npm prisma init

Now create a prisma page in lib folder.

After complete prisma then create a account on planetscale website: https://planetscale.com

create Databasae there and add prisma connect in env file.

Now Add this code from planetscale to prisma.schema page provider = "mysql" url = env("DATABASE_URL") relationMode = "prisma"

Now create data table on db at prisma.schema page, Like:

model Store{ id String @id @default(uuid()) name String userId String createdAt DateTime @default(now()) updatedAt DateTime @updatedAt }

Now generate command for generate them on planet scale: npx prisma generate

Check npw db string si successfully connecctedd or not by this command: npx prisma db push

NB: If you get any error please check your database url on env file.

It's time to call PAI route to send date to the databse. Go to App folder create a folder name api => create another folder name stores => create a file name route.ts.

after completing this page go to component folder to store modal page now create state for manage user request handle.Like: const [loading, setLoading] = useState(false)

after apply it on button and input Now install a package for axios

Install axios: npm i axios

Now complete onSubmit () on store modal page.

after completing this

Install toast package : npm i react-hot-toast

Now create a toast provider page on prividers folder

after complete this page

Now add toaster in app layout page.

now you can add toat message

Now add toast to the store-modal page

It's time to create your Dashboard.

create a folder name (dashboard) on app folder, Now create another folder name [storeId] it's a convention of NEXT 13, it will automatically take store id. Now create a layout.tsx for layout of all store.

After completing layout page Nopw craete

(routes) folder to storeId folder then create page.tsx

Nopw write the basic code of page.tsx page.

Now create authenticated layout for root folder name layout.tsx

Now create (routes) folder on root folder then move page.tsx to the routes folder.

After completing them, Now: Reset your prisma mysql database: npx prisma migrate reset

Again command: npx prisma generate

Again command: npx prisma db push

Now go to componennts => Modal =>Store modal fix this :

window.location.assign(/${response.data.id});

Now go to dashboard page to Check active store name by passing props

It's time to work with navigation:

Go to dashboard layout for creating navbar.

create navbar on components in folder below ui now create navbar.tsx page.

after basic header is complete let's create a MainNav route on components.

create MainNav on components in folder below ui now create main-nav.tsx page.

Now create a store switcher as a combo box by this command: npx shadcn-ui@latest add popover and this: npx shadcn-ui@latest add command

Now create store switcher in component store-switcher.tsx

after completing switcher page now create

Create a folder name settings in dashboard routes folder name page.tsx

Now create a folder to the settings folder name components and then create a file name settings-from.tsx

Let's Create heading.tsx page in components ui folder.

now Run this command: npx shadcn-ui@latest add separator

Go to settings-from.tsx this page, make form schema funciton

Create [storeId] folder in API => stores folder. Now create route.ts for indivisual id.

Create 2 routes first one is patch for update the store. Second id delete for delete store.

After completing this, Now go to settings-form page for update the actual delete and update operation

now create a alert-modal.tsx in components => modals folder.

add this on settings form page as a component

After this add onDelete method to perform delete operation on settings form page.

After Alert Modal is done

Command for alert: npx shadcn-ui@latest add alert

now create a page api-alert.tsx to the components => ui folder

Command for alert: npx shadcn-ui@latest add badge

create a hooks in hooks folder name use-origin.tsx

After completing this craete billboard db table in prisma.schema file

After adding billboard schema now command: npx prisma generate after that another command: npx prisma db push

Now create a folder name biilboards in dahsboard => storeId => routes folder

Now create a page.tsx here. After basic file structure is ready

create folder name components in billboards folder then create a file name client.tsx

Now create a [billboardsId] in billboards folder name page.tsx.

This structure means it's a server components const BillboardPage = async ({ params }: { params: {billboardId: string} }) =>

Now create a components folder in billboardId folder and then copy settings-from page to here

and change name to billboard-form.tsx

Create a account on cloudinary.com

create a imageUpload file in components -> ui folder

Add this package : npm install next-cloudinary

add this on env file => NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=""

Go to cloudinary settings click upload => click add upload preset and make sign in mode => usigned.

Copy the preset name and paste it on impage-upload page uploadPreset here

After billboad-from complete if you get error on upload image

add this on next.config.js

images: { domains: ["res.cloudinary.com"] }

Now create a folder a name [storeId] in api then create another folder billboards in [storeID] folder then a create a file name route.ts

After completing api

Create a bill board routes folder name [billboardId] in api => [storeId] => billboards folder

and copy the storeId => route file and paste on billboardId route file.

after completing billboard routes go to = >

Go to billboards => page.tsx

After getting all billboard number and showed it on billboard title;

Use command: npx shadcn-ui@latest add table and this dependency for this command: npm install @tanstack/react-table

now create page on billboards => components name column.tsx and copy column.tsx file form this link: https://ui.shadcn.com/docs/components/data-table

Now make column.tsx as your need

Work on BillboardClient page and install a package: npm i date-fns

now create page on components => ui => name data-table.tsx and copy column.tsx file form this link: https://ui.shadcn.com/docs/components/data-table

Now add this page on BillboardClient page.

Command: npx shadcn-ui@latest add dropdown-menu

create a page on components => ui => name: api-list.tsx

after completing api then go to prisma.schema and add categoris also make relation with billboard and store with this categories.

Then run this command: npx prisma db push

Now copy full billboard folder on dashboard => routes rename it with categories

Now rename billboard page to CategoriesPage and change other Also do it on API folder to create categories api

Now Add size schema on prisma file:

Then run this command: npx prisma generate and npx prisma db push

Now copy full billboard folder on dashboard => routes rename it with sizes

Now rename billboard page to SizesPage and change other Also do it on API folder to create sizes api

Now Add color schema on prisma file:

Then run this command: npx prisma generate and npx prisma db push

Now copy full sizes folder on dashboard => routes rename it with colors

Now rename sizes page to ColorsPage and change other Also do it on API folder to create colors api

Now Add products and image schema on prisma file:

Then run this command: npx prisma generate and npx prisma db push

Now copy full sizes folder on dashboard => routes rename it with products

Now rename products page to ProductsPage and change other Also do it on API folder to create products api

Run this command: npx shadcn-ui@latest add checkbox

Now Add order and orderitem schema on prisma file:

Then run this command: npx prisma generate and npx prisma db push

Now copy full sizes folder on dashboard => routes rename it with orders

Now rename sizes page to OrdersPage and and delete cell-action and [sizeid] no need it and also no need to add api.

Name		Name	Last commit message	Last commit date
Latest commit History 31 Commits
.github/workflows		.github/workflows
actions		actions
app		app
components		components
hooks		hooks
lib		lib
prisma		prisma
providers		providers
public		public
.eslintrc.json		.eslintrc.json
.gitignore		.gitignore
README.md		README.md
components.json		components.json
middleware.ts		middleware.ts
next.config.js		next.config.js
package-lock.json		package-lock.json
package.json		package.json
postcss.config.js		postcss.config.js
tailwind.config.js		tailwind.config.js
tsconfig.json		tsconfig.json

Folders and files

Latest commit

History

Repository files navigation

This was inserted by prisma init:

Environment variables declared in this file are automatically made available to Prisma.

See the documentation for more detail: https://pris.ly/d/prisma-schema#accessing-environment-variables-from-the-schema

Prisma supports the native connection string format for PostgreSQL, MySQL, SQLite, SQL Server, MongoDB and CockroachDB.

See the documentation for all the connection string options: https://pris.ly/d/connection-strings

Getting Started

Learn More

Deploy on Vercel

Package Installation

Now Follow this link for authetication

wrap entire laout jsx into Like this:

Add middleware from clerk docs site

Craete auth folder to app folder

Update your environment variables

Now try to login or sign up

Add userbutton in after login dahsboard on your root pag, Like:

Now create Modal for adding store on dashboard

Now create your Modal in Components => ui folder;

Now go to your root page and this Modal here.

Use zustand for global state management => npm install zustand

After Installaing Create a folder name hooks and then create a file name use-store-modal.tsx

After completing this page craete a folder namee modals in components folder and the create a file name store-modal.tsx

after completinf this page create a folder in main folder name providers then create file name modal-provider.tsx

After completing this page import modal provider in app layout.tsx page.

Now add Modal by import modal to the root page.tsx page.

Now add form from shadcn by using this command::: npx shadcn-ui@latest add form

Now add input from shadcn by using this command::: npx shadcn-ui@latest add input

Now create form schema on store-modal.tsx page

Install Prisma Dev dependencies: npm i -D prisma

Install Prisma Dev dependencies: npm install @prisma/client

Now initialize prisma by this command: npm prisma init

Now create a prisma page in lib folder.

After complete prisma then create a account on planetscale website: https://planetscale.com

Now create data table on db at prisma.schema page, Like:

Now generate command for generate them on planet scale: npx prisma generate

Check npw db string si successfully connecctedd or not by this command: npx prisma db push

It's time to call PAI route to send date to the databse. Go to App folder create a folder name api => create another folder name stores => create a file name route.ts.

Install axios: npm i axios

Now complete onSubmit () on store modal page.

Install toast package : npm i react-hot-toast

Now create a toast provider page on prividers folder

Now add toaster in app layout page.

Now add toast to the store-modal page

It's time to create your Dashboard.

(routes) folder to storeId folder then create page.tsx

Now create authenticated layout for root folder name layout.tsx

After completing them, Now: Reset your prisma mysql database: npx prisma migrate reset

Again command: npx prisma generate

Again command: npx prisma db push

Now go to componennts => Modal =>Store modal fix this :

Now go to dashboard page to Check active store name by passing props

It's time to work with navigation:

create navbar on components in folder below ui now create navbar.tsx page.

create MainNav on components in folder below ui now create main-nav.tsx page.

Now create a store switcher as a combo box by this command: npx shadcn-ui@latest add popover and this: npx shadcn-ui@latest add command

Now create store switcher in component store-switcher.tsx

Create a folder name settings in dashboard routes folder name page.tsx

Now create a folder to the settings folder name components and then create a file name settings-from.tsx

Let's Create heading.tsx page in components ui folder.

now Run this command: npx shadcn-ui@latest add separator

Go to settings-from.tsx this page, make form schema funciton

Create [storeId] folder in API => stores folder. Now create route.ts for indivisual id.

now create a alert-modal.tsx in components => modals folder.

Command for alert: npx shadcn-ui@latest add alert

now create a page api-alert.tsx to the components => ui folder

Command for alert: npx shadcn-ui@latest add badge

create a hooks in hooks folder name use-origin.tsx

After completing this craete billboard db table in prisma.schema file

After adding billboard schema now command: npx prisma generate after that another command: npx prisma db push

Now create a folder name biilboards in dahsboard => storeId => routes folder

create folder name components in billboards folder then create a file name client.tsx

Now create a [billboardsId] in billboards folder name page.tsx.

Now create a components folder in billboardId folder and then copy settings-from page to here

Create a account on cloudinary.com

create a imageUpload file in components -> ui folder

Add this package : npm install next-cloudinary

This was inserted by `prisma init`:

Packages