# Project export: Health Pass

This document was generated by HackStack to give an AI agent context about a hackathon project. Sections are labeled with their provenance; content marked as truncated was cut to keep this document small.

## Project metadata

- Hackathon: TreeHacks 2024
- Tagline: Making personal health data transfer seamless and secure
- Devpost: https://devpost.com/software/health-pass-wvokdn
- GitHub: https://github.com/Johntron1219/healthpass
- Team: 4 GitHub contributor(s) — Billy Gao (146 commits), SMandadi9 (56 commits), Pratik-7331-sjsu (12 commits), Johntron1219 (2 commits)

## Devpost submission (written by the team)

### Inspiration

Currently, personal health data transfer is a very tedious process. It could hardly be transferred between different medical systems. Patients and doctors would have to go through heavy paperwork which often takes up a lot of time. Moreover, the healthcare industry is dominated by big firms which would monopolize data. After having first-hand experience in the medical industry and understanding the pain of personal health record transfer, we were inspired to build Health Pass.

### What it does

Health Pass is a web application to facilitate seamless and secure transfer of personal health records. It transfers different aspects of your health record with two clicks to your trusted healthcare service provider. The process is extremely simple and it could be used by people of all ages. The data would no longer pass through a centralized system, ensuring both convenience through speed and privacy through security.

### What's next

We aim to continue building Health Pass to serve the wider community in need of a personal health record transfer tool. Looking forward, we will be implementing convenience features such as link sharing and NFC to make health record sharing even faster. We aim to design health pass as a user-friendly application, not only targeted for the technologically savvy but the wider population. We would integrate security web3 tools to ensure data security and user privacy. We would also be looking in directions such as the adoption of AI, with the use of chatbots facilitating the user experience. Ultimately, we hope to create a smooth and silky personal health record transfer product.

## README (from the GitHub repository)

#healthpass
#healthpass is a Web App Storing and forwarding relevant health history
#healthpass provides service to both patient and provider side in a healthcare system


## Detected evidence (automated analysis)

Indexed codebase: 63 recognized source files, 3072 KB.
- CSS (language) — detected in the code
- Firebase (technology) — detected in the code
- HTML (language) — detected in the code
- JavaScript (language) — detected in the code
- React (technology) — detected in the code
- MongoDB (technology) — claimed on Devpost, not found in the code
- Node.js (technology) — claimed on Devpost, not found in the code

## Codebase structure (from repository index)

### Files (69 of 69)

