CoverageCompass

• 

  Cover_pic

Inspiration

The idea for CoverageCompass was born from a simple observation: new employees are overwhelmed on day one. We watched friends and family members struggle through benefits enrollment packets filled with jargon, unsure whether to choose the PPO or HMO, how much to contribute to their 401(k), or whether they needed that dental plan. These critical financial decisions—made in the first few weeks of employment—can impact someone's financial health for years to come.

But the problem doesn't stop at benefits. According to studies, 88% of Americans experience financial stress, yet financial literacy education is rarely accessible, engaging, or personalized. We asked ourselves: What if we could make financial wellness as intuitive as browsing Netflix and as engaging as playing a game? That's when CoverageCompass was born—a platform that transforms the anxiety of benefits enrollment and the boredom of financial education into an empowering, interactive experience.

What it does

CoverageCompass is a unified AI-driven platform designed to simplify employee benefits and make financial wellness engaging.

💡 Smart Benefits Selection Assistant

• Uses Gemini API to extract and summarize benefits directly from insurance documents or text inputs.
• Provides personalized plan recommendations based on user factors such as age, income, family status, and health needs.
• Translates complex insurance terms into plain, human-friendly language.
• Performs real-world cost simulations (e.g., “If you visit the doctor 3 times per year, Plan A saves you $X vs Plan B”).
• Integrates Supabase for persistent storage of user selections, chat logs, and generated recommendations.

🧠 Interactive Financial Learning (Gamified)

• Dynamic Question Generation powered by XGBoost, adapting to user performance to make quizzes personalized.
• Quiz & Levels implemented as mini-games to keep users engaged while learning core financial concepts.

AI-powered Admin Dashboard managed by HR — integrates Gemini API as a chatbot to manage and automate HR data and employee benefits queries.

Tracks user progress, awards badges, and increases levels as financial literacy improves.

How we built it

Tech Stack:

• Backend: Node.js + Express (local server for Gemini and Supabase integration)
• Database: Supabase (PostgreSQL) for real-time DataBase Management
• Machine Learning: XGBoost for dynamic quiz question generation and scoring
• APIs: Gemini (Google Generative AI) for benefit extraction and chatbot automation & Auth0 for secure sign ups with 2 step verification
• State Management: React Hooks (useState, useEffect, useCallback)
• Version Control: Git/GitHub for multi-branch collaboration

Key Features:

• Dynamic Question Generation using XGBoost for adaptive financial learning
• Gemini-powered Benefit Extractor for summarizing and comparing insurance plans
• Gamified Financial Education through multi-level quizzes and interactive games
• HR Chatbot Integration for employee benefit management and real-time responses
• Voice Command Support for ADA accessibility and hands-free navigation
• Persistent Online Database using Supabase for storing user sessions, preferences, and quiz data
• Secure Authentication via Supabase Auth API
• AI-based Recommendation Engine to suggest optimal financial or insurance decisions
• Modern UI/UX built with Tailwind CSS — gradient backgrounds, glassmorphism, and motion transitions using Framer Motion

Challenges we ran into

Making Finance Fun: Financial education is traditionally dry and intimidating. We solved this by gamifying everything—removing corporate jargon and using conversational language like "Think you know money? Let's find out!" instead of "Financial Literacy Assessment Module."

Balancing Simplicity with Depth: Oversimplifying risks being unhelpful; overcomplicating scares users away. We implemented progressive disclosure—starting with basics and revealing complexity gradually.

Keyboard Event Handling in React: The Maze Navigator required smooth keyboard controls with collision detection and modal interruptions. We used useCallback hooks to prevent stale closures and created a state-based modal system that pauses game controls during decision points.

Creating Engaging Visuals Without Designers: As developers, we leveraged CSS gradients, backdrop filters (glass morphism), Font Awesome icons, and CSS animations to create a polished, professional aesthetic with vibrant purple-pink-blue gradients and smooth transitions.

Making AI "Smart" Without ML Infrastructure: We implemented rule-based "AI" using decision trees and weighted scoring systems to provide personalized guidance without requiring cloud compute or APIs.

Scope Creep Management: We prioritized MVP features (Quiz, Scenarios, Budget, Maze) and designed each module to be self-contained for parallel development and future expansion.

Accomplishments that we're proud of

• Built a complete gamified platform in 24 hours with four fully functional learning modules
• Created stunning visuals with pure CSS—vibrant gradients, glass morphism effects, and smooth animations without heavy frameworks
• Implemented complex game mechanics including a fully playable keyboard-controlled maze with collision detection and random events
• Made finance accessible and fun—turned boring benefits enrollment into an engaging journey
• Became financially literate ourselves while building a financial literacy tool
• User feedback transformation—took criticism ("looks AI-generated") and redesigned to create a warm, human-centered interface
• Zero dependencies on backend services—fully functional frontend application that works offline

What we learned

Technical Skills:

• Advanced React patterns: custom hooks, state lifting, component composition
• CSS mastery: animations, gradients, responsive design, accessibility
• Event-driven programming: keyboard handlers, modal systems, game loops
• Performance optimization: memoization, lazy loading, efficient re-renders

Design Thinking:

• User-first design: Every feature answered "Does this reduce anxiety or build confidence?"
• Progressive disclosure: Reveal complexity gradually
• Feedback loops: Instant visual cues for every action
• Consistency: Unified color schemes, typography, and interaction patterns

Financial Literacy: Building this project forced us to deeply understand insurance plan types (HMO, PPO, HDHP, HSA), debt payoff strategies (avalanche vs. snowball), emergency fund guidelines, retirement planning, and budget allocation rules. We became better financially literate while building a financial literacy tool!

Key Takeaways:

1. Gamification works—engagement increased 10x with progress bars, points, and animations
2. Simplicity is hard—writing simple explanations requires deep understanding
3. CSS is powerful—modern CSS can create stunning visuals
4. User testing matters—feedback led to a friendlier, more human interface
5. Financial education is urgent—everyone we talked to struggled with money decisions

What's next for CoverageCompass

Short-term Goals:

• Add more game modules (Investment Climber, Debt Destroyer typing game)
• Integrate real insurance plan APIs (HealthCare.gov, company HR systems)
• Implement user accounts with progress saving and cloud sync
• Mobile app versions using React Native

Long-term Vision:

• AI/ML Integration: Train models on anonymized user data to improve recommendations
• Employer Partnerships: White-label solution for companies to use during employee onboarding
• Financial Advisor Marketplace: Connect users with certified professionals for complex needs
• Community Features: Forums, peer learning, financial accountability groups
• Multi-language Support: Break language barriers to financial literacy
• Analytics Dashboard: Track user confidence scores, behavior changes, and benefits satisfaction

Our Mission: At its core, CoverageCompass is about democratizing financial confidence. We believe that understanding money shouldn't require a finance degree, and choosing benefits shouldn't feel like decoding a foreign language. Financial wellness isn't a luxury; it's a necessity. And we're here to make it accessible, engaging, and genuinely helpful.

Because everyone deserves to feel confident about their financial future.

Built With

• amazon-web-services
• javascript
• node.js
• postman
• python
• react
• supabase