How to vibe codeWhen I Work

Prerequisites

• Node.jsfree

  Required runtime for the Next.js full-stack application and package management.

• GitHubfree

  Source code repository and deployment pipeline integration.

• Supabase Accountfree

  Managed PostgreSQL database with built-in auth and realtime capabilities.

AI coding tools

• Claude Code

  Best-in-class terminal coding agent for scaffolding complex relational data models and calendar UI components.

• Cursor

  Essential for iterative UI development and reviewing multi-file calendar grid diffs.

Build guide

1. 01Project Scaffolding and Database Schema

   Initialize the Next.js project with Tailwind CSS, configure better-auth, and set up the relational PostgreSQL database schema in Supabase.

   Scramble a new Next.js project configured with TypeScript, Tailwind CSS, and shadcn/ui. Set up a Supabase PostgreSQL connection and write a comprehensive SQL migration script for a workforce management tool. Create tables for users (id, name, email, role, hourly_wage), locations (id, name, address, geofence_lat, geofence_lng, radius_meters), shifts (id, location_id, user_id, start_time, end_time, position, status, notes), time_clocks (id, user_id, shift_id, clock_in_time, clock_out_time, lat, lng, verified_geofence), and messages (id, sender_id, channel_id, content, created_at). Configure better-auth with email/password and organization roles (manager, employee) mapped to the user table. Ensure all foreign keys, indexes on timestamps, and basic row-level security policies are properly instantiated.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Manager Calendar & Schedule Grid UI

   Build an interactive weekly and monthly calendar view for managers to assign shifts across locations and roles.

   Build a responsive manager scheduling dashboard in Next.js using a multi-row calendar grid where rows represent employees or positions and columns represent days of the week. Implement drag-and-drop or modal-based shift creation allowing managers to select start time, end time, location, position color coding, and hourly rate. Add filters for locations and departments. Include visual indicators for scheduled weekly hours against labor budgets, and highlight overtime risks when a shift pushes an employee past 40 hours. Write server actions to persist shift insertions and updates atomically.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Auto-Scheduling & Constraint Engine

   Implement a backend routine that automatically assigns unassigned shifts based on employee availability and qualifications.

   Implement an auto-scheduling feature on the backend. Create an algorithm in a server action that takes a list of open shifts for a given week and evaluates eligible employees based on their availability windows, position qualifications, and max weekly hour caps. The algorithm should greedily match shifts to available staff without causing double-booking or overtime violations, then bulk-insert the assignments into the shifts table. Expose a trigger button in the manager UI to run auto-scheduling and return a summary of assigned versus unassigned shifts.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04GPS Time Clock & Geofencing Verification

   Build employee time-tracking interfaces with browser/device geolocation verification against location geofences.

   Create an employee time clock interface where staff can view their assigned upcoming shifts and click a prominent 'Clock In' or 'Clock Out' button. Using the browser's Geolocation API, capture the user's current latitude and longitude upon clicking. On the backend, calculate the Haversine distance between the user's coordinates and the target location's registered geofence center point. If the distance is within the location's radius_meters threshold, record the punch with verified_geofence = true; otherwise, flag it or require manager approval. Display live timesheet summaries, total hours worked, and break tracking.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Shift Swaps, OpenShifts & Team Messaging

   Develop peer-to-peer shift drop/swap workflows and real-time communication channels.

   Build a shift marketplace and messaging system. Allow employees to drop a shift into an 'OpenShifts' pool or request a direct swap with a peer, triggering a notification for manager approval. Implement a real-time messaging interface using Pusher or Supabase Realtime channels where managers and staff can exchange direct messages and broadcast group announcements without exposing personal phone numbers. Add unread badge counts, message history pagination, and push notification triggers for shift updates.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Labor Forecasting & Payroll Export Polish

   Add labor cost calculation, forecasting charts, and CSV/API export for payroll systems.

   Build a labor forecasting and reporting analytics view for managers. Calculate projected labor costs by multiplying scheduled shift hours by employee hourly wages, and render daily/weekly cost charts using Recharts. Implement a payroll export page that aggregates verified timesheet hours per employee over a selected pay period (e.g., bi-weekly) and generates a downloadable CSV formatted for standard payroll processors like Gusto and ADP, including regular hours, overtime hours, and gross pay sums.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for When I Work