Table of Contents

• Introduction
• Project Overview
• Technology Stack
• Team and Responsibilities
• Project Setup Overview

Introduction

CookAI is a platform that tackles food waste by utilizing AI to manage a digital garden (database) of your fridge's contents, offering the ability to track, add, or remove items, and generating personalized recipe suggestions based on available ingredients. This project aims to revolutionize kitchen experiences by providing ingredient analysis and interactive cooking assistance, addressing both global food waste issues and local food insecurity among UBC students.

Project Overview

The project comprises both frontend and backend components:

• Frontend:

  • Interactive User Interface for recipe selection and customization.
  • Real-time feedback and suggestions based on user preferences.

• Backend:

  • AI-driven algorithm for recipe recommendations.
  • Database management for user profiles and recipe data.

The core process involves integrating AI capabilities to analyze user preferences and suggest recipes, creating a user-friendly interface for seamless interaction.

Technology Stack

The project utilizes a diverse technology stack:

• File Management

  • GitHub for version control.
  • Git for local repository management.
  • Git Repository for collaborative development.

• Frontend:

  • Next.js for server-side rendering and static site generation.
  • JavaScript for scripting.
  • React for building user interfaces.
  • Tailwind CSS for styling.

• Backend:

  • Node.js as the runtime environment.
  • Express.js for building the server.
  • MongoDB for database management.
  • Python for AI and machine learning algorithms.

• Presentation:

  • Figma for UI/UX design.
  • Google Slides for presentations and pitches.

Team and Responsibilities

• John: Frontend, Project Management, Github & Git Reposetory Setup
• Jenny: Frontend, Figma, Presentation
• Aronn: Backend, Presentation
• Min: Backend, Frontend Integration

Project Setup Overview

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Inter, a custom Google Font.

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.