Skip to content

πŸ’Š A sleek, AI-powered health management full-stack web app that syncs your medications, appointments, and health logs across devices in real time. Empower your wellness journey with intelligent reminders, interactive dashboards, appealing & responsive Next.js UI/UX, and a built-in chatbot.

License

Notifications You must be signed in to change notification settings

hoangsonww/SymptomSync-Health-App

Repository files navigation

SymptomSync - A Health Management Web App πŸ’Š

Build with patient care in mind, SymptomSync is a web application designed to help users manage their health and wellness. It provides a comprehensive dashboard for tracking medications, appointments, and health logs, all while ensuring real-time synchronization across devices. With features like medication reminders, appointment tracking, and an AI-powered chatbot, SymptomSync empowers users to take smarter control of their health journey and live healthier lives πŸ’ͺ.

SymptomSync Logo

Note

Developed by David Nguyen and Erica Ocbu at UNC–Chapel Hill. Β© SymptomSync Team, 2025.

TypeScript JavaScript Node.js React Next.js Shadcn/ui TailwindCSS CSS HTML5 Chart.js Framer Motion Supabase PostgreSQL Google AI Vercel Docker Git GitHub npm Webpack Babel ESLint Prettier Postman Jest Shell Makefile AWS Ansible GitHub Actions

Important

Live Web App: https://symptomsync.vercel.app πŸš€

Table of Contents

  1. SymptomSync UI
  2. Features
  3. Tech Stack
  4. Architecture Overview
  5. Installation
  6. Configuration
  7. Supabase Schema
  8. Usage
  9. Video Demo
  10. High-Fidelity Prototype
  11. AWS & Ansible Deployment
  12. GitHub Actions CI/CD
  13. Testing
  14. Contributing
  15. Authors
  16. License
  17. Acknowledgements

SymptomSync UI

The UI of the app was designed with Figma and Tailwind CSS. The design is responsive and mobile-first, ensuring a seamless experience across devices. Below are some screenshots of the app in action:

Home Dashboard

Dashboard Screenshot

Calendar View

Calendar Screenshot

Documents Page

Health Logs Screenshot

Medication Reminders

Medication Reminders Screenshot

Chatbot UI

Chatbot Screenshot

Profile Page

Profile Screenshot

Auth

Auth Screenshot

Dark Mode

Dark Mode Screenshot

Barcode/QR Code Scanning

Barcode Scanning Screenshot

... and so many more! Explore our app to see the full range of features and functionality.

Important

Link to Figma prototype: SymptomSync Figma Prototype

Features

SymptomSync offers a range of features to help users manage their health effectively:

  • Medication Reminders: Schedule, edit, and delete recurring or one‑off med alerts.
    • QR/Barcode Scanning: Scan medication QR codes to auto-fill details. This can save time and reduce errors when entering medication information!
  • Appointment Tracking: Log upcoming appointments with date/time and manage them.
  • Health Logs: Record symptoms, mood, vitals, and notes; visualize trends over time.
  • Dashboard Visualizations: Interactive charts for severity trends, symptom & mood distribution, and more.
  • Real‑Time Updates: Broadcast channel notifications and Supabase Realtime keep all devices in sync instantly.
  • Pagination: Efficient paginated fetching for large datasets (meds, appts, logs).
  • Notifications: In-app reminders for due medications and appointments.
  • ICS Export/Import: Export all events as an ICS calendar file or import from external calendars.
  • Calendar View: Month/week/day/agenda views for all events, with drag-and-drop support.
  • Documents Page: Upload/export and manage documents related to health records, prescriptions, etc.
  • Chatbot: AI-powered chatbot for symptom analysis and health insights.
  • User Profiles: Create and manage user profiles with personalized settings.
  • Medication Schedules: Set up complex medication schedules with reminders.
  • Login/Signup: Secure authentication via Supabase Auth.
  • Reset Password: Password reset functionality for user accounts.
  • Dark Mode: Toggle between light and dark themes for better accessibility.
  • Responsive Design: Mobile-first design with a focus on usability across devices.

Tech Stack

  • Front-End
    • Next.js & React (TypeScript)
    • Tailwind CSS & Shadcn/ui components
    • Framer Motion for animations
    • react-chartjs-2 & Chart.js for charts
    • react-query for data fetching & caching
    • react-calendar for calendar view
    • lucide-icons for icons
  • Back-End / Data
    • Supabase (Auth, Postgres, Realtime, Storage, Cron)
  • Notifications & Sync
    • Supabase Postgres Triggers for real-time updates
    • Supabase Cron Jobs for scheduled reminders
    • Supabase Broadcast Channels & postgres_changes for live updates & notifications

Architecture Overview

Below is a high-level architectural overview of SymptomSync:

