# Project export: Sugar Plum

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: Sync menstrual cycle tracking with nutrition and lifestyle
- Devpost: https://devpost.com/software/sugar-plum
- GitHub: https://github.com/aidskiy/calhacks24
- Team: 4 GitHub contributor(s) — Aida Bozulan (9 commits), Victor Ngetich (4 commits), Vijay Kumar Prakash (2 commits), iychi (2 commits)

## Devpost submission (written by the team)

### Inspiration

Women experience fluctuations in energy, mood, and physical well-being throughout their menstrual cycle. Given hormonal changes can significantly impact daily life, we felt it would be good to have a tool that empowers women to understand and embrace these changes by providing tailored lifestyle and dietary recommendations.

### What it does

On top of helping women keep track of their menstrual cycles, this app provides dietary recommendations and exercise/lifestyle tips to allow women to stay in sync with their body's natural rhythms and optimize their health and well-being.

### How we built it

We developed Sugar Plum as a web application using Next.js for full-stake development. We integrated a calendar API for cycle tracking and created a Mongo database to store data locally. For the nutrition and exercise recommendations, we build a chat bot using OpenAI to based on scientific research. The app uses machine learning algorithms to personalize suggestions based on user input and cycle patterns.

### Challenges we ran into

We were originally building a mobile app, which all of us are new to. After facing significant challenges there, we pivoted to a web application. Further, while attempting to build this and collaborate asynchronously, we ended up with lots of merge conflicts and our code broke several times! Also, the WiFi at the venue was not great, and that was a major inconvenience.

### Accomplishments we're proud of

We overcame the issues by hopping on a call and debugging together, and doing peer programming sessions. Finally, given most of the team are first-time hackers, we're proud we put ourselves out there and participated in something we weren't comfortable with.

### What we learned

Hacking is fun! The importance of flexibility and pivoting when faced with obstacles How to quickly research and synthesize scientific information into practical advice Collaborative problem-solving and effective team communication

### What's next

We want to train the AI model better so that it gives more relevant suggestions that are backed by research. We will want to make the application cross-compatible on multiple devices. Plenty of UI improvements!

## README (from the GitHub repository)

# Menstrual Cycle Tracker + Nutrition & Lifestyle Insights

Authors: Aida, Iyu, Victor, Vijay



## Detected evidence (automated analysis)

Indexed codebase: 34 recognized source files, 178 KB.
- C (language) — detected in the code
- CSS (language) — detected in the code
- Express (technology) — detected in the code
- Google Gemini (technology) — detected in the code
- JavaScript (language) — detected in the code
- MongoDB (technology) — detected in the code
- Next.js (technology) — detected in the code
- OpenAI (technology) — detected in the code
- React (technology) — detected in the code
- Swift (language) — detected in the code
- Tailwind CSS (technology) — detected in the code
- TypeScript (language) — detected in the code
- Ruby (language) — claimed on Devpost, not found in the code

## Codebase structure (from repository index)

### Files (64 of 64)

