WHEN FREE: https://when-free.vercel.app/

A modern scheduling application that makes it easy to find the best meeting times across multiple participants, “Vibe Coding” with CauldeAi

Based in the Netherlands with friends scattered globally, I’ve always struggled with scheduling across time zones. I decided to develop a cross-time-zone scheduling tool and experiment with the trending Vibe Coding approach to solve this persistent problem.

Initial Experience

I prompted:

I want to build a simple cross-time-zone scheduling website focus on mobile version without login that:
1. Allows creation of events with names, descriptions, and time ranges
2. Supports participant-specific time zones with automatic conversion
3. Features an intuitive drag-select time grid
4. Displays viable meeting times after everyone selects availability
5. Uses Next.js, shadcn UI, and Firestore

The results were impressive—after just 4 hours of prompt engineering, I had a nearly complete MVP. This would have taken days of manual coding, highlighting Vibe Coding’s greatest strength: dramatically compressing the timeline from concept to working implementation.

Challenges and Solutions

However, when I examined the generated code more closely and attempted to run the project, I encountered several significant issues.

Challenge 1: Time Zone Conversion Inaccuracies

Ironically, the core feature—time zone conversion—failed in practice. At first, I repeatedly prompted about times not displaying correctly across time zones. Each time, the AI confidently provided “fixes” that seemed plausible but failed in edge cases, creating a frustrating cycle.

Solution: Test-Driven Development

After multiple failed attempts, I wrote unit tests that provided clearly evidence of where the code was failing. Turns out that how date-fns automatically converted UTC times to browser time zones, breaking date comparison functions like isSameDay. When I shared these specific test cases with the AI, I finally received viable solutions using a string-based approach that avoided automatic conversions.

Challenge 2: TimeGrid Components

Initially, my text-based prompts proved frustratingly ineffective. I tried describing “x-axis for dates, y-axis for times” and references to familiar interfaces like Excel and Google Calendar, but the AI consistently produced disappointing results that missed the mark.

ex2

Solution: Visual References

The breakthrough came when I provided screenshots. Sharing actual images from Google Calendar alongside professional UI component examples immediately improved the AI’s output quality. After providing these visual materials to the AI, the quality of generated components improved significantly.

Challenge 3: Implementing Complicated Functionality

While trying to implement drag-select interaction feature, there’s always a bug appeared. After several frustrating prompts, I found myself in a situation even more exhausting than reviewing a colleague’s buggy code. With each iteration, the codebase grew increasingly chaotic and disjointed as the AI patched problems without holistic understanding.

Solution: Open-Source Code as Reference Templates

Recognizing that AI performs best when it has relevant examples, I changed tactics. I found existing open-source implementations of drag-select functionality and provided these as references. This dramatically reduced the AI’s “search space,” resulting in much more efficient and accurate code generation.

The Limitations

Technology Gaps

The AI consistently failed with newer technologies. Even when provided with documentation for Next.js 15’s App Router or date-fns’ updated timezone APIs, it generated code using outdated patterns.

Code Structure and Style

As the project grew, communicating code structure and style preferences became increasingly difficult. Abstract concepts like architecture patterns and team conventions don’t translate well to prompts. The most effective approach became “human scaffolding, AI filling”—creating the file structure and component frameworks myself, then having the AI implement specific functionalities within this structure.

Costs for Small Changes

Surprisingly, small changes often required excessive communication effort. Minor adjustments to styles, formats, or behaviors needed multiple prompt iterations, making direct code edits far more efficient for these tasks.

Conclusions and Best Practices

After this experience, I’ve reconsidered my approach to AI collaboration. My initial strategy of providing comprehensive requirements upfront. For my next project, I’ll experiment with a more incremental, bottom-up approach:

  1. Start with User Stories
  2. Simplify the Design Phase
  3. Prioritize Data Structures
  4. Plan State Management
  5. Adopt Test-Driven Development
  6. Build Design Systems Incrementally

Fundamentals matter more, not less.

While Vibe Coding assume building products through natural language, I believe programming remains essential. As a developer who changed careers into engineering, I recognize that my ability to troubleshoot and effectively prompt the AI stemmed directly from my programming foundations.