# Project export: HealthChain.ai

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: Cal Hacks 10.0
- Tagline: Medchain.ai gives the control of medical records back to patients by storing and encrypting in a decentralized matter.
- Devpost: https://devpost.com/software/medchain-ai
- GitHub: https://github.com/YoshimasaIwano/LyteEver
- Demo: https://lyte-ever.vercel.app/
- Team: 3 GitHub contributor(s) — YoshimasaIwano (62 commits), Andy Poon (9 commits), Avinh Huynh (2 commits)

## Devpost submission (written by the team)

### Inspiration

As three of our team members are international students, we encountered challenges when transferring our medical records from our home countries to the United States. Because of poor transferability of medical records, we would end up retaking vaccines we had already received in our home countries and wasted a lot of our time collecting our medical records. Moreover, even within the US, we noticed that medical records were often fragmented, with each hospital maintaining its own separate records. These experiences inspired us to create a solution that simplifies the secure transfer of medical records, making healthcare more efficient and accessible for everyone.

### What it does

HealthChain.ai allows for medical records to be parsed by AI, and stored as non-fungible tokens on the Ethereum blockchain. The blockchain takes away a central authority to remove long wait times for document requests and allows for easy access by record holders and hospitals. AI parsing allows for easy integration between differing hospital systems and international regulations.

### How we built it

Our frontend uses Next.js with tailwind and typescript, and is deployed on Vercel. We used OpenAI to process text input into json to store on our block chain. Our backend used Solidity to write our smart contracts, and broadcast it to the Ethereum block chain using the Alchemy API. We used custom NodeJS API calls to connect the Ethereum block chain to our frontend, and deployed this on vercel as well. This all integrates into the MetaMask API on our frontend which displays NFTs in your Ethereum wallet.

### Challenges we ran into

Our original plan was to use Aleo as our Blockchain of choice for our app. But after working with the Aleo’s developers we discovered that the chain's testnet was not working and we couldn't deploy our smart contract. We had to redevelop our Smart Contracts in Solidity and test on the Sepolia, one of the Ethereum testnet. Even then, learning how to navigate through the deployment process and getting the wallets to connect to the chain to interact with our Smart Contracts proved to be one of our biggest challenges.

### Accomplishments we're proud of

We were able to upload our smart contract and able to retrieve data from the chain which allowed our use of the OpenAi API to parse the information retrieved into more understandable, formatted medical records. We are able to apply decentralized finance along with AI which is a huge challenge, we are proud to be able to pull this off.

### What we learned

Throughout the hacking of our project, we learned quite a lot such as concepts of Blockchain, cryptography and Machine Learning. On top of learning all these concepts we've learnt how to combine them together through frontend and API calls which is crucial in fullstack development.

### What's next

In our upcoming version, we have exciting plans to introduce additional features that we envisioned during the project's development but were constrained by time. These enhancements encompass the integration of speech-to-text for recording medical records, the implementation of OCR technology to convert traditional paper medical records into electronic formats (EMRs), and a comprehensive user interface redesign to simplify the organization of personal medical records. Last but not least, we also want to collaborate with hospitals to bring accessible medical records to the mass market and listen to our customers on what they really want and need.

## README (from the GitHub repository)

This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).

## Getting Started

First, run the development server:

```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
```

Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.

