# Project export: Rosa

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: Senior-focused AI assistant for daily tasks.
- Devpost: https://devpost.com/software/rosa
- GitHub: https://github.com/kadijaismail112/rosa
- Demo: https://www.figma.com/proto/wKTQzdDnOAsZsTUo3TJvkF/Rosa?page-id=0%3A1&type=design&node-id=21-1095&viewport=7155%2C1143%2C0.59&t=8ugw5SYCxvYmpLcT-1&scaling=scale-down&mode=design
- Team: 2 GitHub contributor(s) — Joseph Dodson (4 commits), Kadija Ismail (4 commits)

## Devpost submission (written by the team)

### Inspiration

All four of us have watched our grandparents struggle to use the same technologies that feel like second-nature to us. We wanted to build something that helps them, and in turn the millions of other seniors in the US, Japan, and elsewhere.

### What it does

Rosa helps seniors with daily tasks, without them needing to know specific app names or touch their phone at all. In its current, proof-of-concept form, Rosa is a web app. It takes user input, like "I need to go to my doctor" and transforms it into an Uber ride request. It also learns and adapts to its users, sending reminders and checking in to comfort and assist.

### How we built it

We started Rosa on a whiteboard. For half of the team, this was our first time building a full-stack web app, and there was a lot to learn. We defined user stories, setting out clear goals for what we wanted Rosa to do. Then, we began looking at how we could accomplish those goals. We mocked our app in Figma extensively. This was something we also put a lot of time into. Part of that was because we wanted to know what it would look like. Another part of this was that mocking it in Figma kind of gave us an idea of where the touchpoints (and thus API calls) were. Lastly, it was just fun! One thing we knew from the start was that we wanted Rosa to eventually be a built-in integration to one of the messaging apps that seniors likely already have, like WhatsApp and Facebook Messenger. With this in mind, we decided to authenticate each user via their Facebook account, which we considered to be the most common, easiest-to-use online account for seniors. With that in mind, we decided to use Supabase for our database. Supabase has a built-in integration for logging in with Facebook, making our flow easier. We then defined table schema for each user and all of the info we wanted to store about them. These included things like important locations (doctor's office, child's address, etc), authentication tokens for the services we wanted to integrate (so they don't need to log into Uber each time), and language of choice, to support multilingual support. With our Supabase, we then decided on the backend. We wanted to take advantage of Bun, so we decided to do the backend in Express. We'd integrate with the Together.ai LLMs to parse and fulfill requests, as well as the APIs of the services we wanted to use. Our frontend was built in React with TypeScript.

### Challenges we ran into

First, and the one that became the biggest time sink, was that we had trouble defining the tech stack and flow of our app. Designing the architecture took us many, many hours, and ultimately kept us from coding for a long time. We wanted to utilize the partners here at TreeHacks, so we looked into a lot (probably too many) of services. This cut down the time we had to code significantly. Second, we had trouble getting approval to use certain APIs. For example, we wanted to use Facebook login, but to actually use the login information provided by Facebook, we would need to submit our app for review, which takes 5 days. Similarly, the Uber API had certain approval requirements. Other APIs, like Google Maps, had no free tier and were expensive to use, and we struggled to find viable alternatives. Third, many of us were unfamiliar with building a full-stack web app from the ground up. This necessitated spending lots of time learning how requests would move through the app. It also hindered our splitting of the work, since we were all trying to figure out how the other person's part would work with ours.

### Accomplishments we're proud of

Getting our Supabase database setup! Defining the tables took longer than we thought. Related to this, getting the login with Facebook part to work. We originally used the Facebook login independently of Supabase, but kept running into issues with this. Using the built-in Supabase login with Facebook helped significantly and reduced the work we needed to do to register users. Another accomplishment was getting some of the routing infrastructure for handling requests set up. We weren't able to get the front end working beyond logging in, but on the backend, we defined numerous routes that we intended to make requests to. We also came up with ways to parse user inputs for intent, information, and eventually responding.

### What we learned

Full-stack web apps are hard to make! We had a lot of struggles with defining an end-to-end infrastructure. We learned just how important it is to define contracts for the app so that each person can begin working without needing to worry about how their part will integrate (something that was a huge time sink for us!). We also learned a lot more about setting up and managing databases. It can be quite overwhelming to think about each piece of information you want and creating a place to store it. Lastly, we learned that sometimes you just need to narrow the scope. We realized that we probably spent too much time thinking about finer details of the product and database to the detriment of coding and getting something working.

### What's next

Flesh out the front end and integrate with the backend so users can chat with Rosa Integrate with more services beyond just Uber (e.g. Instacart for groceries, DoorDash for food, etc) Submit the app for approval by Facebook

## README (from the GitHub repository)

# rosa


## Detected evidence (automated analysis)

Indexed codebase: 17 recognized source files, 12 KB.
- CSS (language) — detected in the code
- HTML (language) — detected in the code
- Python (language) — detected in the code
- React (technology) — detected in the code
- Supabase (technology) — detected in the code
- TypeScript (language) — detected in the code
- Express (technology) — claimed on Devpost, not found in the code

## Codebase structure (from repository index)

### Files (24 of 24)

```
.gitignore
backend/scripts/model.py
backend/scripts/together.py
backend/scripts/tools.py
backend/src/app.ts
backend/src/controller/userController.ts
backend/src/routes/userRoutes.ts
backend/src/utils/callPythonScript.ts
README.md
rosa-app/.eslintrc.cjs
rosa-app/.gitignore
rosa-app/bun.lockb
rosa-app/index.html
rosa-app/package.json
rosa-app/README.md
rosa-app/src/App.css
rosa-app/src/App.tsx
rosa-app/src/Chat.tsx
rosa-app/src/index.css
rosa-app/src/main.tsx
rosa-app/src/vite-env.d.ts
rosa-app/tsconfig.json
rosa-app/tsconfig.node.json
rosa-app/vite.config.ts
```

### Dependencies

- rosa-app/package.json: @supabase/auth-ui-react@^0.4.7, @supabase/auth-ui-shared@^0.1.8, @supabase/supabase-js@^2.39.6, @types/react@^18.2.55, @types/react-dom@^18.2.19, @typescript-eslint/eslint-plugin@^6.21.0, @typescript-eslint/parser@^6.21.0, @vitejs/plugin-react@^4.2.1, eslint@^8.56.0, eslint-plugin-react-hooks@^4.6.0, eslint-plugin-react-refresh@^0.4.5, react@^18.2.0, react-dom@^18.2.0, typescript@^5.2.2, vite@^5.1.0

### Recent commits (newest first)

- Merge branch 'main' of github.com:kadijaismail112/rosa
- huh
- Working on FB Login
- remove vite logo:
- add frontend
- Removed shared folder, pulled files out
- Merge pull request #1 from kadijaismail112/backend-setup
- hooked up most stuff for backend
- beginning of something new :)
- first commit

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

