Skip to content

Latest commit

 

History

History
454 lines (77 loc) · 6.46 KB

Howto.md

File metadata and controls

454 lines (77 loc) · 6.46 KB

ecommerce-admin

This project is for learning next js and is based on Code with Antonio tutorial

I will "try" to document each setup for creating this project here 😊 😅

Project Setup

Using shadcn , best Next.js 13 UI Library to initialize Next JS project

npx create-next-app@latest ecommerce-admin --typescript --tailwind --eslint

Also, using Route Groups.

You can use (foldername) to create a folder. This allows you to organize your route segments and project files into logical groups without affecting the URL path structure.

Get code in this branch : evn-setup

Authentication

Using Clerk form authentication https://clerk.com/

Allows both configurations for App router and Pages 🥳

👉 Get started with Next.js

👉 Build your Sign-up and Sign-in pages ( how easy is that? )

You can find the pages on /app/(auth)/(routes)/

*** Notice how route groups are used to organized the folders

Get code in this branch : clerk-auth

Modal component

Create a global modal where users can add store for their e-commerce.

Using Dialog component from shadcn/ui to create a custom Modal

Using zustand for global state management

Get code in this branch : modal-component

Form Component

Add a form to create store.

Building forms with react-hook-form and zod

Get code in this branch : form-components

Prisma, PlanetScale, MySQL setup

Add Prisma, a Next-generation Node.js and TypeScript ORM.

npm i prisma

npm i @prisma/client

This creates a Prisma schema at prisma/schema.prisma

Also adds DATABASE_URL in our env without changing previous env variables

Next, created prisma client at lib/prismadb.ts

*** Notice how client is created in such a way that we don't initialize bunch of primsa instances causing warnings and performace issues.

Next, setup PlanetScale, the world’s most advanced serverless MySQL platform

Create a new database

Connect to database -> Connect with Prisma

Add DATABASE_URL

Modify provider according to connection string in PlanetScale

Create a model Store

Run npx prisma generate

This doesn't send anything to database but node_module/@prisma/client gets updated

It adds our model to prisma so that we can safely use it in our code

Run npx prisma db push

Syncs database with Prisma schema. If you check PlanetScale, you should see tables has been created.

Create api route

Create new folder for your api inside app/api

e.g. app/api/stores

To use this api, install axios

The endpoint for api is /api/stores

*** api is a reserved folder

Install react-hot-toast to show toast messages, (The best toast in town)

Create prodiver toast-provider.tsx and add it in Layout.tsx

Get code in this branch : prisma-mysql-setup

Dashboard setup

Create route for dashboard with storeId ( app/(dashboard)/\[storeId\] )

Few things done here:

  • Check if the user is authenticated or not

  • Check if the store exist or not

  • After creating store, redirect to dashboard with newly created store id

Resetting the database

To reset the database, npx prisma migrate reset

This is going to delete your entire database

Run npx prisma generate and npx prisma db push like we did previously

Get code in this branch : dashboard-setup

Navbar

Create navigation bar For now, just create a Settings route to the navbar and UserButton from Clerk

Store switcher on navbar

Next install Popover and Command from shadcn ui since we are not going to use ComboBox

store-switcher.tsx

Few things done here:

  • Show popover list for existing store, select store
  • Handle store modal created in previous branch
  • Create store option

Get code in this branch : navigation-bar

...TO BE CONTINUED