# How to Vibe Code Your Own Clockify (and Stop Paying for It)

> The most popular time tracker for teams

- Site: https://clockify.me
- Category: Productivity
- Platforms: Web app, Chrome extension, Firefox extension, Edge extension
- Verdict: **Solid side project** (75/100 vibecodeable)
- Estimated effort: 2-3 weeks of focused building

## Verdict

Build a personal-use subset of the core timer, timesheet, and reports loop; keep paying if you need native multi-platform apps, QuickBooks sync, and 90+ enterprise integrations.

The core loop of starting a timer, assigning it to a project, and viewing a weekly timesheet is entirely buildable with AI assistance. However, replicating Clockify's breadth across native desktop applications for Mac, Windows, and Linux, mobile apps for iOS and Android with offline SQLite sync, and dozens of third-party integrations is a monumental scope trap. For personal use, building a Next.js web application handling time entries and summaries is an ideal weekend project that scales into a solid side project.

### What you can't replicate

- 7 million active user network and brand authority
- Deep native integrations with enterprise suites like QuickBooks and Jira
- Multi-region data residency infrastructure across the EU, UK, US, and Australia

## What it does

Cloud-based time tracking, timesheet, and workforce management suite designed for individuals and teams.

### Core features

- Start/stop stopwatch timer with persistent state
- Weekly structured timesheet grid with inline editing
- Project and client management with billable rates
- Summary and detailed reporting with filtering and CSV/PDF export
- Team workspace administration and member roles
- Simple team time logging and approvals

## The business

### Pricing

- Free: $0
- Basic: $3.99/mo
- Standard: $5.49/mo
- Pro: $7.99/mo
- Enterprise: $11.99/mo

Founded 2016.
Team size: 470-500+.

## The hard parts

- Cross-device offline state synchronization and conflict resolution for running timers
- Complex aggregations across millions of time entries for custom date ranges and rounding rules
- Granular multi-tenant role permissions (Owner, Admin, Manager, Member) governing data visibility
- Browser extension event injection into third-party web apps (Jira, Trello, Asana)

## How to vibe code Clockify

### Prerequisites

- Node.js (free): Required runtime for building and running the Next.js full-stack application.
- GitHub (free): Code repository and deployment source for Vercel.
- Cursor (free): AI-powered code editor to scaffold components and iterate quickly on the UI.

### Recommended AI tools

- Cursor: Provides exceptional inline editing and agentic Composer mode for constructing complex React data grids and dashboard views.
- Claude Code: Ideal for executing terminal-level setup, running migrations, and debugging full-stack wiring.

### Stack

- Frontend: Next.js with Tailwind CSS and shadcn/ui components
- Backend: Next.js Server Actions and API routes
- Database: Neon Serverless Postgres
- Auth: better-auth
- Payments: none
- Other: Resend for transactional verification emails, PostHog for usage telemetry

### Hosting

- Vercel (Hosting the Next.js frontend and serverless backend API endpoints.): $0/mo (Hobby Tier)
- Neon (Serverless Postgres database for storing users, workspaces, projects, and time entries.): $0/mo (Free Tier)

### Build guide

1. **Project Scaffolding & Database Schema** — Initialize the Next.js application with Tailwind CSS, configure Drizzle ORM, and set up the Neon Postgres database schema for users, workspaces, clients, projects, tasks, and time entries.

```
Scaffold a new Next.js project using App Router, TypeScript, and Tailwind CSS. Install Drizzle ORM and connect to a Neon Postgres database using the connection string from environment variables. Define the database schema with tables for users, workspaces, workspace_members, clients, projects, tasks, tags, and time_entries. Time entries must support start_time, end_time, billable status, hourly rate, project_id, and user_id. Ensure proper foreign keys and indexes on user_id and workspace_id for fast aggregation queries.
```

2. **Authentication with better-auth** — Integrate better-auth for secure email/password and session management linked to the Neon PostgreSQL database.

```
Install and configure better-auth in the Next.js application using the Drizzle adapter connected to our Neon PostgreSQL database. Set up email and password authentication, session cookies, and user profile management. Create a middleware or layout guard that restricts access to the dashboard routes for unauthenticated visitors, and automatically provisions a default personal workspace upon user sign-up.
```

3. **Core Stopwatch Timer & Manual Entry** — Build the active time tracker bar with a running stopwatch, project selector, and manual time entry modal.

```
Build a responsive time tracking bar component for the top of the dashboard. Include a text input for description, dropdown selectors for client/project and tags, a billable toggle, and a large start/stop stopwatch button. Implement client-side timer state persistence using local storage and React state so the active timer survives page refreshes. Add a manual time entry modal allowing users to input start and end times or total duration with validation against overlapping entries.
```

4. **Weekly Timesheet Grid View** — Create a structured weekly timesheet matrix view allowing bulk entry of hours across projects by day of the week.

```
Develop a weekly timesheet view component modeled after Clockify's timesheet grid. The table should list projects and tasks on the rows and days of the week (Monday through Sunday) as columns. Users can click any day cell to add or edit hours spent on a project, with live calculation of daily and weekly totals. Implement a Server Action to save these entries in bulk when the user clicks 'Submit' or 'Save'.
```

5. **Projects & Clients Management** — Build the administrative views for managing clients, projects, hourly rates, and workspace members.

```
Create the Projects and Clients management pages in the dashboard. Allow users to create, edit, and archive clients and projects. Each project should support setting a project color, a default hourly rate, budget type (time or money), and assigning tasks. Build a team management sub-view to invite workspace members via email and assign roles (Admin, Manager, Member).
```

6. **Reports, Analytics & Data Export** — Implement summary and detailed reports with filters for date range, client, project, and billable status, plus CSV export.

```
Build a comprehensive Reports page containing Summary and Detailed tabs. Include filter controls for date ranges (this week, this month, custom), clients, projects, and billable status. Use SQL aggregation queries to group time entries by project or user, displaying total hours, billable amounts, and visual breakdown charts. Add a button to export the filtered report dataset as a CSV file generated entirely on the server.
```

### Cost vs paying

**Starting costs (one-time):**

- Custom domain (optional): $12/yr
- AI coding tool subscription: $20
- Total: ~$32 one-time

**Ongoing costs (monthly):**

- Vercel Hobby & Neon Free Tier: $0/mo
- Total: $0/mo

- Paying for the SaaS instead: $7.99/seat (Pro plan)
- Build time: 25-35 hours
- AI tool credits: $20 (1 month of Cursor/Claude Pro)
- Break-even: 0 months (free personal build)

## Sources

- [Clockify Official Website & Pricing Pages](https://clockify.me)
- [GetLatka - CAKE.com Revenue & Valuation Data](https://getlatka.com/companies/cake-com)
- [Sifted - Feature on CAKE.com / COING and Clockify's origins](https://sifted.eu)