β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”                   β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”
β”‚  Next.js Client  β”‚ <––– WebSocket –> β”‚   Supabase Realtime   β”‚
β”‚ - React Pages    β”‚                   β”‚ - postgres_changes    β”‚
β”‚ - UI Components  β”‚                   β”‚ - broadcast channels  β”‚
β”‚ - TailwindCSS    β”‚                   β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜
β”‚ - React Query    β”‚
β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜
         ↑
         β”‚
         β”‚ REST
         ↓
β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”
β”‚   Supabase API   β”‚
β”‚ - Auth           β”‚
β”‚ - Functions      β”‚
β”‚ - Database       β”‚
β”‚ - Storage        β”‚
β”‚ - Cron Jobs      β”‚
β”‚ - Triggers       β”‚
β”‚ - RLS Policies   β”‚
β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜
  • Supabase: The backend is powered by Supabase, which provides a Postgres database, authentication, and real-time capabilities.
    • Each table is protected by Row Level Security (RLS) policies to ensure user data isolation, so that users can only access/update/delete their own data.
  • Realtime Broadcast: Any create/update/delete triggers both a postgres_changes subscription and a broadcast message so all open clients show a toast notification.
  • Cron Jobs: Scheduled jobs (via Supabase Cron) that scan upcoming reminders and dispatch notifications every second.

Caution

If the window loses focus, or when you have a slow connection, the reminder notifications may not show up. Also, the cron jobs are not guaranteed to run at the exact time specified, but they will run within a few seconds of the scheduled time.

  • Postgres Triggers: Database triggers that listen for changes in the medication_reminders, appointment_reminders, and health_logs tables, and send messages to the broadcast channel.
    • There is also a trigger on the auth.users table to create a corresponding user_profiles entry when a new user signs up.
  • AI Chatbot: The chatbot uses the Google AI API to analyze user symptoms and provide health insights.

Installation

  1. Clone the repo

    git clone https://github.com/hoangsonww/SymptomSync-Health-App.git
    cd SymptomSync-Health-App
  2. Open the project in your favorite code editor (e.g., VSCode). When prompted by your IDE, select "Open in Container" to open the project in a Docker container. Alternatively, if using VSCode, you can use the Remote - Containers extension to open the project in a container.

Caution

This is very important as the project uses Docker to run the database and other services. If you don't have Docker installed, please install it first.

  1. Install dependencies (Remember to use --legacy-peer-deps if you encounter issues with React versions being incompatible with Shadcn/ui)
    npm install --legacy-peer-deps
  2. Copy .env.example β†’ .env.local and fill in your Supabase credentials
    NEXT_PUBLIC_SUPABASE_URL=…
    NEXT_PUBLIC_SUPABASE_ANON_KEY=…
    NEXT_PUBLIC_GOOGLE_AI_API_KEY=…
  3. Run the dev server
    npm run dev

Configuration

  • Supabase

    • Configure Auth settings in the Supabase dashboard
      • Enable email/password signups
      • Uncheck the confirmation email option for now
    • Create tables: user_profiles, medication_reminders, appointment_reminders, health_logs, files, and user_notifications and enable Realtime for all of them.
      • Set relationships between tables using Foreign Keys.
    • Add RLS policies for user isolation to the tables. All tables should have the following policies or similar:
      • select: auth.uid() = user_profile_id
      • insert: auth.uid() = user_profile_id
      • update: auth.uid() = user_profile_id
      • delete: auth.uid() = user_profile_id
    • Set up Cron jobs to run send_reminders() stored procedure daily/hourly or even every second.
      • To do so, you might need to enable the pg_cron extension in your Supabase project.
    • Create Postgres Functions to handle the logic for sending notifications and reminders
      • send_reminders(): Check for upcoming reminders and send notifications
      • create_user_profile(): Create a new user profile when a user signs up
    • Define Database Triggers to write to broadcast channels on insert/update/delete and to create a new user profile on signup
    • Set up Storage for file uploads. Create 2 buckets: avatars and documents
  • Environment

    • .env.local holds all keys (refer to .env.example)
    • Default port: 3000

Supabase Schema

SymptomSync uses the following tables in Supabase:

  • user_profiles
  • medication_reminders
  • appointment_reminders
  • health_logs
  • files
  • user_notifications
  • auth.users (Supabase Auth table)
  • auth.refresh_tokens (Supabase Auth table)
  • auth.user_attributes (Supabase Auth table)
  • auth.user_mfa (Supabase Auth table)
  • and more...

These tables are used to store user profiles, medication reminders, appointment reminders, health logs, uploaded files, and user notifications. The schema is designed to ensure data integrity and security through Row Level Security (RLS) policies.

Below is a diagram of the Supabase schema used in SymptomSync:

Supabase Schema Diagram

