# Project export: KindKitchen

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: KindKitchen: Compassionate Meals for Every Diet, Bridging Tables and Hearts in Recovery.
- Devpost: https://devpost.com/software/openplate
- GitHub: https://github.com/collinjung/kindkitchen
- Demo: https://www.figma.com/file/P4LSLxlhA4KWQNccDkLXIC/KindKitchen?type=design&node-id=44%3A1198&mode=design&t=geK1yAFk2CWv5UMG-1
- Video: https://www.youtube.com/embed/v4LQ2dp7XXM?enablejsapi=1&hl=en_US&rel=0&start=&version=3&wmode=transparent
- Team: 3 GitHub contributor(s) — Susan Lee (27 commits), Collin Jung (22 commits), belindayeung02 (4 commits)

## Devpost submission (written by the team)

### Overview

Project details: In the heart of every community lies a fundamental need for connection, comfort, and nourishment. This need becomes even more critical for those battling cancer, a journey that is not only difficult but also can deeply isolate individuals from the cultural and emotional bonds that nourishes the soul. Our project, KindKitchen, was born from the realization that while the body fights a battle, the individual craves the warmth and comfort of home-cooked meals, rich in flavor and culture.

### Inspiration

: The inspiration for KindKitchen came from witnessing the current struggles of individuals fighting against cancer. When a person is undergoing chemotherapy, the toll it takes on their body is immense. Nausea, fatigue, and changes in appetite are only a few of the challenges they face on a daily basis. Yet amidst these challenges, the desire for culturally nourishing food remains constant; however, the reality is that cooking can become an arduous task. Upon learning that current meal plan programs for people with cancer often lack variety, cultural richness, and the homemade quality that brings comfort and warmth, we wanted to create a solution. We believe that food is more than just sustenance; it is a vessel for love, a reminder of home, and a bridge to one’s cultures and memories. This realization sparked a desire to create a platform that not only addresses the nutritional needs of people with cancer but also provides them with meals that can embrace their culture and evoke a sense of home and comfort, and an opportunity to combat loneliness by eating together with others.

### What it does

: KindKitchen is an app that connects people with cancer with volunteers in their community who want to share extra portions of their home-cooked meals. Users can use the app to request meals and specify any dietary restrictions and preferences. On the home page, users will be able to see upcoming meals that they have ordered in advance. They can discover other meals around their area and filter by types of cuisine as well as specify their dietary constraints. We anticipated the reality that there might be instances where the specific meals requested might not be available due to reasons like volunteer availability or time they are trying to order. Therefore, we have included an AI chatbot that recommends recipes based on dietary restrictions and preferences in case there’s currently no meals available matching the user’s preferences or if the user simply wants to cook a meal at home.

### How we built it

: We built KindKitchen with React Native as our frontend, Convex as our backend, CSS for styling, GitHub, and lots of food.

### Challenges we ran into

: While building KindKitchen, we encountered several challenges that pushed us to think creatively, especially about the human aspect of our project. One of our biggest challenges was understanding the nuanced needs of our users, individuals battling cancer. We wanted to prioritize our users throughout the project, which required us to understand and identify their nutritional needs and their emotional and cultural needs. This dive into their experiences taught us about the importance of empathy in design. We also struggled with finding an incentive for volunteers as we struggled to understand what motivates others to cook for individuals they might have never met. From a technical perspective, we struggled in learning how to use Convex and exploring its features and strengths, and we also struggled with ambition; we wanted to implement a lot more functions that we ultimately didn’t have time for, such as creating shared Zoom meetings for a virtual shared meal experience, details with profiles, and also the other side of the app, where volunteers can upload the meals they want to cook that are displayed on the main Explore page.

### Accomplishments we're proud of

: Our journey with this project marks a significant milestone for our team as it represents the first hackathon experience for the majority of our team members. Coming into this challenge, we brought together diverse backgrounds, skills, experiences, and perspectives. Yet we were united by the common goal of making a meaningful impact. We are so proud of this experience as a learning journey and a chance of testing our limits and collaborating under pressure to build with purpose. This unique experience brought excitement and uncertainty as we weren’t sure how our final product would turn out. But our accomplishments extend beyond the technical aspects as we learned to navigate the complexities of a high-pressure environment, which brought us closer as teammates through communication, decision-making, and collaboration. This experience taught us the importance of empathy in our work as well as in understanding the needs of those we hope to serve. We believe that one of our most significant achievements was our ability to transform an idea nurtured by compassion into a tangible solution that can connect a community of individuals by finding solace in the warmth of food during their most challenging times.

### What we learned

: From a technical perspective, we learned how to use Convex for the first time. Belinda learned how to code with React Native for the first time and use GitHub! Evelyn designed the entire app, Collin played with most of Convex and built the backend, and Susan pieced the frontend together.

### What's next

