Tabble-It

Inspiration According to the World Health Organization, nearly 50% of people with chronic conditions do not take their medications as prescribed. Non-adherence isn't just about forgetfulness—it is driven by a lack of clear clinical context, confusing scheduling charts, and the anxiety of drug-to-drug interactions. We wanted to build Tabble-It to lift this mental burden. We envisioned a companion that doesn't just remind you to take a tablet, but explains why, flags clinical alerts dynamically, connects you with physical dispensing pharmacies, and safely accommodates multiple profiles on a single device without data cross-contamination.

What it does Tabble-It is a comprehensive medical adherence and clinical reference hub: Organic Compliance Tracking: Users log their doses, visualize historic adherence metrics, and earn live progress scores to keep internal recovery loops active. Smart Master-Detail Reference Engine: An interactive clinical panel detailing core purposes, FDA typical dosages, mechanisms of action, safety alerts, and interactive warnings for active prescriptions. Proximity Map Locator: Integrated localized mapping tools to find and contact active health hubs and nearby clinical providers. Dynamic Multi-Patient Isolation: Full sandbox isolation that instantly partitions local storage keys based on user email hashes, ensuring every profile enjoys confidential schedules, dosages, history logs, and profile records. Patient Health Passport: A secure, editable database tracking blood composition, active conditions, life-threatening allergies, and instant-access emergency contacts.

How we built it We engineered Tabble-It utilizing a modern full-stack web structure designed for bulletproof reliability: Front-End & Motion Physics: Built with React 18 and Vite, utilizing Tailwind CSS for an refined "hospitality-grade" aesthetic Identity & Main Storage: Powered by Supabase for secure authentication and database persistence.

Challenges we ran into Thread-Safe Signups: When rapidly provisioning profiles on parallel triggers, we hit concurrent write race conditions. We mitigated this by implementing an active retry mechanism inside our initialization loops to safely retrieve matching profiles instead of failing. Responsive Dual-Pane Navigation: Adapting a dense clinical database into mobile forms without ruining visual balance. We tackled this by designing a custom dual-pane grid on desktops (allowing instant reference previews side-by-side) while falling back to an elegant swipe-to-detail navigation overlay on smaller viewports.

Accomplishments that we're proud of Pristine Typography & Layout: Ditching default card boundaries for a customized, high-contrast, modern layout paired with clean, geometric type tracks. Data Hermetic Seals: Creating perfect data boundary separations. You can cycle through several mock or live patient logins on the exact same terminal, and Tabble-It completely recalibrates every log, metric, timeline, and security disclaimer with zero leaking data.

What we learned User-First Healthcare UX: When creating medical designs, safety details cannot be nested deep inside long navigation maps; critical allergy records and clinical warnings must always remain visible on the primary viewport.

What's next for Tabble-It Tablet Scan: Allowing users to snap a photo of any prescription label to automatically populate names, schedules, and active dosages. Interactive Calendar Export: Instantly syncing medication routines into Google Calendar and Apple Health with automated proactive smartphone notifications.