```
.DS_Store
.gitignore
index.js
menstrual-diet-app/.eslintrc.json
menstrual-diet-app/.gitignore
menstrual-diet-app/next.config.mjs
menstrual-diet-app/package.json
menstrual-diet-app/postcss.config.mjs
menstrual-diet-app/README.md
menstrual-diet-app/src/app/api/generate/route.js
menstrual-diet-app/src/app/components/calendarStyles.css
menstrual-diet-app/src/app/components/chat/route.ts
menstrual-diet-app/src/app/components/chatbot/index.tsx
menstrual-diet-app/src/app/components/Dashboard.tsx
menstrual-diet-app/src/app/components/MenstrualReport.tsx
menstrual-diet-app/src/app/components/PeriodForm.tsx
menstrual-diet-app/src/app/components/UserDataScreen.tsx
menstrual-diet-app/src/app/components/utils.ts
menstrual-diet-app/src/app/Form/page.tsx
menstrual-diet-app/src/app/globals.css
menstrual-diet-app/src/app/layout.tsx
menstrual-diet-app/src/app/page.tsx
menstrual-diet-app/src/app/report/page.tsx
menstrual-diet-app/tailwind.config.ts
menstrual-diet-app/tsconfig.json
MenstrualSyncingApp/.gitignore
MenstrualSyncingApp/app.json
MenstrualSyncingApp/app/_layout.tsx
MenstrualSyncingApp/app/(tabs)/_layout.tsx
MenstrualSyncingApp/app/(tabs)/chatbot.tsx
MenstrualSyncingApp/app/(tabs)/index.tsx
MenstrualSyncingApp/babel.config.js
MenstrualSyncingApp/constants/Colors.ts
MenstrualSyncingApp/constants/icons.tsx
MenstrualSyncingApp/ios/.gitignore
MenstrualSyncingApp/ios/.xcode.env
MenstrualSyncingApp/ios/MenstrualSyncingApp.xcodeproj/project.pbxproj
MenstrualSyncingApp/ios/MenstrualSyncingApp.xcodeproj/xcshareddata/xcschemes/MenstrualSyncingApp.xcscheme
MenstrualSyncingApp/ios/MenstrualSyncingApp.xcworkspace/contents.xcworkspacedata
MenstrualSyncingApp/ios/MenstrualSyncingApp/AppDelegate.h
MenstrualSyncingApp/ios/MenstrualSyncingApp/AppDelegate.mm
MenstrualSyncingApp/ios/MenstrualSyncingApp/Images.xcassets/AppIcon.appiconset/Contents.json
MenstrualSyncingApp/ios/MenstrualSyncingApp/Images.xcassets/Contents.json
MenstrualSyncingApp/ios/MenstrualSyncingApp/Images.xcassets/SplashScreen.imageset/Contents.json
MenstrualSyncingApp/ios/MenstrualSyncingApp/Images.xcassets/SplashScreenBackground.imageset/Contents.json
MenstrualSyncingApp/ios/MenstrualSyncingApp/Info.plist
MenstrualSyncingApp/ios/MenstrualSyncingApp/main.m
MenstrualSyncingApp/ios/MenstrualSyncingApp/MenstrualSyncingApp-Bridging-Header.h
MenstrualSyncingApp/ios/MenstrualSyncingApp/MenstrualSyncingApp.entitlements
MenstrualSyncingApp/ios/MenstrualSyncingApp/noop-file.swift
MenstrualSyncingApp/ios/MenstrualSyncingApp/PrivacyInfo.xcprivacy
MenstrualSyncingApp/ios/MenstrualSyncingApp/SplashScreen.storyboard
MenstrualSyncingApp/ios/MenstrualSyncingApp/Supporting/Expo.plist
MenstrualSyncingApp/ios/Podfile
MenstrualSyncingApp/ios/Podfile.lock
MenstrualSyncingApp/ios/Podfile.properties.json
MenstrualSyncingApp/package.json
MenstrualSyncingApp/README.md
MenstrualSyncingApp/scripts/reset-project.js
MenstrualSyncingApp/tsconfig.json
models/MenstrualData.js
package.json
README.md
routes/menstrualData.js
```

### Dependencies

