# How to Vibe Code Your Own SavvyCal (and Stop Paying for It) > The fresh way to find a time to meet. - Site: https://savvycal.com - Category: SaaS / Scheduling - Verdict: **Solid side project** (72/100 vibecodeable) - Estimated effort: 3-4 weekends of part-time work ## Verdict Build a personal-use subset of SavvyCal; calendar OAuth sync edge cases and timezone math will test your patience. SavvyCal is a focused SaaS with one core loop: booking meetings without calendar ping-pong. A solo developer can absolutely vibecode a personal clone using Next.js, Postgres, and the Google/Microsoft calendar APIs. However, managing OAuth token refreshes, webhooks, and the precise timezone math required for the calendar overlay week view involves unglamorous debugging. Unless you genuinely love wrangling calendar APIs for fun, paying $10/mo is far cheaper than the 3 weekends of frustration required to build it. ### What you can't replicate - The exact community brand affinity and word-of-mouth growth among tech founders - Pre-built integrations for every obscure video conferencing and CRM tool ## What it does Scheduling and calendar management SaaS platform featuring calendar overlay, team scheduling modes, meeting polls, and optimized availability controls. ### Core features - Calendar Overlay week view UI - OAuth calendar syncing (Google, Microsoft) - Conflict checking and real-time free/busy calculation - Team scheduling (Collective, Round Robin, Group modes) - Optimized availability rules (buffers, frequency caps, clustering) - Meeting polls for group voting - Automated lifecycle workflows and reminder emails - Stripe payment collection for paid bookings ## The business ### Pricing - Basic: $10/mo — Great for individuals & small teams with simple scheduling needs. - Premium: $17/mo — Ideal for businesses who need a bit more control over their scheduling flows. Founded 2020. Team size: Tiny indie team (~3 core members). ## The hard parts - Handling real-time token refreshes and rate limits from Google and Microsoft calendar APIs - Calculating complex timezone math and daylight savings transitions across scheduling slots - Computing intersection matrices and distribution algorithms for Collective and Round Robin team modes - Designing a performant, fluid React client-side calendar overlay grid ## How to vibe code SavvyCal ### Prerequisites - Node.js (free): Required runtime for the Next.js full-stack framework and TypeScript compilation. - GitHub (free): Source control and integration bridge for Vercel deployment. - Google Developer Console Account (free): Required to set up OAuth credentials and access the Google Calendar API for conflict checking. ### Recommended AI tools - Claude Code: Agentic terminal coding tool best suited for scaffolding complex full-stack apps, database schemas, and multi-file logic loops. - Cursor: AI code editor ideal for fine-tuning interactive React UI components like the calendar overlay grid. ### Stack - Frontend: Next.js with Tailwind CSS and React - Backend: Next.js API Routes / Server Actions - Database: Neon (Serverless Postgres) - Auth: better-auth - Payments: Stripe - Other: Resend for transactional reminder emails, Vercel AI SDK for auxiliary assistant features ### Hosting - Vercel (Hosting the Next.js frontend, API endpoints, and serverless functions with zero-config GitHub deploys.): $0-20/mo - Neon (Serverless Postgres database storing users, scheduling links, and encrypted OAuth tokens.): $0/mo (Free tier) ### Build guide 1. **Project Scaffolding & Database Schema** — Initialize a Next.js project with TypeScript and Tailwind CSS, configure Neon Postgres with Drizzle ORM, and set up better-auth for user accounts. ``` Scramble a new Next.js project using Tailwind CSS and TypeScript. Set up Drizzle ORM connected to a Neon PostgreSQL database. Define database schemas for users, calendar_connections (storing encrypted OAuth access and refresh tokens), event_types (scheduling links with slug, duration, availability rules), and bookings. Integrate better-auth for email/password authentication and secure session cookies. Ensure all database migration scripts are in place and the project runs locally without errors. ``` 2. **Google Calendar OAuth & Real-time Conflict Checking** — Implement Google Calendar OAuth connection flow, store encrypted tokens safely, and build a real-time free/busy conflict checking service. ``` Implement the Google Calendar OAuth2 flow allowing users to connect their calendar accounts. Securely encrypt OAuth access tokens and refresh tokens before saving them to the calendar_connections table in Neon. Write a service function that queries the Google Calendar free/busy API in real time using a given time range. Implement a temporary in-memory or Redis-backed cache for 60 seconds to avoid API rate limits. Handle token expiration and automatic refresh securely. ``` 3. **Calendar Overlay UI & Interactive Week View** — Build the client-side scheduling link page featuring a high-fidelity week view and the signature overlay mechanism for invitees to compare free time. ``` Build a responsive public scheduling page route ([username]/[slug]) in Next.js using React and Tailwind CSS. Render a gorgeous week-view grid displaying the host's available time slots. Add an interactive 'Calendar Overlay' feature where invitees can authenticate or input their own free/busy blocks to render a secondary translucent layer over the host's grid. Ensure timezone conversion is handled cleanly using date-fns-tz so times align perfectly regardless of the invitee's local zone. ``` 4. **Booking Creation & Calendar Event Push** — Handle slot selection, booking confirmation, writing events back to the host's external calendar, and sending confirmation emails via Resend. ``` Create the booking submission API endpoint that validates slot availability against current free/busy data, writes the reservation to the bookings table, and uses the Google Calendar API to insert a new calendar event directly onto the host's calendar with meeting details. Trigger a transactional confirmation and reminder email using Resend with clean HTML templates. Include error handling for double-booking race conditions. ``` 5. **Optimized Availability & Team Modes** — Add time defense rules (buffers, frequency limits, preferred clustering) and team scheduling modes (Collective and Round Robin). ``` Extend the event_types schema and availability engine to support buffer times between meetings, daily/weekly frequency limits, and clustering rules that encourage bookings adjacent to existing events. Implement basic Collective mode logic that computes the time intersection matrix across multiple connected team members' calendars when rendering a team scheduling link. ``` ### Cost vs paying **Starting costs (one-time):** - Google Developer Console Setup: $0 - AI Coding Assistant Subscription: $20 - Total: ~$20 one-time **Ongoing costs (monthly):** - Vercel Hobby / Pro Hosting: $0-20/mo - Neon Postgres DB: $0/mo - Resend Email API: $0/mo (Free tier) - Total: ~$0-20/mo - Paying for the SaaS instead: $10-17/mo - Build time: 25-35 hours - AI tool credits: $20 (Claude Pro or Cursor Pro for one month) - Break-even: Never (paying $10/mo is financially rational, build for learning) ## Sources - [SavvyCal Official Website & Documentation](https://savvycal.com) - [SavvyCal Security Documentation](https://savvycal.com/security)