# Project export: cookitUP

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 11.0
- Tagline: You Name it , we will (h)cook you up
- Devpost: https://devpost.com/software/cookitup
- GitHub: https://github.com/AnandRituraj/cookitup
- Demo: https://cookitup-bay.vercel.app/
- Team: 1 GitHub contributor(s) — AnandRituraj (8 commits)

## Devpost submission (written by the team)

### Inspiration

As an International Student having to cook for myself regularly, it is handy sometimes to get a recipe for any new food item you encounter

### What it does

It returns the Ingredients and recipe required to cook any dish from the picture you upload.

### How we built it

Frontend - I used React to build the UI and components Backend - I used Node and Express to handle the API calls and server modifications Gemini API was used to classify the image and return its recipe

### Challenges we ran into

As I am a beginner and this is my second hackathon some of the major challenges were Building an end-to-end system for the problem Setting up routing for the right API calls and interacting with external API (Gemini in case) The Gemini API returns the answer in a single string Markdown format my major challenge was parsing the string and taking out the specific sections and subsections to display it nicely on UI side

### Accomplishments we're proud of

Building this solo project end-to-end is nice progress in my career and doing it in a live hackathon makes me proud and more curious about making personal projects and adding technical complexity

### What we learned

I understood the full workflow of a fully functional web app and how things work under the hood How to interact with external API's and parse the data they return

### What's next

I am hoping to update it further for maybe adding a video description with each step in the recipe and adding resources to buy the ingredients

## README (from the GitHub repository)

# cookitUP - Anand

# This application takes in an Image and give out the ingredients used to make the dish

# For example if you input an image of pizza it will give you things required to make it such as
# cheese, flour,  pizza sauce etc

# used gemini API to process the image which is given as input by the user
# It is then processed by the API which then spits out the result to the user 

# 






## Detected evidence (automated analysis)

Indexed codebase: 15 recognized source files, 16 KB.
- CSS (language) — detected in the code
- Express (technology) — detected in the code
- Google Gemini (technology) — detected in the code
- HTML (language) — detected in the code
- JavaScript (language) — detected in the code
- React (technology) — detected in the code
- Node.js (technology) — claimed on Devpost, not found in the code

## Codebase structure (from repository index)

### Files (120 of 141)