- menstrual-diet-app/package.json: @google/generative-ai@^0.21.0, @heroicons/react@^1.0.6, @tailwindcss/forms@^0.5.9, @types/node@^20, @types/react@^18, @types/react-dom@^18, axios@^1.7.7, eslint@^8, eslint-config-next@14.2.15, next@14.2.15, openai@^4.68.1, postcss@^8, react@^18, react-calendar@^5.0.0, react-datepicker@^7.5.0, react-dom@^18, tailwindcss@^3.4.1, typescript@^5
- MenstrualSyncingApp/package.json: @babel/core@^7.20.0, @expo/vector-icons@^14.0.2, @react-navigation/native@^6.0.2, @types/jest@^29.5.12, @types/react@~18.2.45, @types/react-native@^0.73.0, @types/react-native-calendar-picker@^8.0.0, @types/react-test-renderer@^18.0.7, expo@~51.0.28, expo-constants@~16.0.2, expo-font@~12.0.9, expo-linking@~6.3.1, expo-router@~3.5.23, expo-splash-screen@~0.27.5, expo-status-bar@~1.12.1, expo-system-ui@~3.0.7, expo-web-browser@~13.0.3, jest@^29.2.1, jest-expo@~51.0.3, react@18.2.0, react-dom@18.2.0, react-native@0.74.5, react-native-calendar-picker@^8.0.5, react-native-gesture-handler@~2.16.1, react-native-reanimated@~3.10.1, react-native-safe-area-context@4.10.5, react-native-screens@3.31.1, react-native-web@~0.19.10, react-test-renderer@18.2.0, typescript@~5.3.3
- package.json: @types/express@^5.0.0, body-parser@^1.20.3, cors@^2.8.5, dotenv@^16.4.5, express@^4.21.1, mongoose@^8.7.2

### Recent commits (newest first)

- adds AI nutrition and lifestyle recommendation
- its working
- some recommendations
- UserDataScreen
- submit navigate to report
- updates
- generating recommendations
- generating recommendations
- routes the report to the report page
- creates menstrual report
- Merge branch 'main' of https://github.com/aidskiy/calhacks24
- implements period data saving and syncing
- Add title
- Update README.md
- formpage
- small mistakes oops
- WebApp starter code
- deleted wrong folder
- layout
- Merge branch 'main' of https://github.com/aidskiy/calhacks24

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

### package.json

```
{
  "name": "menstrual-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "body-parser": "^1.20.3",
    "cors": "^2.8.5",
    "dotenv": "^16.4.5",
    "express": "^4.21.1",
    "mongoose": "^8.7.2"
  },
  "devDependencies": {
    "@types/express": "^5.0.0"
  }
}

```

### menstrual-diet-app/package.json

```
{
  "name": "menstrual-diet-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@google/generative-ai": "^0.21.0",
    "@heroicons/react": "^1.0.6",
    "@tailwindcss/forms": "^0.5.9",
    "axios": "^1.7.7",
    "next": "14.2.15",
    "openai": "^4.68.1",
    "react": "^18",
    "react-calendar": "^5.0.0",
    "react-datepicker": "^7.5.0",
    "react-dom": "^18"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "eslint": "^8",
    "eslint-config-next": "14.2.15",
    "postcss": "^8",
    "tailwindcss": "^3.4.1",
    "typescript": "^5"
  }
}

```

### MenstrualSyncingApp/package.json

```
{
  "name": "menstrualsyncingapp",
  "main": "expo-router/entry",
  "version": "1.0.0",
  "scripts": {
    "start": "expo start",
    "reset-project": "node ./scripts/reset-project.js",
    "android": "expo run:android",
    "ios": "expo run:ios",
    "web": "expo start --web",
    "test": "jest --watchAll",
    "lint": "expo lint"
  },
  "jest": {
    "preset": "jest-expo"
  },
  "dependencies": {
    "@expo/vector-icons": "^14.0.2",
    "@react-navigation/native": "^6.0.2",
    "@types/react-native-calendar-picker": "^8.0.0",
    "expo": "~51.0.28",
    "expo-constants": "~16.0.2",
    "expo-font": "~12.0.9",
    "expo-linking": "~6.3.1",
    "expo-router": "~3.5.23",
    "expo-splash-screen": "~0.27.5",
    "expo-status-bar": "~1.12.1",
    "expo-system-ui": "~3.0.7",
    "expo-web-browser": "~13.0.3",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-native": "0.74.5",
    "react-native-calendar-picker": "^8.0.5",
    "react-native-gesture-handler": "~2.16.1",
    "react-native-reanimated": "~3.10.1",
    "react-native-safe-area-context": "4.10.5",
    "react-native-screens": "3.31.1",
    "react-native-web": "~0.19.10"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@types/jest": "^29.5.12",
    "@types/react": "~18.2.45",
    "@types/react-native": "^0.73.0",
    "@types/react-test-renderer": "^18.0.7",
    "jest": "^29.2.1",
    "jest-expo": "~51.0.3",
    "react-test-renderer": "18.2.0",
    "typescript": "~5.3.3"
  },
  "private": true
}

```