```
.DS_Store
package.json
README.md
repo/.gitignore
repo/package.json
repo/public/index.html
repo/public/manifest.json
repo/public/robots.txt
repo/README.md
repo/src/App.css
repo/src/App.js
repo/src/firebase.js
repo/src/index.css
repo/src/index.js
repo/src/patient/Backend/addPatientField.js
repo/src/patient/Backend/authorizationRequestHandler.js
repo/src/patient/Backend/connectionHandler.js
repo/src/patient/Backend/createPatient.js
repo/src/patient/Backend/deletePatientField.js
repo/src/patient/Backend/getAuthRequests.js
repo/src/patient/Backend/getRecords/getAllergies.js
repo/src/patient/Backend/getRecords/getConditions.js
repo/src/patient/Backend/getRecords/getImmunizations.js
repo/src/patient/Backend/getRecords/getLabRecords.js
repo/src/patient/Backend/getRecords/getMedications.js
repo/src/patient/Backend/getRecords/getPatientData.js
repo/src/patient/Backend/getRecords/getProcedures.js
repo/src/patient/Backend/getRecords/util.js
repo/src/patient/Backend/loginAuthorization.js
repo/src/patient/Backend/npisearch.js
repo/src/patient/Backend/updatePatientField.js
repo/src/patient/Views/ApprovalsScreen.css
repo/src/patient/Views/ApprovalsScreen.js
repo/src/patient/Views/getRecord.js
repo/src/patient/Views/PatientHomeScreen.js
repo/src/patient/Views/PatientLoginPage.css
repo/src/patient/Views/PatientLoginPage.js
repo/src/patient/Views/PatientProfileScreen.css
repo/src/patient/Views/PatientProfileScreen.js
repo/src/patient/Views/PatientRegisterPage.js
repo/src/patient/Views/patientScreen.js
repo/src/patient/Views/ptscrnbs.js
repo/src/patient/Views/testfetch.js
repo/src/provider/Backend/authorizationRequestHandler.js
repo/src/provider/Backend/createProvider.js
repo/src/provider/Backend/fetchPatientData.js
repo/src/provider/Backend/fetchproviderdata.js
repo/src/provider/Backend/getProviderData.js
repo/src/provider/Backend/loginAuthorization.js
repo/src/provider/Backend/savePatientEdits.js
repo/src/provider/View/PatientDetailScreen.js
repo/src/provider/View/PatientEditForm.js
repo/src/provider/View/PatientListScreen.js
repo/src/provider/View/Provider.css
repo/src/provider/View/providerCSS/ProviderHomeScreen.css
repo/src/provider/View/providerCSS/ProviderLoginPage.css
repo/src/provider/View/providerCSS/ProviderPatientEditScreen.css
repo/src/provider/View/providerCSS/ProviderProfileScreen.css
repo/src/provider/View/ProviderHomeScreen.js
repo/src/provider/View/ProviderLoginPage.js
repo/src/provider/View/ProviderPatientEditScreen.js
repo/src/provider/View/ProviderProfileScreen.js
repo/src/provider/View/ProviderRegisterPage.js
repo/src/provider/View/ProviderScreen.js
repo/src/provider/View/React App_files/bundle.js
repo/src/provider/View/RequestsScreen.js
repo/src/reportWebVitals.js
repo/src/testing/App.test.js
repo/src/testing/setupTests.js
```

### Dependencies

- package.json: firebase@^10.8.0
- repo/package.json: @testing-library/jest-dom@^5.17.0, @testing-library/react@^13.4.0, @testing-library/user-event@^13.5.0, react@^18.2.0, react-dom@^18.2.0, react-scripts@^5.0.1, web-vitals@^2.1.4

### Recent commits (newest first)

- final pushes
- pushing final version
- merge
- fixing patient edit page
- Create Provider.css
- merge
- nit
- Update PatientEditForm.js
- Update PatientEditForm.js
- fixing merge
- Update PatientListScreen.js
- Update PatientListScreen.js
- Update PatientListScreen.js
- 1
- Merge branch 'main' of https://github.com/Johntron1219/healthpass
- Update PatientListScreen.js
- fixing changes
- Merge branch 'main' of https://github.com/Johntron1219/healthpass
- patient edit
- Merge branch 'main' of https://github.com/Johntron1219/healthpass

## Key source files (fetched from GitHub, selected and truncated for size)

### package.json

```
{
  "dependencies": {
    "firebase": "^10.8.0"
  }
}

```

### repo/package.json

```
{
  "name": "patient",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "^5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

```

### repo/src/index.js

```javascript
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

```

### repo/src/App.js

