Build Your Own Admin Panel
A complete prompt to build an internal admin dashboard with data tables, CRUD operations, and user management.
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:
- Vercel — Best for Next.js, free tier available
- Railway — Easy database hosting, good free tier
- Your own server — Docker + any VPS
Time & Cost Estimate
Compared to alternatives:
- This prompt: 1-2 hours, $0 (just your time)
- Retool: 2-4 hours to build, $10-50/user/month ongoing
- Traditional build: 2-4 weeks, $15-30K
📥 Download Complete Prompt
Get the full prompt as a markdown file to use in your projects.
Download .md file