### index.js

```javascript
// index.js
require("dotenv").config();
const express = require("express");
const mongoose = require("mongoose");

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

// Middleware
app.use(express.json());

// MongoDB Connection
mongoose
  .connect(process.env.MONGODB_URI, {
    useNewUrlParser: true,
    useUnifiedTopology: true,
  })
  .then(() => {
    console.log("Connected to MongoDB Atlas");
  })
  .catch((err) => {
    console.error("Error connecting to MongoDB Atlas", err);
  });

// Routes
app.get("/", (req, res) => {
  res.send("Hello, World!");
});

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

// Import Routes

const menstrualDataRoutes = require("./routes/menstrualData");
app.use("/menstrual-data", menstrualDataRoutes);

```

### MenstrualSyncingApp/app/_layout.tsx

```typescript

import { useFonts } from 'expo-font';
import { Stack } from 'expo-router';
import * as SplashScreen from 'expo-splash-screen';
import { useEffect } from 'react';
import 'react-native-reanimated';


// Prevent the splash screen from auto-hiding before asset loading is complete.
SplashScreen.preventAutoHideAsync();

export default function RootLayout() {

  const [loaded] = useFonts({
    SpaceMono: require('../assets/fonts/SpaceMono-Regular.ttf'),
  });

  useEffect(() => {
    if (loaded) {
      SplashScreen.hideAsync();
    }
  }, [loaded]);

  if (!loaded) {
    return null;
  }

  return (
      <Stack>
        <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
      </Stack>
  );
}

```

### MenstrualSyncingApp/app/(tabs)/index.tsx

```typescript
import { StyleSheet, View, Text } from 'react-native'
import React from 'react'

const Page = () => {
  return (
    <View>
      <Text>Page</Text>
    </View>
  )
}

export default Page

const styles = StyleSheet.create({})
```

### MenstrualSyncingApp/app/(tabs)/_layout.tsx

```typescript
import { StyleSheet, View, Text } from 'react-native'
import React from 'react'
import { Tabs } from 'expo-router'

const Layout = () => {
  return (
    <Tabs />
  )
}

export default Layout

const styles = StyleSheet.create({})
```

### menstrual-diet-app/src/app/page.tsx

```typescript
// src/app/page.tsx
import React from "react";
import PeriodForm from "./components/PeriodForm";

const HomePage: React.FC = () => {
  return (
    <div className="p-4">
      <PeriodForm />
    </div>
  );
};

export default HomePage;

```

### menstrual-diet-app/src/app/layout.tsx

```typescript
import type { Metadata } from "next";
import localFont from "next/font/local";
import "./globals.css";

const geistSans = localFont({
  src: "./fonts/GeistVF.woff",
  variable: "--font-geist-sans",
  weight: "100 900",
});
const geistMono = localFont({
  src: "./fonts/GeistMonoVF.woff",
  variable: "--font-geist-mono",
  weight: "100 900",
});

export const metadata: Metadata = {
  title: "Sugar Plum",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>{children}</body>
    </html>
  );
}

```

### menstrual-diet-app/src/app/Form/page.tsx

```typescript
import React from 'react';
import PeriodForm from '../components/PeriodForm';

const HomePage: React.FC = () => {
  return (
    <div className="p-4">
      <PeriodForm />
      
    </div>
  );
};

export default HomePage;
```

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