How to vibe codeBambooHR

Prerequisites

• Node.jsFree

  Runtime environment for Next.js full-stack development

• GitHubFree

  Version control and deployment pipeline integration

• Supabase AccountFree tier

  Hosted PostgreSQL database with instant row-level security and storage buckets

AI coding tools

• Claude Code

  Terminal-based agentic coding tool capable of multi-file scaffolding and rigorous iterative debugging across complex schemas

• Cursor

  AI-native code editor for reviewing fine-grained UI diffs across complex dashboard components

Build guide

1. 01Project Scaffolding & Database Schema

   Initialize the Next.js repository with Tailwind CSS, shadcn/ui, and configure the Supabase PostgreSQL database schema with core tables for employees, departments, job roles, and secure document storage.

   Create a new Next.js 15 project with TypeScript, Tailwind CSS, and App Router. Initialize a Supabase client configuration file and write a comprehensive SQL migration script for an HRIS database. Include tables for 'organizations', 'departments', 'employees' (with fields for personal info, compensation, manager_id, employment_status), 'documents' (tracking employee file attachments), and 'time_off_requests'. Ensure foreign key constraints and indexes are properly structured for hierarchical reporting lines. Install lucide-react and configure a clean layout structure with sidebar navigation for an HR dashboard.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

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

   Implement better-auth with role-based permissions ensuring administrators, managers, and standard employees see only permitted views and sensitive fields like compensation.

   Integrate better-auth into the Next.js application supporting email/password sign-in and user session management linked to the employees table. Build middleware and helper functions that enforce Role-Based Access Control (RBAC) with three distinct roles: Admin, Manager, and Employee. Ensure that standard employees can only view their own records and directory contact details, managers can view their direct reports, and admins have full access. Create protected API routes and UI wrapper components that conditionally mask sensitive fields like salary and SSN based on the active user's permission level.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Employee Directory & Org Chart Visualizer

   Build an interactive employee directory with advanced filtering, search, and a hierarchical organizational chart visualization.

   Build an interactive employee directory page in Next.js featuring real-time search, department filters, and grid/table view toggles. Implement a dedicated Org Chart view using recursive data fetching from the employees table to render hierarchical reporting trees (connecting employees to their respective managers). Add a detail modal view when clicking any employee card that surfaces contact details, job history, and emergency contacts, ensuring proper RBAC data masking is applied on sensitive attributes.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Time-Off Tracking & Approval Workflows

   Develop a time-off management module allowing employees to submit requests and managers to approve or deny them with balance tracking.

   Build a Time-Off management module in the Next.js app. Create database tables for 'time_off_types' (e.g., PTO, Sick, Vacation) and 'time_off_requests' (tracking start_date, end_date, status: pending/approved/rejected, and user_id). Implement a request creation form with balance validation. Build a manager dashboard view displaying pending requests for their direct reports with one-click approval and rejection actions that trigger state updates and notification logs.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Applicant Tracking System (ATS) Pipeline

   Construct a job posting and candidate pipeline board to track incoming job applicants through various hiring stages.

   Implement an Applicant Tracking System (ATS) module. Create tables for 'job_openings' (title, department, description, status) and 'candidates' (name, email, resume_url, stage: applied, screening, interview, offer, hired). Build a Kanban board interface allowing users to drag and drop or transition candidates across hiring pipeline stages. Include a public job application form page that uploads candidate resumes directly to Supabase storage buckets and creates candidate records automatically.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Document Management & Polish

   Implement secure employee document storage using Supabase buckets with strict access policies, plus final UI polish and dashboard metrics.

   Build an employee document management section where HR admins and employees can upload, view, and delete documents (such as tax forms or IDs) tied to specific employee profiles. Leverage Supabase Storage with signed URLs to ensure private documents are only accessible to authorized personnel. Finally, build an executive dashboard on the home page displaying key HR metrics: total headcount, upcoming time-off, open job requisitions, and recent hires, styled professionally with shadcn/ui primitives.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for BambooHR