VibeSync

Inspiration

VibeSync was born from the idea that mental wellness support should be accessible, personal, and readily available. In a world where daily stressors are common, many people struggle to find a moment for themselves. I wanted to create a simple yet powerful tool that could act as a personal emotional companion, offering a safe space to reflect and find balance without the friction of traditional wellness apps. The goal was to build something that listens, understands, and gently guides users toward a calmer state of mind.

What I Learned

This project was a deep dive into building a modern, AI-powered web application.

• Full-Stack with Next.js: I learned to leverage the power of the Next.js App Router, using Server Components for performance and Server Actions for seamless client-server communication.
• AI with Genkit: I gained hands-on experience with Google's Genkit, defining structured AI flows for complex tasks. I learned how to chain different AI calls, such as analyzing text sentiment and then using that output to generate a personalized guided meditation with Text-to-Speech (TTS).
• Agentic AI Patterns: Implementing the AI check-in feature taught me about building more reliable AI agents. I learned that separating deterministic logic (like checking for patterns in data) from the creative task of generating text leads to much more predictable and useful behavior.
• Practical Problem-Solving: I encountered and solved real-world development challenges, from template engine errors in Handlebars to refining the user experience based on the limitations and strengths of the AI models.

How It Was Built

VibeSync is a full-stack application built on a modern tech stack:

• Frontend: The user interface is built with Next.js and React, providing a fast and responsive experience. ShadCN UI and Tailwind CSS were used to create a clean, modern, and accessible design system.
• AI Backend: All generative AI features are powered by Google's Genkit. Different flows were created to handle specific tasks:
  • analyzeJournalEntry: Uses a language model to perform sentiment analysis on user text.
  • generateMusicTherapy: Takes the analyzed mood and generates a custom guided meditation script, which is then converted into audio using a Text-to-Speech (TTS) model.
  • agenticAICheckIn: A simple AI agent that monitors mood history and proactively generates a supportive message when it detects a pattern of low moods or high stress.
• State Management: Client-side state is managed using React hooks (useState, useEffect) for simplicity and efficiency.

Challenges Faced

• AI Reliability: Initially, the AI agent's logic was embedded entirely within a single prompt. This led to inconsistent behavior. I refactored it to handle the logical checks in TypeScript code, only using the AI for what it does best: generating creative, empathetic text. This greatly improved the feature's reliability.
• Pivoting on Features: My initial idea for "music therapy" was to generate actual music. However, the available models were better suited for TTS. I pivoted the feature to Guided Meditation, which was more feasible to implement and ultimately provided a more direct therapeutic benefit for the user.
• Technical Hurdles: I ran into a few technical snags, like a Handlebars templating error (unknown helper eq) in a Genkit flow. Debugging these issues taught me more about the specific constraints of the tools I was using and how to work within them effectively.

Built With

• genkit
• next
• react
• shadcn
• tailwind
• typescript