# Project export: title in progress

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: kids learn to cook!
- Devpost: https://devpost.com/software/thinking-of-a-title
- GitHub: https://github.com/rachllee/treehacks
- Team: 3 GitHub contributor(s) — Ashley Yan (15 commits), Rachel Lee (11 commits), Carol Tu (2 commits)

## Devpost submission (written by the team)

### Inspiration

Our inspiration came from the idea of family bonding through cooking and the educational potential of interactive learning experiences. We noticed that parents often struggle to involve their children in the kitchen due to the complexity of recipes. We wanted to create a bridge that not only simplifies cooking instructions for children but also turns the cooking experience into an enjoyable and educational activity, fostering a love for cooking and self-reliance from a young age.

### What it does

Our web application transforms sophisticated recipes into child-friendly formats. When a parent inputs a recipe, our system uses GPT to distill the instructions into simpler steps. Each step is paired with an image generated by DALL-E to visually guide the child through the cooking process. Additionally, we've integrated Wispr.ai's voice recognition, allowing kids to interactively ask questions about the recipe, just like they would with a parent or a cooking instructor.

### How we built it

We developed a web-based platform with separate views for adults and children. The adult view allows parents to upload recipes and assign them to their kids. We utilized React.js for the frontend, building a responsive and intuitive interface. For the backend, we chose Flask due to its simplicity and efficiency in handling RESTful APIs. GPT simplifies the text, DALL-E creates the images, and Wispr.ai powers the voice interaction. We seamlessly integrated these AI technologies to work cohesively, providing an end-to-end solution from recipe upload to interactive cooking guidance.

### Challenges we ran into

Cors and parent child communication. We were working with essentially two different states at once, and having them interact with each other while also reducing async issues was a challenge.

### Accomplishments we're proud of

Setting up the backend and the integration. For 36 hours this was an extremely thorough backend and frontend with a lot of moving parts. Understanding how to work synchronously and together was very important.

### What we learned

Test driven development would have aided a lot of issues in the process. Once we were at the final stages of development, we ran into issues on integrating different parts of the backend together. Additionally, we saw the power of planning using UML diagrams. Seeing the interactions between the different servers was a good visualization for us to continue the development.

### What's next

Definitely integrating more features and recipes and trying to scale it from a server perspective. Right now the calls are a bit slow, so optimizing that through parallel processing is important for the app to seam very seamless.

## README (from the GitHub repository)

# treehacks

## Detected evidence (automated analysis)

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

## Codebase structure (from repository index)

### Files (48 of 48)

```
.python-version
backend/app/__init__.py
backend/app/models.py
backend/app/routes.py
backend/instance/recipes.db
backend/migrations/alembic.ini
backend/migrations/env.py
backend/migrations/README
backend/migrations/script.py.mako
backend/migrations/versions/111d6aa5d28f_initial_migration.py
backend/requirements.txt
backend/run.py
frontend/.gitignore
frontend/package.json
frontend/public/index.html
frontend/public/manifest.json
frontend/public/robots.txt
frontend/README.md
frontend/src/App.css
frontend/src/App.js
frontend/src/App.test.js
frontend/src/components/AdultInterface/AddRecipe.js
frontend/src/components/AdultInterface/Dashboard.js
frontend/src/components/AdultInterface/home.css
frontend/src/components/AdultInterface/Home.js
frontend/src/components/AdultInterface/Login.js
frontend/src/components/AdultInterface/Register.css
frontend/src/components/AdultInterface/Register.js
frontend/src/components/ChildInterface/Book.css
frontend/src/components/ChildInterface/Book.js
frontend/src/components/ChildInterface/Bookshelf.css
frontend/src/components/ChildInterface/Bookshelf.js
frontend/src/components/ChildInterface/ChildInterface.js
frontend/src/components/ChildInterface/FinishScreen.js
frontend/src/components/ChildInterface/RecipeApp.js
frontend/src/components/ChildInterface/Recipes.js
frontend/src/components/ChildInterface/Screens.css
frontend/src/components/ChildInterface/StartScreen.js
frontend/src/components/ChildInterface/Steps.js
frontend/src/components/ChildInterface/Welcome.js
frontend/src/index.css
frontend/src/index.js
frontend/src/reportWebVitals.js
frontend/src/setupTests.js
package.json
README.md
recipe.db
recipes.db
```

### Dependencies

