# Project export: HealthHub

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: CruzHacks 2024
- Tagline: Revolutionize healthcare access with our innovative project! Using the ChatGPT API, we've crafted a free health advice web application that puts personalized wellness insights at your fingertips.
- Devpost: https://devpost.com/software/healthhub-17lxzc
- GitHub: https://github.com/jonathanguyen21/healthgpt
- Team: 2 GitHub contributor(s) — jonathanguyen21 (23 commits), Aaron Le (9 commits)

## Devpost submission (written by the team)

### Inspiration

The inspiration behind HealthHub stems from our firm belief that healthcare is a fundamental human right. Recognizing the global challenge of unequal access to healthcare, we set out to create a solution that addresses this pressing issue. HealthHub is driven by a passion for making quality health advice accessible to everyone, irrespective of their background or circumstances.

### What it does

HealthHub is a groundbreaking project that offers free healthcare advice to individuals worldwide. Leveraging the ChatGPT API, our web application provides a platform where users can access personalized health insights and guidance. Whether it's preventive care, wellness tips, or general health queries, HealthHub strives to be a reliable resource for individuals seeking information to improve their well-being.

### How we built it

The foundation of HealthHub lies in the integration of the ChatGPT API. Our development process involved leveraging this powerful tool to create an intuitive and user-friendly web application. We focused on ensuring that the platform is accessible to a diverse audience, making healthcare advice readily available to anyone with an internet connection.

### Challenges we ran into

Building HealthHub came with its share of challenges. One significant hurdle was ensuring the accuracy and reliability of the health advice provided. We worked diligently to fine-tune the system, addressing potential pitfalls and refining the user experience. Additionally, optimizing the platform for scalability and inclusivity posed technical challenges that we overcame through collaborative problem-solving.

### Accomplishments we're proud of

We take pride in creating a platform that aligns with our vision of healthcare as a basic human right. HealthHub stands as an accomplishment in itself, serving as a testament to our commitment to improving global health equity. The positive feedback and engagement from users reinforce our belief in the project's impact and inspire us to continue our efforts.

### What we learned

The journey of developing HealthHub taught us valuable lessons about the intersection of technology and healthcare. We gained insights into user-centric design, the importance of accuracy in health information, and the complexities of addressing a global issue. This learning experience has equipped us with knowledge that extends beyond the realms of software development.

### What's next

Looking ahead, our vision for HealthHub involves continuous improvement and expansion. We plan to enhance the platform's features, incorporate user feedback for refinement, and explore partnerships to further broaden its reach. By staying true to our mission, we aim to make HealthHub a comprehensive and indispensable tool for individuals seeking accessible healthcare advice worldwide.

## README (from the GitHub repository)

# HealthHub

## Overview

HealthHub is a revolutionary project that aims to democratize access to healthcare advice. With the belief that healthcare is a basic human right, we have developed a web application powered by the ChatGPT API to provide free and personalized health guidance to users globally.

## Website Link
https://www.healthhub.wiki/

## Features

- **Free Healthcare Advice**: Access a wealth of healthcare information without any cost, promoting inclusivity and accessibility.

- **Personalized Insights**: Receive tailored advice based on individual queries and health concerns, enhancing the relevance of the information provided.

- **User-Friendly Interface**: Navigate a simple and intuitive web application designed for users of all backgrounds and technical expertise.

- **Global Reach**: Break down geographical barriers and make healthcare advice available to anyone with an internet connection.

## Technologies Used

- **ChatGPT API**: Powering the core functionality of HealthHub, providing intelligent and context-aware responses.

- **Web Technologies**: Built using HTML, CSS, and JavaScript for a seamless and responsive user experience.

## Requirements to run

- **ChatGPT API Key**: Create a .env file and add line: `VITE_OPENAI_API = [ChatGPT API KEY]`



## Detected evidence (automated analysis)

Indexed codebase: 15 recognized source files, 15 KB.
- CSS (language) — detected in the code
- HTML (language) — detected in the code
- JavaScript (language) — detected in the code
- OpenAI (technology) — detected in the code
- React (technology) — detected in the code
- Tailwind CSS (technology) — detected in the code

## Codebase structure (from repository index)

### Files (18 of 18)

```
.eslintrc.cjs
.gitignore
index.html
package.json
postcss.config.js
README.md
src/helpers/ScrollToTop.jsx
src/main.jsx
src/pages/Chat.css
src/pages/Chat.jsx
src/pages/Home.css
src/pages/Home.jsx
src/pages/LocalDoctor.css
src/pages/LocalDoctor.jsx
src/pages/Navbar.css
src/pages/Navbar.jsx
tailwind.config.js
vite.config.js
```

### Dependencies

