Build Your Own Employee Directory

Team profiles, org chart, and simple PTO tracking.

Time: 1-2 hours
Stack: React + JSON/Supabase
Vibe Score: 9/10
✅ Great vibe project! Employee directories are simple CRUD with a nice UI. Perfect for AI-assisted dev.

The Prompt

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

Build me an employee directory and simple HR tool with the following specifications:

## Tech Stack
- Next.js 14 with App Router
- Supabase for database
- Tailwind CSS + shadcn/ui

## Core Features

### 1. Employee Directory
- Grid/list view of all employees
- Search by name, department, title
- Filter by department, location, team
- Employee profile cards with photo

### 2. Employee Profile
- Photo, name, title, department
- Contact info (email, phone, Slack)
- Manager relationship
- Start date, location
- Skills/tags

### 3. Org Chart
- Visual organization chart
- Expand/collapse teams
- Click to view profile
- Show reporting structure

### 4. PTO Tracker (simple)
- Request time off (start date, end date, type)
- Manager approval workflow
- Calendar view of team PTO
- Balance tracking

### 5. Team Views
- List employees by team/department
- Team leads highlighted
- Headcount by department chart

## Database Schema
```prisma
model Employee {
  id          String   @id @default(cuid())
  email       String   @unique
  name        String
  title       String
  department  String
  location    String?
  phone       String?
  slack       String?
  photoUrl    String?
  startDate   DateTime
  managerId   String?
  manager     Employee? @relation("ManagerReports", fields: [managerId], references: [id])
  reports     Employee[] @relation("ManagerReports")
  ptoRequests PtoRequest[]
}

model PtoRequest {
  id         String   @id @default(cuid())
  employeeId String
  employee   Employee @relation(fields: [employeeId], references: [id])
  startDate  DateTime
  endDate    DateTime
  type       String   // vacation, sick, personal
  status     String   @default("pending")
  notes      String?
  createdAt  DateTime @default(now())
}
```

## UI Requirements
- Clean card-based design
- Responsive grid
- Quick search
- Profile modal or page

Please generate all files for a working employee directory.

What You'll Get

✅ Included

  • Employee profiles
  • Search & filter
  • Org chart
  • Simple PTO tracking
  • Team views
  • Responsive design

❌ Not Included

  • Payroll
  • Benefits admin
  • Performance reviews
  • Compliance
  • Onboarding workflows
  • Integrations

← Back to all prompts