```
backend/.gitignore
backend/config/geminiAPI.js
backend/deps_temp_82dd47df/package.json
backend/index.js
backend/package.json
backend/routes/imageUpload.js
backend/uploads/00bf13f5bbfa37540b95c79ff23eb121
backend/uploads/022cecd737785932ba986d5703228c50
backend/uploads/025060cc6a5d75ae03fc0924c93ae363
backend/uploads/0337a02d69d46d0d3018bd1244005c8d
backend/uploads/048bf414cecda4f99f7c2e03fc5142f1
backend/uploads/0520cb5fab0e635f64bf6e970f90ebf4
backend/uploads/05da30b9346c21157619b94c5e82e0d9
backend/uploads/0707060d58a772210aa04d486aec6c4d
backend/uploads/086ed099534a590d1f00211730df25c2
backend/uploads/0a922f80bd396ef669ce26f371a5c0a1
backend/uploads/10b0b0aa18fcff8c69a8dd55403fb09d
backend/uploads/1627c728abe5451bcd50c358ce730763
backend/uploads/164a1a84a86badc3f004a5ac3b7590ae
backend/uploads/1921f12dde13d8991c3a7c9069bda910
backend/uploads/19f8320655efa9ec12a7d99e8bc0eb9f
backend/uploads/1bb8cef6ebaedbbedc044ac532a8947f
backend/uploads/1e00b194eebb4b0dfcbc96405de059e7
backend/uploads/1f683c723c6af7201dbf822ba5d9409c
backend/uploads/23f3257bcd4b045964a2d341c3134d82
backend/uploads/25fc3a161b85ca186041f151be308ad3
backend/uploads/30f84394f0eb1178d21e5b0eb4f4f42c
backend/uploads/33446d88838914264b8aa7b05ddd19bd
backend/uploads/34036e66b1058322824023fe796f6788
backend/uploads/34c2cb8fee91b7152970f817e2979057
backend/uploads/35e1a848e56b47367f16ff7722911af6
backend/uploads/372133de9d003f33d299805fad951b05
backend/uploads/378afb9f8cf8d79ad76f40cc35801b37
backend/uploads/38854dfdbfa46485ea833fe6820f2b97
backend/uploads/3905eb2803ff742d445d1444815191a2
backend/uploads/3f08c9a3193b1de5a9707e376e41462b
backend/uploads/3f9c3c69751cb2f90ca731ac497ff872
backend/uploads/4025e873e8184776542ef8890b326c0d
backend/uploads/40bf3899b0225d6d4e07dd467f4123ce
backend/uploads/445e266d6ede9b6da628bc906c7c7240
backend/uploads/48942320e9a9b478edefed3396acd20b
backend/uploads/4a082b2998fa4596da793c6eeaba9129
backend/uploads/4c0fb125efb629410a2fe79f1e5e2f3b
backend/uploads/4d9e4b11ae4c19c2a99b888e2891702c
backend/uploads/4ffe6f0239469b35d2c302e90a656001
backend/uploads/53913747f4e167fcedc892642a64eab5
backend/uploads/560e84fbbad2a9c67645c2ca49100b09
backend/uploads/56827598678cfe8b376f655b3dcfbc66
backend/uploads/56b6b19708a92dc92d9e74222c6f1244
backend/uploads/57edbcc0668a1c2b1f9462035c742adb
backend/uploads/5a30ca3198cf85ba67a1d096f087f4c7
backend/uploads/5a89a1b8a92378771743441581286d5e
backend/uploads/5bb7ba72c993f2fceedfa7d7a268bf41
backend/uploads/68700c3337ba2482c64f8d459682d06f
backend/uploads/696f467a914db72d73341c3cafd6f423
backend/uploads/6c47144bdd47030785342ff51f7f26f5
backend/uploads/6e9fb8ae5089739d2a2214224c6168a0
backend/uploads/76af0abf921c337be952d25da14a8fec
backend/uploads/7b62aeb7327a25d4e7c9ed245c1892b6
backend/uploads/7bcbb806e3ea9eb50aee79dc93af6614
backend/uploads/7cc73215742976b10efb78d0fe8017b2
backend/uploads/811fd9bee5a2d3180e6e395ac2145883
backend/uploads/811ffa2cf8c4846b53d3cba7b1531931
backend/uploads/8174a4e1fca5e33aa73efa2f22f244d3
backend/uploads/8817ce27efa5b366cdef7fafb4a8e837
backend/uploads/88989fef2f099c489100bfab2399dbe8
backend/uploads/89db465496c482cd318c69db4525a7c5
backend/uploads/8a0f35e333e2e1d09149b599fd434d8a
backend/uploads/8d7b9caeee2d94003782f12d01e040d0
backend/uploads/8e557396685f358d58fb980688c1637c
backend/uploads/91808b10cd82f79f310b78da63159ff6
backend/uploads/98a1b3315b17185f91a2fd3291720553
backend/uploads/9b6fd7ecb8c05bc6fe0232aa0c7a105f
backend/uploads/9c515ed7108f394ac5da9e0d4292297b
backend/uploads/a01df0e1804110bc48bd1b3654548440
backend/uploads/a15e447fe07e2f13abb98a6ddca6892e
backend/uploads/a34379e31dafb8d5c4ea760a8b477652
backend/uploads/a88e9fb8d81e2ca7d6e92d5a76ed6370
backend/uploads/aa5992531a4ccd439dc18f18bf3b5fbf
backend/uploads/adf066cb21cf7f37dfcbebb0c7ea2e1a
backend/uploads/ae5e27a992cfde7eea87d9fefc4365d4
backend/uploads/b1f4c802da3a3e073c5a20f65ba56c12
backend/uploads/b285ba3b55efcd4e8c2a1ad359e0cacd
backend/uploads/b3b57a0cdfb10540b7b8569d6171c002
backend/uploads/b4ca865092e3e76f4caf19e8d698de02
backend/uploads/b4f1115df01616355b59e67dab91dd0c
backend/uploads/b9c488e0f11fcf20e2a8ab59a9031dbd
backend/uploads/b9d053597a48078225968efb296b6fee
backend/uploads/ba3ecd82595b71c8dd29de8bf91f87df
backend/uploads/bae9d3b8fe8a929d631ef0e986ab10b3
backend/uploads/bca094e95b8cf710ed288281d97b04e7
backend/uploads/beec3cb52a4ed12e331165ecd6e61e30
backend/uploads/c5608a2497477c7cea5dc0bbcbaa8e9e
backend/uploads/c5a9c585a1f39ec631296ad76991c3a9
backend/uploads/c8415070346cf4fd0d0edb783fdf906e
backend/uploads/ca680987762a438ddebe7841f4caa7f0
backend/uploads/cbfccee9267b462a863116acc8f9c186
backend/uploads/cdbd48b33b970b44ccd622bd0e6b5617
backend/uploads/cf4cbb1944b07eb33798e4e0166173af
backend/uploads/d0a2effeebb3ee18a74ba51b1bb540dd
backend/uploads/d0e46050cabc639627fa8d100611cac3
backend/uploads/d117e83c58b66f56dac8a004792e1404
backend/uploads/d38d73f5375c3baeece7c6e7513b05a0
backend/uploads/d54e19a73aab8ce8038ee7d8292c7676
backend/uploads/d89c183c7bceebaeb64787085fb04cb5
backend/uploads/dc0c510421f6bb892270c416004e7c68
backend/uploads/dd154eef8e839a13136d27bba3909c2a
backend/uploads/e12c10c326c4a3d8d68328eb4dbe279b
backend/uploads/e3691b9b3c2832a3999a3a8f5f503f49
backend/uploads/e48072ce826c8b69a550fa2eaab8cc6c
backend/uploads/e831b2154df43fe8cff3ab7b5f406472
backend/uploads/eab3f0327e89223a5d7a5f752cabbfb0
backend/uploads/eaf9e7010d7a3d5cea80cf61ea052b70
backend/uploads/ec1be5ccf4c103d6af962e27ead05b6f
backend/uploads/ec2021b6925f25cabda941070a01e13c
backend/uploads/ec93c51fb61f94a05d671121b127344b
backend/uploads/ef0c37f099e937bc20515872bddd7537
backend/uploads/f0184e50ad0616d3782bf0e63f7a37aa
backend/uploads/f2c4dca8e3b4e67ce92efd138c921e11
backend/uploads/f2fd27182cb1715daddc3c8bd7f8396f
[21 more files omitted for size]
```