```javascript
// App.js
import React, { useState } from 'react';
import './App.css';
import PatientScreen from './patient/Views/patientScreen';
import ProviderScreen from './provider/View/ProviderScreen';
import ProviderLoginPage from './provider/View/ProviderLoginPage';
import LoginPage from './patient/Views/PatientLoginPage';
import PatientRegisterPage from './patient/Views/PatientRegisterPage';
import logo from './public/Logo.png'; // Import the logo image
import ProviderRegisterPage from './provider/View/ProviderRegisterPage';

function App() {
  const [currentScreen, setCurrentScreen] = useState('home');

  const [currentID, setCurrentID] = useState(null);

  const renderHomeScreen = () => {
    return (
      <div className="home-screen">
        <div className="logo-container">
          <img src={logo} alt="Health Pass Logo" className="logo" />
        </div>
        <h1 className="welcome-text">Welcome to Health Pass</h1>
        <p className="tagline">Making personal health data transfer seamless and secure.</p>
        <div className="buttons-container">
          <button className="login-button patient" onClick={() => setCurrentScreen('patientLogin')}>
            Login as a Patient
          </button>
          <button className="login-button provider" onClick={() => setCurrentScreen('providerLogin')}>
            Login as a Provider
          </button>
        </div>
      </div>
    );
  };

  return (
    <div className="App">
      {currentScreen === 'home' && renderHomeScreen()}
      {currentScreen === 'patientLogin' && <LoginPage setCurrentScreen={setCurrentScreen} setCurrentID={setCurrentID}/>}
      {currentScreen === 'providerLogin' && <ProviderLoginPage setCurrentScreen={setCurrentScreen} setCurrentID={setCurrentID}/>}
      {currentScreen === 'provider' && <ProviderScreen setCurrentScreen={setCurrentScreen} providerNPI={currentID}/>}
      {currentScreen === 'patient' && <PatientScreen setCurrentScreen={setCurrentScreen} patientID={currentID} />}
      {currentScreen === 'patientRegister' && <PatientRegisterPage setCurrentScreen={setCurrentScreen}/>}
      {currentScreen === 'providerRegister' && <ProviderRegisterPage setCurrentScreen={setCurrentScreen} providerNPI={currentID}/>}
    </div>
  );
}

export default App;
```

### repo/src/reportWebVitals.js

```javascript
const reportWebVitals = onPerfEntry => {
  if (onPerfEntry && onPerfEntry instanceof Function) {
    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
      getCLS(onPerfEntry);
      getFID(onPerfEntry);
      getFCP(onPerfEntry);
      getLCP(onPerfEntry);
      getTTFB(onPerfEntry);
    });
  }
};

export default reportWebVitals;

```

### repo/src/index.css

```css
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

```

### repo/src/firebase.js

```javascript
// Import the functions you need from the SDKs you need
import firebase from 'firebase/compat/app'
import  'firebase/compat/firestore'
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
  apiKey: "AIzaSyC_NG3Tgcy5BfhLGpNtT5aJSXIxoFj3SXY",
  authDomain: "healthpass123.firebaseapp.com",
  projectId: "healthpass123",
  storageBucket: "healthpass123.appspot.com",
  messagingSenderId: "56776273688",
  appId: "1:56776273688:web:f1fac79cf143b49a7bf86d",
  measurementId: "G-QLMGMGCMKY"
};

// Initialize Firebase
const app = firebase.initializeApp(firebaseConfig);
export const database = firebase.firestore();


```

### repo/public/index.html

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>

```

### repo/src/App.css

```css
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700&display=swap');

/* Reset some default styles and fonts */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Nunito', sans-serif; /* Updated font for a more modern look */
}

