Build Dashboard App By Next.js 15, Drizzle ORM and Shadcn
|
|
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, ... |
Watch Video Tutorial
View Demo Website
https://next-15-admin-dashboard.vercel.app
What you will learn
- 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.
Run Locally
-
Clone repo
$ git clone git@github.com: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
-
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 "user@nextmail.com" and password "123456" and click Sign In
Lessons
- 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
Contact Developer
Email: basir.jafarzadeh@gmail.com