### Dependencies

- backend/package.json: @google/generative-ai@^0.21.0, axios@^1.7.7, cors@^2.8.5, dotenv@^16.4.5, express@^4.21.1, multer@^1.4.5-lts.1
- frontend/package.json: @eslint/js@^9.11.1, @google/generative-ai@^0.21.0, @types/react@^18.3.10, @types/react-dom@^18.3.0, @vitejs/plugin-react@^4.3.2, eslint@^9.11.1, eslint-plugin-react@^7.37.0, eslint-plugin-react-hooks@^5.1.0-rc.0, eslint-plugin-react-refresh@^0.4.12, globals@^15.9.0, heic2any@^0.0.4, react@^18.3.1, react-dom@^18.3.1, vite@^5.4.8

### Recent commits (newest first)

- Update README.md
- Update README.md
- more accurate
- Ui changes
- Update README.md
- Ui changes
- Update README.md
- Update README.md
- deployment changes
- Update README.md
- Initial commit

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

### backend/package.json

```
{
  "name": "backend",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": "",
  "dependencies": {
    "@google/generative-ai": "^0.21.0",
    "axios": "^1.7.7",
    "cors": "^2.8.5",
    "dotenv": "^16.4.5",
    "express": "^4.21.1",
    "multer": "^1.4.5-lts.1"
  }
}

```

