# How to Vibe Code Your Own zcal (and Stop Paying for It) > Beautiful scheduling pages your clients will love - Site: https://zcal.co - Category: Scheduling & Calendar SaaS - Verdict: **Solid side project** (68/100 vibecodeable) - Estimated effort: 2-3 weeks part-time ## Verdict Build a solid subset of zcal for personal scheduling, though paying is the rational choice since zcal's individual tier is free forever. Replicating zcal's slick UI and individual booking engine is a satisfying project, but you will hit friction managing OAuth credential renewals for Google and Outlook calendars and implementing correct timezone slot math. Because zcal offers unlimited free links on its free tier, building this clone only makes sense as an engineering exercise to master calendar API synchronization. ### What you can't replicate - zcal's existing user network and brand loyalty - Maintained enterprise integrations with zero-downtime calendar webhook listeners ## What it does Modern, design-focused online scheduling platform offering personalized booking pages, calendar cross-referencing, automatic timezone detection, and meeting polls. ### Core features - Personalized booking pages with custom styling (fonts, colors, welcome videos) - Bidirectional calendar sync (Google, Outlook, Apple) - Availability calculation engine with buffer times and daily limits - Collective and round-robin team scheduling logic - Meeting polls ( Doodle alternative) - Automated confirmation and email reminders - Video conferencing integrations (Zoom, Google Meet, Teams) ## The business ### Pricing - Free Forever Plan: Free - Pro Plan: ~$7.00/mo Founded 2012. Team size: <50. ## The hard parts - Managing OAuth token rotations and bidirectional calendar webhooks across Google, Microsoft, and Apple without dropping events - Interval-merging availability calculation engine handling complex timezone shifts, min notice, and buffer constraints - Round-robin and collective slot intersection logic across multiple team member calendars ## How to vibe code zcal ### Prerequisites - Node.js (free): Runtime for full-stack Next.js development. - GitHub (free): Repository hosting and continuous deployment hook. - Google Developer Console (free): Required to configure OAuth credentials for Google Calendar integration. ### Recommended AI tools - Claude Code: Best-in-class multi-file agent for scaffolding the database schema, API routes, and calendar integration logic. - Cursor: Ideal for fine-tuning the Tailwind styling and custom booking page layout components. ### Stack - Frontend: Next.js (React) with Tailwind CSS - Backend: Next.js Server Actions and API Routes - Database: Turso (SQLite at the edge) - Auth: better-auth - Payments: Stripe - Other: Resend for transactional email notifications, PostHog for analytics ### Hosting - Vercel (Hosting the Next.js frontend and serverless API endpoints.): $0/mo (Hobby Tier) ### Build guide 1. **Project Scaffolding and Database Schema** — Initialize the Next.js project with Tailwind CSS, configure Turso SQLite via Drizzle ORM, and set up better-auth for user profiles. ``` Initialize a new Next.js project using App Router, TypeScript, and Tailwind CSS. Configure Drizzle ORM to connect to a Turso SQLite database over HTTP. Set up better-auth supporting email/password login and Google OAuth providers. Create database schema models for users, event_types (name, slug, duration, description, color, buffer_time), bookings (host_id, invitee_name, invitee_email, start_time, end_time, status), and connected_calendars (user_id, provider, access_token, refresh_token, token_expires_at). Verify the setup with a local migration run. ``` 2. **Calendar OAuth and Sync Engine** — Implement OAuth flows for Google Calendar and Outlook, securely storing encrypted tokens and building a service to fetch free/busy intervals. ``` Build OAuth integration routes for Google Calendar (/api/auth/google/calendar). Store encrypted OAuth access tokens and refresh tokens in the connected_calendars table. Write a server-side utility function that queries the Google Calendar freebusy API for a given user and time range, handling token expiration and automatic refresh token rotation. Include comprehensive error logging for revoked tokens or rate limits. ``` 3. **Availability Calculation Algorithm** — Create the core scheduling engine that computes available slots by subtracting busy calendar intervals and applying buffer times. ``` Develop an availability calculation engine in TypeScript. Given an event type configuration (duration, slot increments, daily working hours, buffer times before/after meetings) and a user's calendar busy intervals fetched from Google/Outlook, compute all available bookable slots for a requested date. Ensure time zone conversion correctly handles the invitee's detected local time zone against the host's schedule. ``` 4. **Public Booking Page & Slot Selector UI** — Build the public-facing booking page with customizable themes, welcome video embedding, date picker, and time slot selection grid. ``` Create a public booking page view at [username]/[event-slug] using Next.js dynamic routing. The page should render a customizable layout supporting a host profile picture, welcome video embed, custom brand color scheme, and an interactive date and time slot picker. When an invitee clicks a slot, open a modal form asking for name, email, and custom questions before submitting a booking request. ``` 5. **Booking Confirmation & Calendar Insertion** — Handle booking submissions by writing the event back to the host's connected calendar and dispatching email confirmations via Resend. ``` Implement the booking submission API endpoint. When an invitee submits a slot, validate that the slot is still free, write the event back to the host's Google Calendar using their stored OAuth credentials, create a record in the local bookings table, and send confirmation emails to both host and invitee using Resend with clean HTML templates. Handle calendar API failure edge cases gracefully by rolling back local transactions if calendar insertion fails. ``` ### Cost vs paying **Starting costs (one-time):** - AI Coding Assistant (Claude Pro / Cursor): $20.00 one-time - Custom Domain (Optional): $12.00/yr - Total: ~$32.00 one-time **Ongoing costs (monthly):** - Vercel Hobby Hosting: $0/mo - Turso Database: $0/mo - Resend Email API: $0/mo (Free tier up to 3k emails) - Total: $0/mo - Paying for the SaaS instead: $7.00/mo (Pro Plan) - Build time: 25-35 hours - AI tool credits: $20.00 (one month of Claude Pro / Cursor) - Break-even: Never (zcal's individual tier is free forever) ## Sources - [zcal Official Website & Pricing](https://zcal.co) - [zcal About Us](https://zcal.co/about)