Your Health Ally

Everyone deserves to be heard.

🔭 GitHub Repository

View Demo (TBD) 🪟 · 🪲 Report a Bug 🪲 · 🦋 Request a Feature 🦋

1. About The Project
   • Description
   • Features
     • Basic Features
     • AI Chatbot for Informed Queries
     • Interactive Glossary for Health Literacy
     • PDF Conversion for Record Keeping
   • Stack Overview
     • Prerequisites
     • Dependency Versions
     • Installation
   • Branches
   • Dev Notes
2. Getting Started
   • Languages and Runtimes
   • Frameworks and Libraries
   • Linters and Formatters
   • APIs and SDKs
   • Backing Services
   • Deployment Service
   • DevOps
3. NPM Scripts
   • Development
   • Errors
   • Build
   • Start
   • Prisma
4. Usage
5. Contributors
6. License
7. Acknowledgments
   • Design Tools
   • Project Management Tools
   • Tutorials

About the Project

Description

Your Health Ally is an app designed to transform the way our users approach and manage their health by:

• Empower users to advocate for their well-being
• Provide comprehensive information, resources, and tools, such as,
  • Types of doctors to see
  • Questions to bring to doctor
  • A checklist to prepare for office or virtual visits

A study in 2022 found that 52% of individuals in the U.S. feel their symptoms are ignored, dismissed, or not believed when seeking medical treatment; 50% of those respondents also reported that "a healthcare provider assume(ed) something about (them) without asking." ¹

These statistics increase depending on the patient's race/ethnicity, sexual orientation (LGBTQIA+ community), gender identity (female, transgender and non-binary individuals), chronic health conditions, or disabilities. ¹

Additionally, the Journal of General Internal Medicine found that on average, patients get 11 seconds to explain the reason for their visit before they are interrupted by their doctors ². This can lead to delays in proper diagnosis and treatment for patients.

^{3 4 5}

Additionally, proficiency in health literacy improves health status, reduces health-service use and costs, and extends lives.

“The degree to which individuals have the capacity to obtain, process, and understand basic health information and services needed to make appropriate health decisions” ⁶

Features

Basic Features

• Responsive design
• Intuitive navigation
• Authentication

AI Chatbot for Informed Queries

Users can input health-related questions into our ChatBot (powered by OpenAI) and receive tailored responses.
Responses may include:

• Lists of questions to bring to the doctor
• Suggestions for potential types of healthcare providers
• Readiness checklist before going to an appointment

Currently, we have prompt-engineered our ChatBot with the following text:

You are an intelligent advisor that can provide information regarding people's health. You answer their questions about health-related conditions and symptoms, and what type of doctors they may want to see, and what types of questions to bring to the doctor with them and provide them with readiness checklists for appointments.

