Bio Citizen

Turn your health into a game. BioCitizen merges your data with AI and lets you battle enemies like Junk Food Jerry in the fight for your future vitality.

Comment

Inspiration

My journey to build BioCitizen began several years ago, inspired by a very personal challenge: helping my wife manage her Type 1 Diabetes. Observing the constant need for vigilance over various health metrics sparked an idea. The core concept evolved significantly with the advent of advanced AI, leading to the vision of a system that could intelligently aggregate diverse (and, critically, anonymized) health metrics. While never a substitute for professional medical advice, this AI-driven guidance aims to empower individuals with insights into their general health status and actionable steps for improvement, bridging the gap between raw data and personal well-being.

What it does

BioCitizen serves as a highly engaging, gamified Progressive Web App (PWA) designed to motivate users on their health and wellness journey. It offers personalized quests and AI-driven insights from a holographic companion. A unique gamification layer transforms the wellness journey into a "space RPG," allowing users to progress through health goals as if navigating a galactic adventure. Crucially, a toggleable "game mode" ensures that users who prefer a straightforward approach can still leverage the app for aggregated health insights and AI-driven feedback without the gamified elements.

How we built it

My development journey kicked off a day before the official start of the hackathon, fueled by a meticulously crafted specification document created with Google AI Studio. My initial approach was to leverage bolt.new for rapid frontend component generation, which proved incredibly powerful for creating the app's initial structure and integrations with Supabase, Stripe, and Netlify. However, as the codebase expanded, I faced significant challenges with bolt.new's build process. To move forward, I adopted a hybrid approach, but it quickly became clear that Cursor was better suited for the project's growing complexity. I ultimately relied on Cursor for most of the work, as edits in bolt.new often broke the build, a limitation I believe was due to the sheer size of the project.

Challenges we ran into

A significant hurdle emerged when the application began getting stuck repeatedly during the build process with bolt.new. A quick check on Discord confirmed this was a known issue that others were also experiencing. This necessitated a strategic decision to transition to Cursor for certain parts of the build to maintain momentum, as the project had grown quite large, likely contributing to bolt.new's struggles. Another challenge was mastering the art of guiding AI effectively; I found that even a slightly misaligned prompt could lead to hours of debugging and re-direction, often making it more efficient to revert and re-prompt than to try and fix increasingly convoluted outputs.

Accomplishments that we're proud of

I'm particularly proud of creating a detailed and comprehensive specification document even before the hackathon officially began. The rapid prototyping capabilities demonstrated by bolt.new in configuring the core frontend components so quickly was a significant accomplishment. Overcoming the build process challenges by intelligently integrating Cursor allowed me to continue building a substantial, comprehensive application despite the setbacks. Additionally, building a dedicated landing page to start gathering public interest in BioCitizen's unique offering is something I'm very pleased with. The innovative integration of a gamification layer, transforming health tracking into a "space RPG," represents a core achievement and a truly exciting aspect of the project.

What we learned

I learned that while modern tools enable rapid application development and iteration, the importance of solid design principles and well-structured information is paramount. Guiding AI effectively requires precision in prompting, and small errors can quickly spiral into significant re-work. This project reinforced the value of knowing when to revert and rethink, rather than pushing through with a flawed direction, ultimately saving time and improving the final output.

What's next for BioCitizen

My vision for BioCitizen extends to integrating more sophisticated APIs for broader data capture, enhancing the AI's capabilities for even deeper personalized insights, and introducing the ability to analyze health-related information directly from photos of health documents (e.g., lab results). These next steps will pave the way for an even more comprehensive and personalized wellness guidance experience.

Built With

  • apple-healthkit
  • autoprefixer
  • capacitor
  • chart.js
  • deno
  • eslint
  • file-saver
  • fitbit-web-api
  • framer-motion
  • garmin-connect-iq-api
  • google-health-connect
  • jwt-authentication
  • kotlin
  • lucide-react
  • oauth
  • oauth-2.0
  • openai-api
  • postcss
  • postgresql
  • radix-ui
  • react
  • react-chart.js-2
  • react-router-dom
  • resend
  • row-level-security
  • service-workers
  • sharp
  • smtp
  • sonner
  • stripe
  • supabase
  • supabase-edge-functions
  • swift
  • tailwind-css
  • typescript
  • vite
  • vite-plugin-pwa
  • web-app-manifest
  • workbox
  • zustand
Share this project:

Updates