: We hope to emphasize more of a connection within our user community. We recognize that the journey of battling cancer can often be a solitary one, marked by the moments of loneliness. With this in mind, our next initiative aims to introduce a new dimension to KindKitchen: the opportunity for shared meals. We understand that for those undergoing chemotherapy and potentially being immunocompromised, the act of sharing a meal can be quite hard. Because of this, sharing a meal goes beyond the nutritional value and becomes a lifeline to a sense of normalcy, companionship, and support. We envision creating a safe and welcoming space where individuals can have the option of coming together to enjoy a meal through virtual meetings or carefully coordinated in-person gatherings. Our goal is to ensure that no one has to face their battle alone and instead can connect over food. In addition, we also hope to build the portal for volunteers who want to cook and share their meals, enabling them to plan and upload the meals that patients will see on their end of the Explore page.

## README (from the GitHub repository)

# Treehacks 2024 Project: [KindKitchen]
Project built by Evelyn Hur, Collin Jung, Susan Lee, Belinda Yeung

**What is KindKitchen?**
Being unable to find specialized food and recipes based on individual dietary restrictions and preferences is a pressing issue for those undergoing medical treatments and procedures. With KindKitchen, we hope to bridge the gap between families with an extra plate after preparing meals and patients who just need a nice, homecooked meal.

**Tech Stack**
This project was built using:
- React Native
- Javascript
- Expo
- Convex (Database and chatbot functionality)


## Detected evidence (automated analysis)

Indexed codebase: 33 recognized source files, 71 KB.
- JavaScript (language) — detected in the code
- OpenAI (technology) — detected in the code
- React (technology) — detected in the code
- TypeScript (language) — detected in the code

## Codebase structure (from repository index)

### Files (43 of 43)

```
.gitignore
App.js
app.json
babel.config.js
components/CarouselCards.js
components/FilterModal.js
convex/_generated/api.d.ts
convex/_generated/api.js
convex/_generated/dataModel.d.ts
convex/_generated/server.d.ts
convex/_generated/server.js
convex/exploreFood.js
convex/messages.js
convex/openai.js
convex/README.md
convex/specialItems.js
convex/tsconfig.json
convex/userPlates.js
navigation/TabNavigator.js
package.json
pages/AccountDetails.js
pages/DietRestrictions.js
pages/FAQ.js
pages/Favorites.js
pages/Notifications.js
pages/OrderHistory.js
pages/Privacy.js
pages/ProfileDetails.js
README.md
screens/Confirmation.js
screens/ExploreScreen.js
screens/HomeScreen.js
screens/OrderMealScreen.js
screens/OrderMealScreen2.js
screens/ProfileScreen.js
screens/RecipeScreen.js
tsconfig.json
utils/CarouselCardItem.js
utils/exploreFood.json
utils/sampleData.json
utils/specialItems.json
utils/userPlates.json
utils/userProfile.json
```

### Dependencies

- package.json: @babel/core@^7.20.0, @expo/metro-runtime@~3.1.3, @react-navigation/bottom-tabs@^6.5.12, @react-navigation/native@^6.1.10, @react-navigation/native-stack@^6.9.18, convex@^1.9.0, expo@~50.0.7, expo-status-bar@~1.11.1, openai@^4.28.0, react@18.2.0, react-dom@^18.2.0, react-native@0.73.4, react-native-dotenv@^3.4.10, react-native-flip-card@^3.5.7, react-native-get-random-values@^1.10.0, react-native-safe-area-context@4.8.2, react-native-screens@~3.29.0, react-native-snap-carousel@^4.0.0-beta.6, react-native-web@~0.19.6, typescript@^5.3.0

### Recent commits (newest first)

- changes
- backend update
- small navigation bug in order confirmation
- Merge branch 'master' of https://github.com/collinjung/openplate
- added dietary restrictions
- Update README.md
- Merge pull request #6 from collinjung/order-page-susan
- Merge branch 'master' into order-page-susan
- order flow done
- Pages for profile
- Merge pull request #5 from collinjung/belinda-profile
- profile
- home screen header
- fix ui changes
- Merge branch 'master' into order-page-susan
- Order flow screen 1 done
- style
- Create README.md
- added help text
- Added descriptions to myplates

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

### package.json

```
{
  "name": "openplate",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "@expo/metro-runtime": "~3.1.3",
    "@react-navigation/bottom-tabs": "^6.5.12",
    "@react-navigation/native": "^6.1.10",
    "@react-navigation/native-stack": "^6.9.18",
    "convex": "^1.9.0",
    "expo": "~50.0.7",
    "expo-status-bar": "~1.11.1",
    "openai": "^4.28.0",
    "react": "18.2.0",
    "react-dom": "^18.2.0",
    "react-native": "0.73.4",
    "react-native-dotenv": "^3.4.10",
    "react-native-flip-card": "^3.5.7",
    "react-native-get-random-values": "^1.10.0",
    "react-native-safe-area-context": "4.8.2",
    "react-native-screens": "~3.29.0",
    "react-native-snap-carousel": "^4.0.0-beta.6",
    "react-native-web": "~0.19.6",
    "typescript": "^5.3.0"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0"
  },
  "private": true
}

```

### App.js

