Build Your Own Admin Panel

A complete prompt to build an internal admin dashboard with data tables, CRUD operations, and user management.

Time: 1-2 hours
Stack: Next.js + Prisma + Tailwind
Vibe Score: 9/10
This is a great vibe coding project! Internal admin panels are the sweet spot for AI-assisted development. Your users (employees) will tolerate some rough edges, and the scope is well-defined.

The Prompt

Copy this entire prompt into Cursor, Claude, or your AI tool of choice:

Build me an internal admin panel with the following specifications:

## Tech Stack
- Next.js 14 with App Router
- Prisma with SQLite (easy to swap to Postgres later)
- Tailwind CSS for styling
- shadcn/ui components

## Core Features

### 1. Dashboard Home
- Summary cards showing key metrics (total users, recent activity, etc.)
- Quick actions section
- Recent activity feed

### 2. Data Table Component
- Sortable columns
- Search/filter functionality
- Pagination
- Row actions (edit, delete, view)
- Bulk selection and actions
- Export to CSV

### 3. CRUD Operations
- Create new records with form validation
- Edit existing records in a modal or side panel
- Delete with confirmation
- View record details

### 4. Example Entity: Users
- Fields: id, name, email, role, status, createdAt, updatedAt
- Roles: admin, manager, user
- Status: active, inactive, pending

### 5. Authentication
- Simple email/password login
- Protected routes
- Session management
- Logout functionality

### 6. UI Requirements
- Clean, minimal design
- Responsive (works on tablet)
- Loading states
- Error handling with toast notifications
- Dark mode support (optional)

## File Structure
```
/app
  /api
    /users
      route.ts (GET, POST)
      [id]/route.ts (GET, PUT, DELETE)
    /auth
      route.ts
  /(dashboard)
    /layout.tsx
    /page.tsx (dashboard home)
    /users
      /page.tsx (user list)
      /[id]/page.tsx (user detail)
      /new/page.tsx (create user)
  /login
    /page.tsx
/components
  /ui (shadcn components)
  /data-table.tsx
  /sidebar.tsx
  /header.tsx
/lib
  /prisma.ts
  /auth.ts
/prisma
  /schema.prisma
```

## Database Schema
```prisma
model User {
  id        String   @id @default(cuid())
  email     String   @unique
  name      String
  password  String
  role      String   @default("user")
  status    String   @default("active")
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
}
```

## Additional Requirements
- Use React Hook Form for form handling
- Use Zod for validation
- Include seed script to populate sample data
- Add proper TypeScript types throughout
- Include a README with setup instructions

Please generate all the files needed to get this running. Start with the core files first, then I'll ask for additional features.

Follow-Up Prompts

After the initial build, use these prompts to add features:

Add More Entities

Add a new entity called "Orders" with:
- Fields: id, userId, amount, status (pending/completed/cancelled), items (JSON), createdAt
- Full CRUD like the Users table
- Relationship to User (belongs to)
- Filter by status on the list page

Add Bulk Actions

Add bulk actions to the data table:
- Select multiple rows with checkboxes
- Bulk delete selected
- Bulk update status (e.g., activate/deactivate users)
- Show count of selected items
- Confirmation modal before bulk actions

Add Activity Logging

Add an activity log that tracks:
- Who made changes (user ID)
- What changed (entity, field, old value, new value)
- When it happened
- Display in a timeline format on the dashboard
- Filter by entity type and user

Add Role-Based Access

Implement role-based access control:
- Admin: full access to everything
- Manager: can view and edit, but not delete
- User: read-only access
- Hide UI elements based on role
- Protect API routes by role
- Show "Access Denied" page for unauthorized routes

What You'll Get

✅ Included

  • Working admin dashboard
  • Data tables with sort/filter
  • CRUD operations
  • Basic authentication
  • Responsive design
  • Database with Prisma

❌ Not Included

  • Enterprise SSO
  • Advanced permissions
  • Audit logging (add with prompt)
  • Real-time updates
  • Mobile app
  • Integrations
When to NOT vibe this: If you need enterprise compliance (SOC 2), complex RBAC, or 50+ different admin tools, consider Retool. The maintenance burden of custom code adds up at scale.

Deployment

Once built, deploy easily with:

Time & Cost Estimate

Compared to alternatives:

📥 Download Complete Prompt

Get the full prompt as a markdown file to use in your projects.

Download .md file

← Back to all prompts