- backend/requirements.txt: aiohttp@==3.9.3, aiosignal@==1.3.1, alembic@==1.13.1, annotated-types@==0.6.0, anyio@==4.2.0, attrs@==23.2.0, bcrypt@==4.1.2, blinker@==1.7.0, certifi@==2024.2.2, charset-normalizer@==3.3.2, click@==8.1.7, distro@==1.9.0, dnspython@==2.6.0, email-validator@==2.1.0.post1, Flask@==3.0.2, Flask-Bcrypt@==1.0.1, Flask-Cors@==4.0.0, Flask-Login@==0.6.3, Flask-Migrate@==4.0.5, Flask-SQLAlchemy@==3.1.1, frozenlist@==1.4.1, greenlet@==3.0.3, h11@==0.14.0, httpcore@==1.0.3, httpx@==0.26.0, idna@==3.6, itsdangerous@==2.1.2, Jinja2@==3.1.3, Mako@==1.3.2, MarkupSafe@==2.1.5, multidict@==6.0.5, openai@==0.28.0, pydantic@==2.6.1, pydantic_core@==2.16.2, requests@==2.31.0, sniffio@==1.3.0, SQLAlchemy@==2.0.27, tqdm@==4.66.2, typing_extensions@==4.9.0, urllib3@==2.2.1, Werkzeug@==3.0.1, yarl@==1.9.4
- frontend/package.json: @testing-library/jest-dom@^5.17.0, @testing-library/react@^13.4.0, @testing-library/user-event@^13.5.0, axios@^1.6.7, openai@^4.28.0, react@^18.2.0, react-dom@^18.2.0, react-router-dom@^6.22.1, react-scripts@5.0.1, web-vitals@^2.1.4
- package.json: flask@^0.2.10, flask-cors@^0.0.1, openai@^4.28.0, react-router-dom@^6.22.1

### Recent commits (newest first)

- Merge branch 'main' of https://github.com/rachllee/treehacks
- login
- Merge branch 'main' o
- frontend
- changes
- simplified instructions
- fixed frontend
- Merge branch 'main' of https://github.com/rachllee/treehacks
- backend restructure and db fixes
- frontend revamp
- Merge branch 'main' of https://github.com/rachllee/treehacks
- again
- Merge branch 'main' of https://github.com/rachllee/treehacks
- flask route
- Merge branch 'main' of https://github.com/rachllee/treehacks
- merge
- child interface
- flask route
- frontend fixes
- Merge branch 'main' of https://github.com/rachllee/treehacks

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

### package.json

```
{
  "dependencies": {
    "flask": "^0.2.10",
    "flask-cors": "^0.0.1",
    "openai": "^4.28.0",
    "react-router-dom": "^6.22.1"
  }
}

```

### backend/requirements.txt

```
aiohttp==3.9.3
aiosignal==1.3.1
alembic==1.13.1
annotated-types==0.6.0
anyio==4.2.0
attrs==23.2.0
bcrypt==4.1.2
blinker==1.7.0
certifi==2024.2.2
charset-normalizer==3.3.2
click==8.1.7
distro==1.9.0
dnspython==2.6.0
email-validator==2.1.0.post1
Flask==3.0.2
Flask-Bcrypt==1.0.1
Flask-Cors==4.0.0
Flask-Login==0.6.3
Flask-Migrate==4.0.5
Flask-SQLAlchemy==3.1.1
frozenlist==1.4.1
greenlet==3.0.3
h11==0.14.0
httpcore==1.0.3
httpx==0.26.0
idna==3.6
itsdangerous==2.1.2
Jinja2==3.1.3
Mako==1.3.2
MarkupSafe==2.1.5
multidict==6.0.5
openai==0.28.0
pydantic==2.6.1
pydantic_core==2.16.2
requests==2.31.0
sniffio==1.3.0
SQLAlchemy==2.0.27
tqdm==4.66.2
typing_extensions==4.9.0
urllib3==2.2.1
Werkzeug==3.0.1
yarl==1.9.4

```

### frontend/package.json

```
{
  "name": "frontend",
  "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",
    "axios": "^1.6.7",
    "openai": "^4.28.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.22.1",
    "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"
    ]
  }
}

```

### frontend/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();

```

### frontend/src/App.js

```javascript
import React, { userRef } from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; 
import Register from './components/AdultInterface/Register';
import ChildInterface from './components/ChildInterface/ChildInterface';
import RecipeApp from './components/ChildInterface/RecipeApp';
import Welcome from './components/ChildInterface/Welcome';
import Bookshelf from './components/ChildInterface/Bookshelf';
import Home from './components/AdultInterface/Home'; 
import Login from './components/AdultInterface/Login'; 
import Dashboard from './components/AdultInterface/Dashboard'; 
import AddRecipe from './components/AdultInterface/AddRecipe'; 


// const App = () => {
//   return (
//     <Router>
//       <Routes>
//         <Route path="/" element={<Home />} />
//         <Route path="/cook" element={<Welcome/>} />
//         <Route path="/register" element={<Register />} />
//         <Route path="/login" element={<Login />} />
//         <Route path="/dashboard" element={<Dashboard />} />
//         <Route path="/add-recipe" element={<AddRecipe />} />
//         <Route path="/bookshelf" element={<Bookshelf />}/>
//         <Route path="recipe/:id"  element={<RecipeApp />}/>
//       </Routes>
//     </Router>
//   )
// }

const App = () => {
  return (
    <RecipeApp />
  )
}


export default App;
```

### backend/run.py

```python
from app import create_app

app = create_app()

if __name__ == '__main__':
    app.run(debug=True)
```

### frontend/src/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';

```

### frontend/src/App.test.js

```javascript
import { render, screen } from '@testing-library/react';
import App from './App';

test('renders learn react link', () => {
  render(<App />);
  const linkElement = screen.getByText(/learn react/i);
  expect(linkElement).toBeInTheDocument();
});

```

### frontend/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;

```

### frontend/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;
}

```

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