```javascript
import React from "react";
import { NavigationContainer } from "@react-navigation/native";
import TabNavigator from "./navigation/TabNavigator";

import { ConvexProvider, ConvexReactClient } from "convex/react";
import "react-native-get-random-values";
import { CONVEX_URL } from "@env";

const convex = new ConvexReactClient(CONVEX_URL, {
  unsavedChangesWarning: false,
});

export default function App() {
  return (
    <ConvexProvider client={convex}>
      <NavigationContainer>
        <TabNavigator />
      </NavigationContainer>
    </ConvexProvider>
  );
}

```

### convex/_generated/server.js

```javascript
/* eslint-disable */
/**
 * Generated utilities for implementing server-side Convex query and mutation functions.
 *
 * THIS CODE IS AUTOMATICALLY GENERATED.
 *
 * Generated by convex@1.9.0.
 * To regenerate, run `npx convex dev`.
 * @module
 */

import {
  actionGeneric,
  httpActionGeneric,
  queryGeneric,
  mutationGeneric,
  internalActionGeneric,
  internalMutationGeneric,
  internalQueryGeneric,
} from "convex/server";

/**
 * Define a query in this Convex app's public API.
 *
 * This function will be allowed to read your Convex database and will be accessible from the client.
 *
 * @param func - The query function. It receives a {@link QueryCtx} as its first argument.
 * @returns The wrapped query. Include this as an `export` to name it and make it accessible.
 */
export const query = queryGeneric;

/**
 * Define a query that is only accessible from other Convex functions (but not from the client).
 *
 * This function will be allowed to read from your Convex database. It will not be accessible from the client.
 *
 * @param func - The query function. It receives a {@link QueryCtx} as its first argument.
 * @returns The wrapped query. Include this as an `export` to name it and make it accessible.
 */
export const internalQuery = internalQueryGeneric;

/**
 * Define a mutation in this Convex app's public API.
 *
 * This function will be allowed to modify your Convex database and will be accessible from the client.
 *
 * @param func - The mutation function. It receives a {@link MutationCtx} as its first argument.
 * @returns The wrapped mutation. Include this as an `export` to name it and make it accessible.
 */
export const mutation = mutationGeneric;

/**
 * Define a mutation that is only accessible from other Convex functions (but not from the client).
 *
 * This function will be allowed to modify your Convex database. It will not be accessible from the client.
 *
 * @param func - The mutation function. It receives a {@link MutationCtx} as its first argument.
 * @returns The wrapped mutation. Include this as an `export` to name it and make it accessible.
 */
export const internalMutation = internalMutationGeneric;

/**
 * Define an action in this Convex app's public API.
 *
 * An action is a function which can execute any JavaScript code, including non-deterministic
 * code and code with side-effects, like calling third-party services.
 * They can be run in Convex's JavaScript environment or in Node.js using the "use node" directive.
 * They can interact with the database indirectly by calling queries and mutations using the {@link ActionCtx}.
 *
 * @param func - The action. It receives an {@link ActionCtx} as its first argument.
 * @returns The wrapped action. Include this as an `export` to name it and make it accessible.
 */
export const action = actionGeneric;

/**
 * Define an action that is only accessible from other Convex functions (but not from the client).
 *
 * @param func - The function. It receives an {@link ActionCtx} as its first argument.
 * @returns The wrapped function. Include this as an `export` to name it and make it accessible.
 */
export const internalAction = internalActionGeneric;

/**
 * Define a Convex HTTP action.
 *
 * @param func - The function. It receives an {@link ActionCtx} as its first argument, and a `Request` object
 * as its second.
 * @returns The wrapped endpoint function. Route a URL path to this function in `convex/http.js`.
 */
export const httpAction = httpActionGeneric;

```

### babel.config.js

```javascript
module.exports = function (api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo"],
    plugins: ["module:react-native-dotenv"],
  };
};

```

### convex/exploreFood.js

```javascript
import { query } from "./_generated/server";

export const get = query({
  args: {},
  handler: async (ctx) => {
    return await ctx.db.query("exploreFood").collect();
  },
});

```

### convex/specialItems.js

```javascript
import { query } from "./_generated/server";

export const get = query({
  args: {},
  handler: async (ctx) => {
    return await ctx.db.query("SpecialItems").collect();
  },
});

```

### pages/FAQ.js

```javascript
import React from "react";
import { View, Text } from "react-native";
const FAQ = () => {
  return (
    <View>
      <Text>Hello World</Text>
    </View>
  );
};

export default FAQ;

```

### pages/Privacy.js

```javascript
import React from "react";
import { View, Text } from "react-native";
const Privacy = () => {
  return (
    <View>
      <Text>Hello World</Text>
    </View>
  );
};

export default Privacy;

```

### pages/Favorites.js

```javascript
import React from "react";
import { View, Text } from "react-native";
const Favorites = () => {
  return (
    <View>
      <Text>Hello World</Text>
    </View>
  );
};

export default Favorites;

```

### pages/OrderHistory.js

```javascript
import React from "react";
import { View, Text } from "react-native";
const OrderHistory = () => {
  return (
    <View>
      <Text>Hello World</Text>
    </View>
  );
};

export default OrderHistory;

```

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