### frontend/package.json

```
{
  "name": "frontend",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint .",
    "preview": "vite preview"
  },
  "dependencies": {
    "@google/generative-ai": "^0.21.0",
    "heic2any": "^0.0.4",
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  },
  "devDependencies": {
    "@eslint/js": "^9.11.1",
    "@types/react": "^18.3.10",
    "@types/react-dom": "^18.3.0",
    "@vitejs/plugin-react": "^4.3.2",
    "eslint": "^9.11.1",
    "eslint-plugin-react": "^7.37.0",
    "eslint-plugin-react-hooks": "^5.1.0-rc.0",
    "eslint-plugin-react-refresh": "^0.4.12",
    "globals": "^15.9.0",
    "vite": "^5.4.8"
  }
}

```

### backend/deps_temp_82dd47df/package.json

```
{
  "type": "module"
}

```

### backend/index.js

```javascript
const express = require('express');
const cors = require('cors');
const multer = require('multer');
const imageUploadRoute = require('./routes/imageUpload');
require('dotenv').config();

const app = express();
// const port = 5001;

app.use(cors());
app.use(express.json());

app.use('/api', imageUploadRoute);

const port = process.env.PORT || 5000;
app.listen(port, () => {
    console.log(`Server is running on port ${port}`);
});

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

### frontend/src/main.jsx

```javascript
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import App from './App.jsx'
import './index.css'

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>,
)

```

### frontend/src/App.jsx

```javascript
import { useState } from "react";
import "./App.css";
import React from "react";
import ImageUpload from "./components/ImageUpload";

function App() {
  return (
    <div>
      <h1>Food Recognition App</h1>
      <ImageUpload />
    </div>
  );
}

export default App;

```

### frontend/vite.config.js

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

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

```

### frontend/index.html

```html
<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <link rel="icon" type="image/png" href="/food.png" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>CookitUP</title>
</head>

<body>
  <div id="root"></div>
  <script type="module" src="/src/main.jsx"></script>
</body>

</html>
```

### frontend/eslint.config.js

```javascript
import js from '@eslint/js'
import globals from 'globals'
import react from 'eslint-plugin-react'
import reactHooks from 'eslint-plugin-react-hooks'
import reactRefresh from 'eslint-plugin-react-refresh'

export default [
  { ignores: ['dist'] },
  {
    files: ['**/*.{js,jsx}'],
    languageOptions: {
      ecmaVersion: 2020,
      globals: globals.browser,
      parserOptions: {
        ecmaVersion: 'latest',
        ecmaFeatures: { jsx: true },
        sourceType: 'module',
      },
    },
    settings: { react: { version: '18.3' } },
    plugins: {
      react,
      'react-hooks': reactHooks,
      'react-refresh': reactRefresh,
    },
    rules: {
      ...js.configs.recommended.rules,
      ...react.configs.recommended.rules,
      ...react.configs['jsx-runtime'].rules,
      ...reactHooks.configs.recommended.rules,
      'react/jsx-no-target-blank': 'off',
      'react-refresh/only-export-components': [
        'warn',
        { allowConstantExport: true },
      ],
    },
  },
]

```

### frontend/src/App.css

```css
#root {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem;
  text-align: center;
}

.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.react:hover {
  filter: drop-shadow(0 0 2em #61dafbaa);
}

@keyframes logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: no-preference) {
  a:nth-of-type(2) .logo {
    animation: logo-spin infinite 20s linear;
  }
}

.card {
  padding: 2em;
}

.read-the-docs {
  color: #888;
}

```

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