MEDICARE

“Where smart care meets self-care — MEDICARE empowers your well-being.”

Comment

HackHub - Complete Health & Wellness Platform

Inspiration

We were inspired by the need for better healthcare access and mental wellness support. In today's fast-paced world, stress and lifestyle-related health issues are rising. HackHub was born to offer a complete solution — combining health tracking, mental care, and wellness tools into one easy-to-use platform.

What It Does

Features

1. User Authentication & Access

  • Secure sign-up/login forms
  • Authentication via JWT (JSON Web Tokens)
  • Redirects users to a personalized dashboard

2. Dashboard – Health Overview

  • Acts as a central control hub
  • Centralized dashboard with a summary of user activity

3. Smart Health Record

Add/update:

  • Allergies, vitals, doctor visits, lab reports, prescriptions, and emergency contacts
  • Track vital signs over time
  • Data securely stored in MongoDB Atlas

4. Medication Tracker

  • Add medications with dosage, timing, and duration

Features:

  • Current medication list
  • Missed dose alerts
  • Upcoming medication reminders
  • Smart alarms until treatment completion
  • Edit/delete options anytime

5. Health Chat Support

  • Simulated chat with a health assistant
  • Encourages emotional expression
  • Reduces isolation and supports mental well-being

6. Mood Tracker

  • Daily mood logging (e.g., Happy, Sad, Anxious, Calm)
  • Visual mood history with charts
  • Helps identify emotional trends and triggers

7. Mental Lifestyle (Meditation & Self-Care)

Key Features:

  • Guided Meditations (audio/text)
  • Calm Breathing Exercises
  • Zen Garden Game
  • Stress Relief Bubble Game
  • Memory Challenge Game
  • Focus Training
  • Healthy Living Tips
  • Creative Drawing Games

Encourages daily mental wellness, builds positive habits, and makes self-care engaging and fun.

How We Built It

We developed HackHub using React.js for the frontend, following a modular, component-based architecture. Key technologies include:

  • CSS3 for responsive, custom styling
  • HTML5 Canvas for the interactive drawing feature
  • React Router for smooth navigation
  • React Hooks for efficient state management
  • REST APIs to connect the frontend with a secure backend
  • JWT-based authentication with protected routes

Challenges We Faced

  • Integrating a smooth drawing experience using HTML5 canvas
  • Making all features fully responsive on all screen sizes
  • Managing complex interactive state across activities
  • Designing an interface that's both feature-rich and user-friendly
  • Keeping the app fast and responsive under multiple tasks

Achievements

  • Built 6+ interactive mental wellness activities
  • Developed a complete health record and medication tracker
  • Made the platform fully responsive for mobile and desktop
  • Created a customizable drawing board with full control options
  • Integrated multiple tools for daily self-care and stress relief

What We Learned

  • Deepened our skills in React.js and state management
  • Learned HTML5 Canvas for building interactive features
  • Mastered responsive design for health-focused apps
  • Focused on UX for wellness platforms
  • Learned to integrate mental health practices into tech tools

What's Next

  • Real-time health tracking via wearable device integration
  • AI-based personalized health suggestions
  • Telemedicine features for doctor consultations
  • Advanced analytics dashboard with user insights
  • Multi-language support to reach users globally

Built With

Share this project:

Updates