Stretch-goal: Machine learning and model training. (Read more.

Interactive Glossary for Health Literacy

Our integrated glossary defines medical, health-related and other unfamiliar terms to promote understanding and address health literacy concerns.

Health Literacy is defined by the National Library of Medicine as, “The degree to which individuals have the capacity to obtain, process, and understand basic health information and services needed to make appropriate health decisions” ⁶

PDF Conversion for Record Keeping

PDF conversion allows user's chats to be savable and printable, ensuring they have tangible records for their healthcare journey. Note: Users have the option to delete their chats should they choose to.

Stack Overview

Languages and Runtimes

Frameworks and Libraries

Linters and Formatters

APIs and SDKs

Backing Services

Deployment Service

DevOps

Dev Notes

This is a T3 Stack project bootstrapped with create-t3-app.

• Documentation
• Tutorials
• GitHub Repository
• T3 Deployment Guides:
  • Vercel
  • Netlify
  • Docker for more information.

Mantine Imports

1. Utilizing Mantine v6.0.21

2. All /hooks, /form and /core components and their props, or any React hooks must be imported at the top of each file. Example below:

  import { useState } from 'react';
  import { useInputState, useMediaQuery } from '@mantine/hooks';
  import { useForm } from '@mantine/form';
  import { TextInput, NumberInput, Group, Text, ActionIcon } from '@mantine/core';

3. Import Tabler icons as you would import any icons in react.

import { IconBrandLinkedin } from "@tabler/icons-react";

( 🔝 )

Getting Started

Prerequisites

1. Nodejs

• Run node -v in the terminal to check if you already have Node.js installed.
• If it's installed, it will show the installed version.
• Follow Node.js docs to download.
• Once downloaded, run node -v command to double check it's installed.

2. NPM

• Run npm -v in the terminal to check if you already have npm installed.
• If it's installed, it will show the installed version.
• Follow npm docs to create an account and to download.
• Once downloaded, run npm -v command to double check it's installed.
  • Differences Between Yarn and NPM

3. MongoDB

• Access to a MongoDB 4.2+ server with a replica set deployment.
  • Prisma recommends using MongoDB Atlas.
• The MongoDB database connector uses transactions to support nested writes.
  • Transactions require a replica set deployment.
  • The easiest way to deploy a replica set is with Atlas. It's free to get started.

Dependency Versions

Installation

1. Clone repository to your local computer and open in a source code editor.

2. Download dependencies: npm install or npm i.

3. Double check you have a .gitignore file in the root folder.

• If there isn't a `.gitignore', follow these steps to make one:

  • Run touch .gitignore.
  • Copy and paste the GitHub/gitignore/Node.gitignore template into your new .gitignore file
    • Make sure the following are included

# macOS
.DS_Store

# LinuxOS
.*.swp

# Windows
*.pyc

# Dependency directories
node_modules/
jspm_packages/

# TypeScript cache
*.tsbuildinfo

# dotenv environment variable files
.env
.env*

4. Set up Clerkjs developer account for authentication.

• Create an account with Clerkjs.
• Install @clerk/nextjs in the root folder: npm install @clerk/nextjs
• Set up your environment keys in .env.local in the root folder:

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=​pk_test_example
CLERK_SECRET_KEY=​sk_test_example

• Refer to the Clerkjs Quickstart Guide with Nextjs for more information.

5. Install Prisma: Run npm install prisma --save-dev

• After installation, run npm run postinstall: It reads your Prisma schema and generates Prisma Client JS, a type-safe database client for your application.

6. Configure MongoDB connection:

• In your .env file, set up MongoDB connection string from MongoDB Atlas
• This establishes a connection with MongoDB cluster (DATABASE_URL).

7. View Tables (collections) in Prisma Studio:

• After installing Prisma and configuring MongoDB connection string, you can use Prisma Studio to view the collections.
• Run npm run db:studio

( 🔝 )

NPM Scripts

Development

• npm run dev: starts the dev server at http://localhost:3000/
• npm run db:push: updates the database schema to match the Prisma schema, without using migrations. It's mostly used in development.

Errors

• npm run lint: runs ESLint to catch errors
  • code must pass ESLinst error check before build

Build

• npm run build: generates an optimized version of the app for production

Start

• npm run start: starts the app while in production mode
  • app must be compiled with build before start

Prisma

• npm run postinstall: run after the package installation. It reads your Prisma schema and generates Prisma Client JS, a type-safe database client for your application.

• npm run db:studio: opens Prisma Studio, which is a visual interface for viewing and editing data in your database.

( 🔝 )

Usage

Use this space to show useful examples of how a project can be used. Additional screenshots, code examples and demos work well in this space. You may also link to more resources.

For more examples, please refer to the Documentation

( 🔝 )

Contributors

Contact Ali

Portfolio | GitHub | Medium

Contact Victoria

Portfolio | GitHub | Medium

( 🔝 )

License

( 🔝 )

Acknowledgements

Design Tools

Canva
Excalidraw
Milanote

Project Management Tools

ClickUp
Slack

Tutorials

Best README
Emojipedia
Img Shields
GitHub Emoji Cheat Sheet
How to Implement a Tooltip to Share Selected Text With Vanilla JavaScript
Markdown Cheat Sheet
Nextjs 14 Custom Chatbot

( 🔝 )

Footnotes

1. Harris poll: Many patients feel ignored or doubted when seeking medical treatment . MITRE. (2022, December 20). https://www.mitre.org/news-insights/news-release/mitre-harris-poll-many-patients-feel-ignored-or-doubted#:~:text=MCLEAN%2C%20Va.%2C%20%26%20BEDFORD,believed%E2%80%9D%20when%20seeking%20medical%20treatment ↩ ↩²

2. Ten early signs. Parkinson’s Foundation. (n.d.). https://www.parkinson.org/understanding-parkinsons/10-early-signs ↩

3. Ibrahim, A. (2021, September 1). Signs of ms may start five years before diagnosis. MS International Federation. https://www.msif.org/news/2018/08/26/signs-of-ms-may-start-five-years-before-diagnosis/ ↩

4. Lupus facts and statistics. Lupus Foundation of America. (n.d.). https://www.lupus.org/resources/lupus-facts-and-statistics#:~:text=Lupus%20symptoms%20can%20also%20be,first%20notice%20their%20lupus%20symptoms ↩

5. Yale Medicine. (2024, January 19). Endometriosis. Yale Medicine. https://www.yalemedicine.org/conditions/endometriosis#:~:text=On%20average%2C%20women%20in%20the,are%20found%20to%20 ↩

6. Singh Ospina, N., Phillips, K.A., Rodriguez-Gutierrez, R. et al. Eliciting the Patient’s Agenda- Secondary Analysis of Recorded Clinical Encounters. J GEN INTERN MED 34, 36–40 (2019). https://doi.org/10.1007/s11606-018-4540-5 ↩ ↩²