The inspiration for MindCheck came from observing how passive most modern health and productivity tools are. Standard mood trackers act like simple spreadsheets—they record when you are sad or anxious but leave you entirely alone to handle that heavy emotional state. We wanted to build something active. We asked ourselves: What if a journal didn't just store your thoughts, but talked back to you with grounding techniques when you needed them most? We were inspired to build a highly responsive, privacy-first psychological first-aid dashboard that acts as a real-time cognitive behavioral assistant right inside the browser.
We engineered MindCheck using a modern, lightweight, and incredibly fast frontend stack: Architecture & Logic: Built with React and TypeScript to ensure modular, scalable components and strict type safety across our data models. Styling & UI: Designed with Tailwind CSS and Lucide Icons to create a sharp, high-contrast, professional workspace that avoids dense walls of text and provides immediate scanability. AI Synthesis Engine: Integrated the Google Gemini 1.5 Flash model using the official @google/generative-ai SDK to run advanced prompt instruction matrices directly on user data. Voice Interface: Utilized the native browser Web Speech API (SpeechRecognition and SpeechSynthesisUtterance) to create a completely hands-free audio loop for distress grounding.
Challenges We Faced
Securing API Keys in a Public Static Deployment: Since our app compiles entirely down to client-side code running on static hosting (like GitHub Pages), hardcoding our Gemini API key was an absolute no-go. Anyone could hit F12 and steal it. Our Solution: We decoupled the credentials from the codebase. We set up a secure architecture utilizing Vite Environment Variables (.env) for safe local development. For the live deployment layer, we configured GitHub Actions Repository Secrets to dynamically inject the keys safely at the compilation stage, keeping our public repository completely clean. Handling Voice Interface Latency: In moments of acute stress, waiting 5 to 10 seconds for an AI to parse text and reply feels like an eternity. Our Solution: We specifically chose the Gemini 1.5 Flash model for its low-latency profile. We then optimized our Web Speech event handlers to instantly trigger browser text-to-speech rendering the exact millisecond the text chunks resolved, resulting in a smooth, seamless conversational flow.
Built With
- gemini-api
- react
- tailwind
- typescript
- web-speech-api
Log in or sign up for Devpost to join the conversation.