| Tech | Next.js 15, React 19, PostgreSQL, Drizzle Orm, Shadcn, Tailwind |
| UI | Tailwind, Shadcn, recharts |
| Database | PostgreSQL, Drizzle Orm |
| Deployment | Github, Vercel |
| Authentication | Auth.js |
| Others | zod , next-theme, ... |
https://next-15-admin-dashboard.vercel.app
- creating admin dashboard web app by next.js 15 and react 19
- designing header, footer, sidebar, menu and search box by shadcn and tailwind
- enable partial pre-rendering to improve website performance
- create database models by drizzle orm and postgres database to handle invoices, customers and users.
- handling form inputs by useActionState and Zod data validator
- updating data by server actions without using any api
- rendering beautiful charts by recharts
- handling authentication and authorization by next-auth
- and toggling dark and light theme by next-theme
- at the end you'll learn how to deploy admin dashboard on vercel.
-
Clone repo
$ git clone [email protected]:basir/next-pg-shadcn-ecommerce.git $ cd next-pg-shadcn-ecommerce
-
Create .env.local File
- duplicate .env.example and rename it to .env.local
-
Setup PostgreSQL
- Create database at https://vercel.com/docs/storage/vercel-postgres
- In .env.local file update POSTGRES_URL to db url
-
Install and Run
npm install npm run dev
-
Seed Data
npx tsx ./db/seed
-
Admin Login
- Open http://localhost:3000
- Click Login button
- Enter admin email "[email protected]" and password "123456" and click Sign In
- create home page
- create login page
- create dashboard page
- connect to database by drizzle orm
- load stats boxes data from database
- display revenue chart
- create latest invoices table
- authenticate user from database
- list or delete invoices
- create or update invoices
- list customers
- enable partial pre-rendering
- deploy app on vercel
Email: [email protected]