How to vibe codePersonio

Prerequisites

• Node.jsfree

  Runtime environment required for the Next.js full-stack application framework.

• GitHubfree

  Version control repository and deployment hook connector for Vercel.

• Supabase accountfree

  Provides hosted PostgreSQL database, file storage buckets for documents, and built-in Auth.

AI coding tools

• Claude Code

  Best-in-class coding agent for scaffolding multi-table relational schemas and complex UI modules in the terminal.

• Cursor

  Ideal AI-native editor for refining dashboard views, forms, and permission hooks iteratively.

Build guide

1. 01Project Scaffolding & Database Schema

   Initialize the Next.js project with Tailwind CSS, configure Supabase client connections, and establish the relational database schema.

   Create a new Next.js 16 project using TypeScript and Tailwind CSS. Install shadcn/ui primitives. Set up a Supabase client configuration in utils/supabase. Write a complete SQL migration file to create tables for: organizations, users (linking to auth.users with roles: admin, manager, employee), employee_profiles (first_name, last_name, department, position, manager_id, hire_date, salary), time_off_requests (user_id, start_date, end_date, type, status), performance_reviews (employee_id, reviewer_id, cycle_name, score, feedback), and documents (user_id, file_path, category). Enforce foreign keys and index foreign keys properly.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Authentication & Role-Based Access Control (RBAC)

   Implement authentication flows and set up Supabase Row Level Security policies to restrict data visibility by role.

   Implement Supabase Auth login and registration pages using Next.js Server Actions. Write Supabase Row Level Security (RLS) policies for all tables created in step 1: 1) Admins can read and write all records. 2) Managers can read and update their direct reports' profiles and absence requests. 3) Standard employees can only read and update their own personal records and submit requests. Verify session handling with middleware protecting all dashboard routes under /app.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Core HR Directory & Org Chart

   Build the employee directory table with filtering and a visual organizational chart hierarchy.

   Build the core HR directory page at /employees using shadcn/ui data tables with search, department filters, and sorting. Create a detailed employee profile view at /employees/[id] allowing HR admins to update contact details, compensation, and supervisor assignments. Build an interactive organizational chart tree view at /org-chart using recursive queries to render management reporting lines cleanly.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Time Off & Attendance Management

   Create time-off request workflows, calendar visualizations, and manager approval queues.

   Build the time-off management module. Create an employee-facing request form supporting vacation, sick leave, and unpaid leave with date pickers and balance counters. Build a manager approval dashboard where managers can accept or reject pending requests. Create a shared calendar view component displaying team absences month-by-month.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Document Vault & eSignatures

   Implement secure document management leveraging Supabase Storage with category tags.

   Build a document management vault for each employee profile. Integrate Supabase Storage buckets with strict private access policies. Allow HR admins to upload, categorize (contracts, IDs, certificates), and preview PDF and image documents. Implement an audit log table that records every document view and download action with timestamps.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Performance Reviews & Analytics Dashboard

   Add performance review cycles, feedback questionnaires, and high-level workforce metrics.

   Build a performance review module allowing admins to launch review cycles, assign reviewers, and collect structured feedback ratings. Build an executive analytics dashboard at /analytics showing total headcount, turnover rate by department, average tenure, and upcoming contract renewals using interactive charts.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Personio