- package.json: @chatscope/chat-ui-kit-react@^1.10.1, @types/react@^18.2.15, @types/react-dom@^18.2.7, @vercel/analytics@^1.1.2, @vitejs/plugin-react-swc@^3.3.2, autoprefixer@^10.4.14, eslint@^8.45.0, eslint-plugin-react@^7.32.2, eslint-plugin-react-hooks@^4.6.0, eslint-plugin-react-refresh@^0.4.3, normalize.css@^8.0.1, openai@^3.3.0, postcss@^8.4.27, react@^18.2.0, react-dom@^18.2.0, react-router-dom@^6.21.3, tailwindcss@^3.3.3, vite@^4.4.5

### Recent commits (newest first)

- Update README.md
- Update Home.jsx
- Fixed prompt
- Adding analytics
- Working?
- SAve
- See work
- Plese wokr
- fixed
- returning to old env
- Fixing Build
- Chaging smlal
- Update README.md
- Upodated readme
- Merge pull request #10 from jonathanguyen21/jonathan-refactor
- ui finished
- Updated svg
- Merge pull request #9 from jonathanguyen21/home
- added scrolltotop
- Merge pull request #8 from jonathanguyen21/home

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

### package.json

```
{
  "name": "tts-ai-project",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "@chatscope/chat-ui-kit-react": "^1.10.1",
    "@vercel/analytics": "^1.1.2",
    "normalize.css": "^8.0.1",
    "openai": "^3.3.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.21.3"
  },
  "devDependencies": {
    "@types/react": "^18.2.15",
    "@types/react-dom": "^18.2.7",
    "@vitejs/plugin-react-swc": "^3.3.2",
    "autoprefixer": "^10.4.14",
    "eslint": "^8.45.0",
    "eslint-plugin-react": "^7.32.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.3",
    "postcss": "^8.4.27",
    "tailwindcss": "^3.3.3",
    "vite": "^4.4.5"
  }
}

```

### src/main.jsx

```javascript
import React from "react";
import ReactDOM from "react-dom/client";
import Chat from "./pages/Chat.jsx";
import Home from "./pages/Home.jsx";
import LocalDoctor from "./pages/LocalDoctor.jsx";
import Navbar from "./pages/Navbar.jsx";
import ScrollToTop from "./helpers/ScrollToTop";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";

import { Analytics } from "@vercel/analytics/react";

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <Router>
      <Navbar />
      <ScrollToTop />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/Chat" element={<Chat />} />
        <Route path="/AboutUs" element={<LocalDoctor />} />
      </Routes>
    </Router>
    <Analytics />
  </React.StrictMode>
);

```

### postcss.config.js

```javascript
export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

```

### tailwind.config.js

```javascript
/** @type {import('tailwindcss').Config} */
export default {
  content: ["./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",],
  theme: {
    extend: {},
  },
  plugins: [],
}


```

### vite.config.js

```javascript
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  define: {
    __APP_ENV__: JSON.stringify(process.env.VITE_VERCEL_ENV),
  },
});

```

### index.html

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HealthHub</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

```

### src/pages/Chat.css

```css
@import "../../node_modules/normalize.css/normalize.css";
@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

.font-custom {
    font-family: Montserrat, sans-serif;
}
```

### src/helpers/ScrollToTop.jsx

```javascript
import { useEffect } from "react";
import { useLocation } from "react-router-dom";

export default function ScrollToTop() {
  const { pathname } = useLocation();

  useEffect(() => {
    // "document.documentElement.scrollTo" is the magic for React Router Dom v6
    document.documentElement.scrollTo({
      top: 0,
      left: 0,
      behavior: "instant", // Optional if you want to skip the scrolling animation
    });
  }, [pathname]);

  return null;
}
```

### src/pages/LocalDoctor.css

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

.doctor-container {
  padding-top: 100px;
  margin: 0px;
}

.area {
  background-image: url(../../assets/background.jpg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
  margin: 0px;
  padding-bottom: 200px;
}

.area h1{
  font-size: 70px;
  font-family: Jost;
  font-weight: 900;
  margin: 0;
  padding-bottom: 20px;
  text-decoration: underline;
}

.area h3 {
  width: 50vw;
  font-size: 23px;
  font-family: Jost;
}

.area b {
  color:#5ECD81;
}

```

### src/pages/Navbar.jsx

```javascript
import React from "react";
import { Link } from "react-router-dom";
import "./Navbar.css";

const Navbar = () => {
  return (
    <nav className="nav">
      <section className="logo">
        <section className="logo-title">
          <Link to="/">
            <h1>HealthHub</h1>
          </Link>
          <Link to="/">
            <h3>Navigate Wellness, Share the Pathway</h3>
          </Link>
        </section>
      </section>
      <section className="navbar-links">
        <Link to="/">Home 🏠</Link>
        <Link to="/Chat">HealthGPT 🍃</Link>
        <Link to="/AboutUs">About Us 👨‍⚕️</Link>
      </section>
    </nav>
  );
};

export default Navbar;

```

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