[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.

The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.

This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.

## Learn More

To learn more about Next.js, take a look at the following resources:

- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.

You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!

## Deploy on Vercel

The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.

Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.


## Detected evidence (automated analysis)

Indexed codebase: 23 recognized source files, 20 KB.
- CSS (language) — detected in the code
- JavaScript (language) — detected in the code
- Next.js (technology) — detected in the code
- OpenAI (technology) — detected in the code
- React (technology) — detected in the code
- Tailwind CSS (technology) — detected in the code
- TypeScript (language) — detected in the code
- Node.js (technology) — claimed on Devpost, not found in the code
- Solidity (language) — claimed on Devpost, not found in the code

## Codebase structure (from repository index)

### Files (27 of 27)

```
.eslintrc.json
.gitignore
next.config.js
package.json
postcss.config.js
README.md
src/apis/runConversion/index.ts
src/components/container/index.tsx
src/features/hospital/components/index.tsx
src/features/user/index.tsx
src/hooks/useAuthContext/index.ts
src/hooks/useConversion/index.ts
src/hooks/useCreateNFT/index.ts
src/hooks/useSnackBar/index.ts
src/pages/_app.tsx
src/pages/_document.tsx
src/pages/api/hello.ts
src/pages/api/openai.ts
src/pages/hospital/index.tsx
src/pages/index.tsx
src/pages/user/index.tsx
src/providers/AuthProvider/index.tsx
src/styles/globals.css
src/types/index.ts
src/utils/web3.ts
tailwind.config.ts
tsconfig.json
```

### Dependencies

- package.json: @tailwindcss/aspect-ratio@^0.4.2, @tailwindcss/container-queries@^0.1.1, @tailwindcss/forms@^0.5.6, @tailwindcss/typography@^0.5.10, @types/node@^20, @types/node-forge@^1.3.8, @types/react@^18, @types/react-dom@^18, @types/web3@^1.2.2, autoprefixer@^10, axios@^1.6.0, eslint@^8, eslint-config-next@14.0.0, ethers@^6.8.0, next@14.0.0, node-forge@^1.3.1, node-rsa@^1.1.1, notistack@^3.0.1, openai@^4.14.1, postcss@^8, react@^18, react-dom@^18, react-query@^3.39.3, tailwindcss@^3, typescript@^5, web3@^4.2.1

### Recent commits (newest first)

- ops
- mistake
- dfa
- chore:
- fix
- Merge pull request #16 from YoshimasaIwano/change
- chhange word
- Merge pull request #15 from YoshimasaIwano/deleteID
- deleted ID
- Merge pull request #14 from YoshimasaIwano/axios-call
- chore: add api call
- Merge pull request #13 from YoshimasaIwano/check-login-status
- delete revord
- delete reocrd button
- fix: merge conflicts
- chore: complete snackbar
- Merge pull request #12 from YoshimasaIwano/encryption
- added RSA encryption and decryption. Private key is stored in local storage as an item.
- Merge branch 'main' into check-login-status
- chore: complte auth provider

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

### package.json

```
{
  "name": "LyteEver",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@tailwindcss/aspect-ratio": "^0.4.2",
    "@tailwindcss/container-queries": "^0.1.1",
    "@tailwindcss/forms": "^0.5.6",
    "@tailwindcss/typography": "^0.5.10",
    "@types/web3": "^1.2.2",
    "axios": "^1.6.0",
    "ethers": "^6.8.0",
    "next": "14.0.0",
    "node-forge": "^1.3.1",
    "node-rsa": "^1.1.1",
    "notistack": "^3.0.1",
    "openai": "^4.14.1",
    "react": "^18",
    "react-dom": "^18",
    "react-query": "^3.39.3",
    "web3": "^4.2.1"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/node-forge": "^1.3.8",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "autoprefixer": "^10",
    "eslint": "^8",
    "eslint-config-next": "14.0.0",
    "postcss": "^8",
    "tailwindcss": "^3",
    "typescript": "^5"
  }
}

```

### src/types/index.ts

```typescript
export type Record = {
  tokenid?: string;
  name: string;
  id: string;
  dateOfbirth: string;
  countryOfbirth: string;
  medHistory: string;
};

```

### src/pages/index.tsx

```typescript
// @ts-nocheck
import Link from "next/link";
import { useEffect } from "react";
import { Inter } from "next/font/google";
import { useAuthContext } from "@/hooks/useAuthContext";
import { useSnackbar } from "notistack";
const inter = Inter({ subsets: ["latin"] });

export default function Home() {
  const auth = useAuthContext();
  const isConnected = auth?.user !== undefined;
  const { enqueueSnackbar } = useSnackbar();

  useEffect(() => {
    if (!isConnected) {
      enqueueSnackbar("You are not connected to a wallet.", {
        variant: "warning",
        autoHideDuration: 5000,
      });
    }
  }, []);

  return (
    <main
      className={`flex min-h-screen flex-col items-center justify-center p-24 ${inter.className}`}
    >
      <header>
        <h1 className="text-4xl mb-8 font-bold text-center">
          Welcome to Med Chain
        </h1>
      </header>

      <section className="mb-32 grid gap-8 justify-items-center lg:max-w-5xl lg:w-full lg:mb-0 lg:grid-cols-2 lg:text-left">
        <Link href="/user">
          <button className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30">
            <h2 className={`mb-3 text-2xl font-semibold`}>User Page</h2>
            <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
              Navigate to User page.
            </p>
          </button>
        </Link>

        <Link href="/hospital">
          <button className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30">
            <h2 className={`mb-3 text-2xl font-semibold`}>Hospital Page</h2>
            <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
              Navigate to Hospital page.
            </p>
          </button>
        </Link>
      </section>
    </main>
  );
}

```

### src/hooks/useConversion/index.ts

```typescript
import { useMutation } from "react-query";
import { runConversion } from "@/apis/runConversion";

export function useConversion() {
  return useMutation((text: string) => runConversion({ text }));
}

```

### src/hooks/useAuthContext/index.ts

```typescript
import { createContext, useContext } from "react";

interface AuthContextProps {
  user: string | null; // Define a suitable user type if needed
  setUser: (user: string) => void;
}

export const AuthContext = createContext<AuthContextProps | null>(null);
export const useAuthContext = () => {
  return useContext(AuthContext);
};
```

### src/components/container/index.tsx

```typescript
// components/Container.tsx

type ContainerProps = {
  children: React.ReactNode;
};

export const Container = ({ children }: ContainerProps) => {
  return (
    <div className="flex justify-center items-center min-h-screen">
      <div className="container flex justify-center items-center">
        {children}
      </div>
    </div>
  );
};

export default Container;

```

### src/hooks/useSnackBar/index.ts

```typescript
import { useSnackbar } from "notistack";

const useMySnackbar = (message: string) => {
  const { enqueueSnackbar } = useSnackbar();

  const showSnackbar = (options = {}) => {
    enqueueSnackbar(message, {
      variant: "default", // default, error, success, warning, info
      autoHideDuration: 5000,
      ...options,
    });
  };

  return { showSnackbar };
}

export default useMySnackbar;

```

### src/providers/AuthProvider/index.tsx

```typescript
import React, { useState, useContext, useEffect } from "react";
import { AuthContext } from "@/hooks/useAuthContext";
import web3 from "@/utils/web3";

interface AuthProviderProps {
  children: React.ReactNode;
}

const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
  const [user, setUser] = useState<string | null>(null);

  useEffect(() => {
    const loadAccount = async () => {
      const accounts = await web3.eth.getAccounts();
      setUser(accounts[0]);
    };

    loadAccount();
  }, []);

  return (
    <AuthContext.Provider value={{ user, setUser }}>
      {children}
    </AuthContext.Provider>
  );
};

export default AuthProvider;

```

### src/pages/user/index.tsx

```typescript
// user/index.tsx
import Container from "@/components/container";
import Index from "@/features/user";
import { useAuthContext } from "@/hooks/useAuthContext";
import { useEffect } from "react";
import { useSnackbar } from "notistack";

const User = () => {
  const auth = useAuthContext();
  const isConnected = auth?.user !== undefined;
  const { enqueueSnackbar } = useSnackbar();

  useEffect(() => {
    if (!isConnected) {
      enqueueSnackbar("You are not connected to a wallet.", {
        variant: "warning",
        autoHideDuration: 5000,
      });
    }
  }, []);
  return (
    <Container>
      <Index />
    </Container>
  );
};

export default User;

```

### src/pages/hospital/index.tsx

```typescript
// hospital/index.tsx
import Container from "@/components/container";
import Index from "@/features/hospital/components";
import { useAuthContext } from "@/hooks/useAuthContext";
import { useEffect } from "react";
import { useSnackbar } from "notistack";

const Hospital = () => {
  const auth = useAuthContext();
  const isConnected = auth?.user !== undefined;
  const { enqueueSnackbar } = useSnackbar();

  useEffect(() => {
    if (!isConnected) {
      enqueueSnackbar("You are not connected to a wallet.", {
        variant: "warning",
        autoHideDuration: 5000,
      });
    }
  }, []);

  return (
    <Container>
      <Index />
    </Container>
  );
};

export default Hospital;

```

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