your-health-ally: A TypeScript repository from ATMartin

Your Health Ally

Everyone deserves to be heard.

Deployed App (TBD) 🔭 GitHub Repository

View Demo · Report a Bug · Request a Feature

About The Project
- Description
- Features
- Stack
- Branches
- Dev Notes
Getting Started
- Prerequisites
- Installation
NPM Scripts
- Development
- Build
- Start
- Test
- Other Scripts
Usage
Contributors
License
Acknowledgments

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.

³ ⁴ ⁵ ⁵

Features

Responsive design
Intuitive navigation
Authentication
AI Chat Bot
Interactive Glossary
Chat-to-PDF Conversion

Stack

Languages and Runtimes

Frameworks & Libraries

Note:

Repo set up with Mantine Next App template for app router
PostCSS setup with mantine-postcss-preset
Prettier vs Lint

APIs

Backing Services

Deployment Service

DevOps

Dev Notes

Mantine Imports

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';

Import Tabler icons with the ActionIcon icon component.

import { ActionIcon } from '@mantine/hooks';
import { IconBrandLinkedin } from "@tabler/icons-react";

( 🔝 )

Getting Started

Prerequisites

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.

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

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.

Installation

Clone repository to your local computer.
Once cloned, open the repo in your terminal.
Download dependencies: npm install or npm i.
Set up your local .gitignore file in the root folder.

Create file: touch .gitignore
Click through GitHub's gitignore templates. I suggest the Node template.
If anything, make sure these are included in your file:

# macOS
.DS_Store

# LinuxOS
.*.swp

# Windows
*.pyc

# Dependency directories
node_modules/
jspm_packages/

# TypeScript cache
*.tsbuildinfo

# dotenv environment variable files
.env
.env.development.local
.env.test.local
.env.production.local
.env.local

Set up Clerkjs 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

For more information, refer to the Clerkjs Quickstart Guide with Nextjs.

Install Prisma: Run npm install prisma --save-dev
Configure MongoDB connection:

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

View Tables (collections) in Prisma Studio:

After installing Prisma and configuring MongoDB connection string, you can use Prisma Studio to view the collections.
Run npx prisma studio

( 🔝 )

NPM Scripts

Development

dev starts the dev server at http://localhost:3000/

Build

build - generates an optimized version of the app for production
analyze – analyzes application bundle with @next/bundle-analyzer

Start

start - starts the app while in production mode
- app must be compiled with build before start

Test

typecheck – checks TypeScript types
lint – runs ESLint to catch errors
prettier:check – checks files with Prettier
jest – runs jest tests
jest:watch – starts jest watch
test – runs jest, prettier:check, lint and typecheck scripts

Note:

ESLint setup with eslint-config-mantine
Jest setup with React Testing Library

Other Scripts

prettier:write – formats all files with Prettier

( 🔝 )

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

( 🔝 )