VibeTime

• 

  main page

VibeTime is a conversational, brutalist-style calendar application powered by the Gemini API that acts as an active, real-time productivity coach. Instead of forcing you to fight a rigid, blank calendar grid, VibeTime lets you text or talk your day into existence. The AI engine handles the heavy lifting—auto-blocking your time, filtering out choice paralysis, and actively keeping you from procrastinating using psychological friction-breakers.

💡 The Inspiration

As a software developer and student balancing academic tasks, building side projects, and creating content, traditional calendar apps always felt dead to me. They are passive grids; they let you overcommit until your schedule is a colorful lie, leading to burnout or mindless scrolling during "free" blocks.

I was deeply inspired by the core philosophy of Ali Abdaal's Feel-Good Productivity. I wanted to build a tool with true attitude—something that doesn't just hold events, but talks back to you, forces you to protect your health and relationships via Side Quests, and refuses to let you say "I don't have time". To match that raw, no-nonsense energy, I wrapped the entire application in a high-contrast, brutalist aesthetic featuring stark monochrome palettes and glowing neon-green accents.

🛠️ How I Built It

The application is engineered for speed, real-time feedback, and dynamic layout rendering:

Frontend: Next.js and React form the core framework, utilizing a fluid dashboard that transitions completely when entering "Adventure Mode".

Styling: Tailwind CSS handles the hard-edged, minimalist brutalist UI, custom monospace typography, and stark receipt-style components.

Backend & Sync: Firebase (Firestore) acts as the real-time data layer. The moment the AI engine updates a schedule, Firestore updates the UI instantaneously without a page refresh.

The Brain (AI Engine): Gemini API (gemini-2.5-flash) orchestrates the coaching dialogue. By using Structured Outputs (JSON Schema), Gemini parses raw, chaotic text dumps and returns clean data arrays to instantly plot the calendar blocks.

📐 The Math Behind the Blocks

To make the auto-blocking logic work reliably, the backend models the day as a finite timeline of minutes T total ​ =1440.

Fixed commitments (like university classes or pre-scheduled meetings) are treated as absolute constraints, represented as a set of immutable intervals:

C={[s 1 ​ ,e 1 ​ ],[s 2 ​ ,e 2 ​ ],…,[s n ​ ,e n ​ ]} Where s is the start time and e is the end time. The AI's job is to calculate the available free time slots F=[0,T total ​ ]∖⋃C, prioritize your Daily Adventure (A), and fit it into the optimal high-energy window within F while maintaining a buffer ratio β to prevent back-to-back burnout:

Block Duration=t task ​ ×(1+β) 🛑 Challenges Faced

Enforcing Structured AI Outputs: Getting an LLM to accurately conversationalize like a friendly, direct coach while simultaneously demanding it output perfectly valid JSON that won't break a UI calendar grid was a major hurdle. I solved this by strictly utilizing Gemini's native responseSchema to guarantee type safety for the array mapping.

State Management in Real-Time: Transitioning seamlessly from "Chat Mode" into "Focus Mode" required precise synchronization between the active conversational state and Firestore listeners.

🧠 What I Learned

Building VibeTime taught me how to effectively leverage AI for structural execution rather than just basic text generation. I learned how to model user behavior loops—specifically designing the Unblock Method overlay to intercept procrastination with a 5-minute micro-timer rather than letting the user simply hit "delay". It solidified my experience in vibe coding complex real-time applications using a fast, modern stack.

Built With

• gemini
• next
• next.js
• supabase