How to vibe codezcal
Beautiful scheduling pages your clients will love
zcal.co ↗Scheduling & Calendar SaaS
The verdict: can you vibe code zcal?
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.
Estimated effort: 2-3 weeks part-time
What you can't replicate
- zcal's existing user network and brand loyalty
- Maintained enterprise integrations with zero-downtime calendar webhook listeners
Founded
2012
Raised
—
Team
<50
Cheapest paid tier
~$7.00/mo
What zcal 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 PlanFree
- Pro Plan~$7.00/mo
Funding
Unknown / bootstrapped
Pay vs build, cumulative
Break-even at month 5 — after that, every month is money kept.
The hard parts of vibe coding zcal
- 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 vibecode zcal
Prerequisites
Node.jsfree
Runtime for full-stack Next.js development.
GitHubfree
Repository hosting and continuous deployment hook.
Google Developer Consolefree
Required to configure OAuth credentials for Google Calendar integration.
AI coding tools
Recommended 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 & infrastructure
| Vercel | Hosting the Next.js frontend and serverless API endpoints. | $0/mo (Hobby Tier) |
Build guide
01Project 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.02Calendar 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.03Availability 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.04Public 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.05Booking 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 for zcal
What will you build it with?
Starting total with Claude Code$0 one-time
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 zcal
$7.00/mo (Pro Plan)
Your time to build
25-35 hours
AI tool credits
$20.00 (one month of Claude Pro / Cursor)
Break-even
Never (zcal's individual tier is free forever)
Vibe code zcal: FAQ
- Can you vibe code zcal yourself?
- Solid side project — 68/100 vibecodeable. Build a solid subset of zcal for personal scheduling, though paying is the rational choice since zcal's individual tier is free forever.
- How long does it take to vibe code zcal?
- 2-3 weeks part-time — roughly 25-35 hours of hands-on time with an AI coding agent.
- How do you build your own zcal?
- Scoped to personal use: Next.js (React) with Tailwind CSS on the front, Next.js Server Actions and API Routes behind it, Turso (SQLite at the edge) for data. Follow the 5-step build guide on this page — each step has a paste-ready prompt for an AI coding agent.
- How do you code your own zcal without being an expert?
- Use an AI coding tool (Claude Code or Cursor) and work in small steps: scaffold, data model, core screens, then deploy. Realistic effort: 2-3 weeks part-time. The prompts on this page are written so the AI does the heavy lifting.
- How much does it cost to vibe code zcal instead of paying?
- About ~$32.00 one-time to start and $0/mo to run, versus $7.00/mo (Pro Plan) for zcal. Break-even: Never (zcal's individual tier is free forever).
- What stack should you use to vibe code zcal?
- Next.js (React) with Tailwind CSS; Next.js Server Actions and API Routes; Turso (SQLite at the edge); plus Resend for transactional email notifications, PostHog for analytics.