Fullstack Client Request Dashboard

A fullstack client request management dashboard built with Next.js, TypeScript, Tailwind CSS, Prisma, PostgreSQL, Zod, Sonner, and Recharts.

The app allows public users to submit project requests, while an authenticated admin can view, search, filter, update, delete, and analyze submissions from a protected dashboard.

Live Demo

Add your deployed link here:

https://full-stack-dashboard-gilt.vercel.app/

Screenshots

Will add screenshots here after deployment:

Features

Public Features

• Public homepage
• Client project request form
• Form fields for name, email, request type, budget, title, and project details
• Frontend validation with Zod
• Backend validation with Zod
• Toast notifications for success and error feedback
• Clean loading state on form submission

Admin Features

• Admin registration for first admin account

• Admin login

• HTTP-only cookie authentication

• Protected dashboard route

• Auth-aware navbar

• Logout functionality

• View all project submissions

• Search submissions by title, message, name, email, request type, budget, and status

• Filter submissions by status

• Update submission status

• Delete submissions with custom confirmation modal

• Pagination with rows-per-page control

• Dashboard summary cards

• Recharts analytics for:

  • Status breakdown
  • Request type breakdown
  • Submissions over time

Tech Stack

• Next.js App Router
• React
• TypeScript
• Tailwind CSS
• Prisma ORM
• PostgreSQL
• Supabase PostgreSQL
• Zod
• Sonner
• Recharts
• bcryptjs
• jose
• Vercel

Project Structure

fullstack-dashboard/
├── app/
│   ├── api/
│   │   ├── auth/
│   │   │   ├── login/
│   │   │   ├── logout/
│   │   │   ├── me/
│   │   │   └── register/
│   │   └── submissions/
│   ├── dashboard/
│   ├── login/
│   ├── register/
│   ├── submit/
│   ├── globals.css
│   ├── layout.tsx
│   └── page.tsx
│
├── components/
│   ├── auth/
│   ├── dashboard/
│   └── forms/
│
├── lib/
│   ├── validations/
│   ├── auth.ts
│   ├── current-user.ts
│   └── prisma.ts
│
├── prisma/
│   └── schema.prisma
│
├── middleware.ts
├── package.json
└── README.md

Database Models

The app uses two main models:

model User {
  id       Int    @id @default(autoincrement())
  name     String
  email    String @unique
  password String
  role     String @default("client")
}

model Submission {
  id          Int      @id @default(autoincrement())
  name        String
  email       String
  requestType String
  budget      String?
  title       String
  message     String
  status      String   @default("pending")
  createdAt   DateTime @default(now())
}

Environment Variables

Create a .env file in the root of your project:

DATABASE_URL="your-postgresql-connection-string"
AUTH_SECRET="your-long-random-auth-secret"

Example for local PostgreSQL:

DATABASE_URL="postgresql://demo_user:demo_password@localhost:5432/demo_dashboard?schema=public"
AUTH_SECRET="your-long-random-auth-secret"

Example for Supabase:

DATABASE_URL="postgresql://postgres.projectref:password@aws-0-region.pooler.supabase.com:5432/postgres?schema=public"
AUTH_SECRET="your-long-random-auth-secret"

Do not commit .env to GitHub.

Installation

Clone the repository:

git clone https://github.com/your-username/fullstack-dashboard.git

Move into the project folder:

cd fullstack-dashboard

Install dependencies:

npm install

Generate Prisma client:

npx prisma generate

Push the database schema during development:

npx prisma db push

Run the development server:

npm run dev

Open the app:

http://localhost:3000

Authentication Flow

The app uses custom authentication.

• Passwords are hashed with bcryptjs
• JWT tokens are created with jose
• Auth token is stored in an HTTP-only cookie
• /dashboard is protected with middleware
• Admin-only API actions are protected on the backend

The first admin can be created from:

/register

After the first admin is created, the backend blocks additional admin registrations.

API Routes

Public Route

POST /api/submissions

Allows public users to submit project requests.

Protected Admin Routes

GET /api/submissions
PATCH /api/submissions
DELETE /api/submissions

These require an authenticated admin.

Auth Routes

POST /api/auth/register
POST /api/auth/login
POST /api/auth/logout
GET /api/auth/me

Dashboard Features

The dashboard includes:

• Total submissions card
• Pending submissions card
• In-progress submissions card
• Completed submissions card
• Status breakdown chart
• Request type breakdown chart
• Submissions over time chart
• Search bar
• Status filters
• Pagination
• Status update buttons
• Delete confirmation modal

Validation

The app uses a shared Zod schema for frontend and backend validation.

Validation covers:

• Full name
• Email address
• Request type
• Project title
• Project details
• Optional budget field

This prevents invalid data from entering the database, even if frontend validation is bypassed.

Deployment

The app can be deployed on Vercel.

Before deploying:

1. Push your code to GitHub.
2. Create a hosted PostgreSQL database using Supabase, Neon, Railway, or another provider.
3. Add the production DATABASE_URL to Vercel environment variables.
4. Add AUTH_SECRET to Vercel environment variables.
5. Make sure the build script includes Prisma generation.

Recommended build script:

"build": "prisma generate && next build"

After deployment, create the first admin account from:

https://your-domain.com/register

Then login from:

https://your-domain.com/login

What I Learned

This project demonstrates practical fullstack development skills, including:

• Building fullstack features with Next.js App Router
• Creating API route handlers
• Connecting a Next.js app to PostgreSQL through Prisma
• Managing database models and schema updates
• Handling authentication with cookies and JWT
• Protecting admin routes
• Validating data on both frontend and backend
• Building reusable form components
• Creating dashboards with search, filters, pagination, and charts
• Preparing a project for deployment

Future Improvements

Possible improvements include:

• Add email notifications for new submissions
• Add admin profile settings
• Add password reset flow
• Add role-based team members
• Add server-side pagination for large datasets
• Add export to CSV
• Add dark mode
• Add dashboard activity logs
• Add file upload for project briefs
• Add better register flow after first admin exists

Author

Built by Tobyemerald as a fullstack portfolio project.

GitHub:

https://github.com/tobyemerald

Portfolio:

https://tobys-port.vercel.app/

License

This project is open-source and available under the MIT License.