### rosa-app/package.json

```
{
  "name": "rosa-app",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "@supabase/auth-ui-react": "^0.4.7",
    "@supabase/auth-ui-shared": "^0.1.8",
    "@supabase/supabase-js": "^2.39.6",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.2.55",
    "@types/react-dom": "^18.2.19",
    "@typescript-eslint/eslint-plugin": "^6.21.0",
    "@typescript-eslint/parser": "^6.21.0",
    "@vitejs/plugin-react": "^4.2.1",
    "eslint": "^8.56.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.5",
    "typescript": "^5.2.2",
    "vite": "^5.1.0"
  }
}

```

### rosa-app/src/main.tsx

```typescript
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import './index.css'

ReactDOM.createRoot(document.getElementById('root')!).render(
  <App />
)

```

### backend/src/app.ts

```typescript
import express, { Express, Request, Response } from 'express';
import userRoutes from './routes/userRoutes';

const app = express();
const PORT = process.env.PORT || 3000;

app.use(express.json());
// app.use(/users, userRoutes);

app.get('/', (req: Request, res: Response) => {
    res.send('Hello, World with TypeScript!');
});

app.listen(PORT, () => {
    console.log(`Server is running on http://localhost:${PORT}`);
});

```

### rosa-app/src/App.tsx

```typescript
import { useState, useEffect } from 'react'
import { createClient } from '@supabase/supabase-js'
import { Auth } from '@supabase/auth-ui-react'
import { ThemeSupa } from '@supabase/auth-ui-shared'
import './App.css'
import Chat from './Chat'

const SUPABASE_URL = "https://murmuncqoiskpgedjihz.supabase.co"
const SUPABASE_PUBLIC_ANON_KEY = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Im11cm11bmNxb2lza3BnZWRqaWh6Iiwicm9sZSI6ImFub24iLCJpYXQiOjE3MDgyMDA3MzEsImV4cCI6MjAyMzc3NjczMX0.humU7pw4UJRiPhxekypsrjew_xcQIYncJiyamrrHrIQ"
const supabase = createClient(SUPABASE_URL, SUPABASE_PUBLIC_ANON_KEY)


function App() {
  const [session, setSession] = useState(null)

  useEffect(() => {
    supabase.auth.getSession().then(({ data: { session } }) => {
      setSession(session)
    })

    const {
      data: { subscription },
    } = supabase.auth.onAuthStateChange((_event, session) => {
      setSession(session)
    })

    return () => subscription.unsubscribe()
  }, [])

  const loginWithFacebook = async () => {
    const { data, error } = await supabase.auth.signInWithOAuth({
      provider: 'facebook' 
    }) 
    
    if (error) {
      console.error('Error logging in:', error.message);
    }
  };

  const logout = async () => {
    const { error } = await supabase.auth.signOut();

    if (error) {
      console.error('Error logging out:', error.message);
    }
  };

  if (!session) {
    return (
      <div>
        <h1>Hi, I'm Rosa</h1>
        <p>Log in to get started. </p>
        <button onClick={loginWithFacebook}>Login with Facebook</button>
        {/* <Auth supabaseClient={supabase} appearance={{ theme: ThemeSupa }} providers={["facebook"]}/> */}
      </div>
    )
  }
  else {
    return (
    <div>
      <div>Logged in!</div>
      <p>Hi, {session.user.email}</p>
      <button onClick={logout}>Logout</button>
    </div>
    )
  }
}

export default App

```

### rosa-app/vite.config.ts

```typescript
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
})

```

### rosa-app/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>Vite + React + TS</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

```

### backend/scripts/model.py

```python
import 
```

### rosa-app/src/vite-env.d.ts

```typescript
/// <reference types="vite/client" />

```

### rosa-app/src/Chat.tsx

```typescript
// chat takes args supabase client and session 

export default function Chat({ supabaseClient, session }) {
    return (
        <div>
            <h1>Chat</h1>
            <p>Logged in as {session.user.email}</p>
        </div>
    )
}
```

### backend/scripts/tools.py

```python
tools = [
  {
    "type": "function",
    "function": {
      "name": "get_current_weather",
      "description": "Get the current weather in a given location",
      "parameters": {
        "type": "object",
        "properties": {
          "location": {
            "type": "string",
            "description": "The city and state, e.g. San Francisco, CA"
          },
          "unit": {
            "type": "string",
            "enum": [
              "celsius",
              "fahrenheit"
            ]
          }
        }
      }
    }
  }, 
]
```

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