Next.js Dashboard App

Project Evolution: From React Router to Next.js

This project originally started out as a React Router dashboard app back in the summer of 2025. I decided to touch it up and port it over to Next.js so I can learn how to implement user authentication, server-side logic, and modern database management.

The transition from a pure CSR approach to the Next.js App Router architecture allowed me to move sensitive logic-like password hashing and database orchestration to the server. By using Server Actions and Prisma ORM, I eliminated the need for a separate backend API, significantly reducing architectural complexity while increasing security.

🧱 Tech Stack

• Framework: Next.js (App Router, Server Actions)
• Database & ORM: PostgreSQL & Prisma ORM
• Language: TypeScript
• Styling: Tailwind CSS with Tailwind Variants
• UI Components: Shadcn/UI & Coss UI
• Animations: Motion (Framer Motion)
• Linting & Formatting: ESLint & Prettier

🤓 What I learned:

Database Orchestration and ORM

• Configuring and deploying a PostgreSQL database using Docker containers.
• Implementing Prisma ORM to establishing a type-safe connection between the Next.js backend and the database.
• Designing a relational schema to handle structured data for users and support tickets.

User Authentication and Data Persistence

• Building secure registration and login systems utilizing Next.js Server Actions and form handling.
• Implementing data validation patterns.
• Creating forms for ticket submission, mapping client-side input to relational database models.

React

• useMemo to optimize expensive calculations and prevent unnecessary re-renders.
• useOptimistic to enhance user experience by providing immediate UI feedback during server-side operations, specifically for ticket message sending.
• Maintaining strict separation of concerns between Client and Server components.
• Implementing error handling states.

And much more!

📦 How do I try it out?

1. Clone the repository:

   git clone https://github.com/zoljs/next-dashboard.git
   cd next-dashboard

2. Install dependencies:

   bun install

3. Initialize Prisma:

   bunx prisma init

4. Setup Environment Variables: Open the created .env file and set your connection string:

   DATABASE_URL="postgresql://user:password@localhost:5432/dashboard_db"

5. Sync Database Schema:

   Generate the client and push the schema to your PostgreSQL instance:
   bunx prisma generate
   bunx prisma db push

6. Seed the Database:

   Since the default seed command either works on my pc or laptop and never on both, just run the seed script directly:
   bun prisma/seed.ts

7. Start the development server:

   bun run dev

📜 License

This project is MIT licensed.