body {
  background-color: #f0f2f5; /* Light background for less strain */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* App Component */
.App {
  text-align: center;
  background-color: #f4f4f4; /* Consistent background color */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* Home Screen */
.home-screen {
  padding: 40px; /* Increased padding */
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 600px; /* Increased max-width */
  margin: 20px auto; /* Centered margin for auto left and right */
}

.logo-container {
  margin-bottom: 40px; /* Increased margin */
}

.logo {
  max-width: 400px; /* Increased logo size */
  height: auto;
}

.welcome-text {
  color: #333;
  font-size: 30px; /* Increased font size */
  margin-bottom: 20px; /* Increased margin */
}

.tagline {
  color: #555;
  margin-bottom: 40px; /* Increased margin */
}

.buttons-container {
  display: flex;
  gap: 20px; /* Increased gap */
  flex-wrap: wrap;
  justify-content: center;
}

.login-button {
  padding: 15px 30px; /* Increased padding */
  border: none;
  border-radius: 25px; /* Slightly more rounded */
  cursor: pointer;
  font-size: 20px; /* Increased font size */
  color: white;
  transition: background-color 0.3s;
  margin: 10px; /* Added margin to separate buttons */
}

.login-button.patient {
  background-color: #28a745;
}

.login-button.provider {
  background-color: #17a2b8;
}

.login-button:hover {
  opacity: 0.85; /* Slightly less transparent on hover for a subtle effect */
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

.home-screen, .patient-screen, .provider-screen, .patient-home, .patient-profile, .approvals {
  margin: 20px;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 8px;
}

.Home-button, .A-pink-button, .Small-blue-button, .Small-orange-button, .Smaller-orange-button {
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 4px;
}

.Home-button {
  background-color: #4CAF50; /* Green */
  font-size: 19px;
  font-weight: bold;
}

.A-pink-button {
  background-color: #C31818; /* Pink */
  font-size: 16px; /* Same font size as Home-button */
  margin-top: 20px; /* Extra margin above buttons for spacing */
}

.Small-blue-button {
  background-color: #008CBA; /* Blue */
  padding: 10px 20px; /* Smaller padding */
  font-size: 16px; /* Slightly smaller font size */
  font-weight: bold;
}

.Smaller-blue-button {
  border: none;
  color: white;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
  border-radius: 4px;
  margin: 2px 2px;
  background-color: #251dc5; /* Blue */
  padding: 8px 10px; /* Smaller padding */
  font-size: 10px; /* Slightly smaller font size */
}

.Small-orange-button {
  background-color: #de9c0d; /* Blue */
  padding: 10px 20px; /* Smaller padding */
  font-size: 16px; /* Slightly smaller font size */
  font-weight: bold;
}

.Smaller-orange-button {
  background-color: #de9c0d; /* Blue */
  padding: 8px 16px; /* Smaller padding */
  font-size: 14px; /* Slightly smaller font size */
}

.Profile-photo {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  margin: 20px;
}

.patient-screen-footer, .buttons-container {
  margin-top: 20px;
}

/* Enhanced User Friendliness */
.profile-item p, .profile-item h1, .profile-item h2, .request-item, .approval-history-item {
  margin: 5px 0; /* Reduced margin for a tighter look */
}

.edit-date {
  font-size: 0.8rem; /* Smaller font size for edit dates */
  color: #6c757d; /* Grey color for less prominence */
}

.patient-profile, .approvals-screen, .patient-info, .joke-column {
  background-color: #ffffff; /* White background for sections */
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); /* Adding shadow for depth */
  border-radius: 10px; /* Rounded corners */
  padding: 20px;
  max-width: 600px; /* Limiting width for better readability */
  margin: 20px auto; /* Centering profile and columns */
}

.profile-name, h1, h2 {
  color: #0056b3; /* Deep blue for names and headers */
}

p {
  color: #555; /* Slightly lighter text for regular paragraphs */
}

.joke-column {
  background-color: #f0f9ff; /* Lighter background for the joke column */
  border: 1px solid #bde0fe; /* Light blue border for emphasis */
}

.edit-button {
  background-color: #ffc107; /* Yellow color for visibility */
  color: black; /* Black text for contrast */
  border: none;
  padding: 5px 10px; /* Smaller than primary action buttons */
  margin-left: 10px; /* Space from the text */
  font-size: 0.8rem; /* Smaller font size */
  cursor: pointer;
  border-radius: 4px; /* Consistent with other buttons */
}

.edit-button:hover {
  background-color: #e0a800; /* Slightly darker on hover */
}

/* Provider Profile Styles */
.provider-profile {
  background-color: #ffffff; /* White background for sections */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  padding: 20px;
  max-width: 700px;
  margin: 30px auto;
  text-align: left;
}

.profile-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.Profile-photo {
  width: 120px; /* Adjusted for provider profile */
  height: 120px;
  border-
[truncated — 234 more characters]
```

### repo/src/testing/setupTests.js

```javascript
// jest-dom adds custom jest matchers for asserting on DOM nodes.
// allows you to do things like:
// expect(element).toHaveTextContent(/react/i)
// learn more: https://github.com/testing-library/jest-dom
import '@testing-library/jest-dom';

```

[52 more indexed source files omitted to keep this export small. The full file list is in the Codebase structure section above.]