Usage

  1. Sign up / log in via Supabase Auth.
  2. On the Home dashboard, add new medications, appointments, or health logs.
  3. View interactive charts - severity trends, symptom distribution, appointment patterns.
  4. Navigate to Calendar to see a month/week/day/agenda view of all events, add events, or even import/export ICS.
  5. All changes sync in real‑time across open tabs/devices; cron‑driven reminders notify you via in-app notifications.
  6. Use the Documents page to upload/export health records, prescriptions, etc.
  7. Chat with the AI Chatbot for symptom analysis and health insights.
  8. Toggle between light and dark mode for better accessibility.
  9. View and manage your profile. You can also vies other users' profiles.
  10. Visit the Medication Schedules page to view/edit a complete list of your medications and their schedules.

Contributing

  1. Fork & branch: git checkout -b feature/awesome
  2. Develop something awesome
  3. Install & format: npm install && npm run format
  4. Commit & PR with description
  5. Wait for review and merge

Authors

A big thank you to our team members for their hard work and dedication:

Video Demo

Check out our demo video showcasing the app's features and functionality: Link to Demo Video

Demo Video Thumbnail

Tip

This video might not be comprehensive and cover all features of our app - so please feel free to give our live app at symptomsync.vercel.app a try to test out all the features!

High-Fidelity Prototype

Link to Figma prototype: SymptomSync Figma Prototype

Our high-fidelity prototype showcases the app's design and user experience. You can interact with the prototype to get a feel for how the app works.

Figma Prototype Thumbnail

AWS & Ansible Deployment

SymptomSync now fully supports Amazon Web Services (AWS) deployment alongside Vercel if you choose to host your own instance on AWS! Its deployment infra is defined in the aws/ folder (AWS CDK in JavaScript) and can be deployed via the Ansible playbook in ansible/. This setup will provision Cognito, DynamoDB, S3, Lambdas, API Gateway and a scheduled EventBridge rule - and automate it all via Ansible.

Directory Layout

.
β”œβ”€β”€ aws/           # CDK v2 stack (JavaScript)
β”‚   β”œβ”€β”€ bin/
β”‚   β”œβ”€β”€ lib/
β”‚   β”œβ”€β”€ lambda/
β”‚   β”œβ”€β”€ package.json
β”‚   β”œβ”€β”€ cdk.json
β”‚   └── .gitignore
└── ansible/       # Ansible deployment playbook
β”œβ”€β”€ ansible.cfg
β”œβ”€β”€ inventory.ini
└── deploy-infrastructure.yml

AWS CDK

  1. Bootstrap & Deploy
 cd aws
 npm install
 cdk bootstrap
 cdk deploy --require-approval never
  1. What’s created

    • Cognito User Pool & App Client
    • DynamoDB tables for profiles, meds, appts, logs, notifications
    • S3 buckets (avatars, documents)
    • Lambda functions: REST API, reminder processor, chatbot, presigned-URL
    • API Gateway (REST) + Cognito authorizer
    • EventBridge rule to run reminders every minute

Ansible Playbook

  1. Run the playbook

    cd ansible
    ansible-playbook deploy-infrastructure.yml
  2. What it does

    • Installs Node.js, AWS CLI, AWS CDK on the host
    • Verifies your GOOGLE_AI_API_KEY env var
    • Bootstraps CDK in your AWS account
    • Deploys the entire SymptomSync stack non-interactively

Ensure your AWS credentials (via AWS_PROFILE or AWS_ACCESS_KEY_ID/AWS_SECRET_ACCESS_KEY) and GOOGLE_AI_API_KEY are set in your environment before running.

GitHub Actions CI/CD

We have set up GitHub Actions for continuous integration and deployment. The workflow runs on every push to the main branch and performs the following steps:

  • Installs dependencies
  • Runs tests
  • Builds the application
  • Deploys to Vercel
  • Deploys the AWS stack using the Ansible playbook
  • Notifies the team on success/failure

For more details, check out the .github/workflows/ci.yml file in the repository.

GitHub Actions CI/CD Workflow

Testing

We have implemented unit tests using Jest to ensure the reliability of our application. The tests cover various components and functionalities, including:

  • User authentication
  • Data fetching and state management
  • API integration
  • UI components

To run the tests, use the following command in the web directory:

npm run test

License

MIT License - Feel free to use, modify, and distribute this code as you wish. Contributions are welcome!

Please ensure to follow the Contributing Guidelines if you wish to contribute to this project.

Acknowledgements

We would like to acknowledge the following resources and libraries that made this project possible:

Contact

For any questions, feedback, or contributions, feel free to open an issue here or reach out to us via GitHub Discussions. We appreciate your interest in SymptomSync and look forward to hearing from you!


Thank you for checking out SymptomSync! We hope it helps you manage your health and wellness effectively. If you have any questions or feedback, feel free to reach out! πŸ’Š

πŸ” Back to Top

About

πŸ’Š A sleek, AI-powered health management full-stack web app that syncs your medications, appointments, and health logs across devices in real time. Empower your wellness journey with intelligent reminders, interactive dashboards, appealing & responsive Next.js UI/UX, and a built-in chatbot.

Topics

Resources

License

Code of conduct

Security policy

Stars

Watchers

Forks

Packages

 
 
 

Contributors 2

  •  
  •