FlavorFlow

From Fridge to Feast: Your Personal AI Cooking Assistant!

Ever stared into your fridge, full of ingredients but empty of ideas? FlavorFlow is here to help! It's a smart cooking assistant powered by Google's Gemini AI that turns your available ingredients into delicious recipes. Just chat with the assistant, tell it what you have, and get inspired.

Live link: FlavorFlow

This app was built for the boot.dev hackathon.

---

✨ Features

• AI-Powered Recipe Generation: Get creative recipe suggestions based on the ingredients you have on hand.
• Conversational Interface: Chat with the AI to refine recipes, ask for variations, or get cooking advice.
• Beautiful Recipe Cards: View generated recipes in a clean, easy-to-read card format.
• Detailed Recipe View: Click on a recipe to see a full-screen view with ingredients, step-by-step instructions, prep time, and serving size.
• Automatic Image Generation: Each recipe comes with a beautiful, relevant image sourced from Unsplash to give you a visual taste of the final dish.
• Persistent Chat History: Your conversations are saved locally, so you can always come back to a previous recipe or idea.
• Light & Dark Mode: A sleek and modern interface that's easy on the eyes, day or night.

⚙️ How It Works

FlavorFlow uses a Next.js frontend and backend to create a seamless experience.

1. You type in the ingredients you have or the kind of meal you're looking for.
2. The Next.js backend sends your request to the Google Gemini API with a specialized prompt to generate recipes.
3. The AI returns a structured JSON response containing recipe details.
4. For each recipe, a descriptive search query is sent to the Unsplash API to fetch a high-quality image.
5. The recipes and images are then beautifully displayed on the user interface for you to explore!

🛠️ Tech Stack

• Framework: Next.js
• Language: TypeScript
• AI: Google Gemini via Vercel AI SDK
• Styling: Tailwind CSS
• UI Components: shadcn/ui, Radix UI
• Animations: Framer Motion
• Icons: Lucide React

🔧 Getting Started

To get a local copy up and running, follow these simple steps.

Prerequisites

• Node.js (v18 or higher)
• pnpm

Installation

1. Clone the repo

   git clone [https://github.com/xddinside/flavorflow.git](https://github.com/xddinside/flavorflow.git)
   

2. Install NPM packages

   pnpm install
   

3. Set up your environment variables Create a .env.local file in the root of the project and add your API keys:

   GOOGLE_GENERATIVE_AI_API_KEY_1=your_google_api_key
   UNSPLASH_ACCESS_KEY_1=your_unsplash_api_key
   # You can add more keys for rate-limiting
   

4. Run the development server

   pnpm dev
   

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

🗺️ Roadmap & Future Features

Here are some features we're planning to add:

• Bookmark/Favorite Recipes: Allow users to save their favorite recipes.
• Recipe History Carousel: Instead of clearing recipes, allow users to scroll through the history of generated recipes within a chat.
• Cloud Sync & Auth: Implement authentication (e.g., Kinde) and a database (e.g., Neon Postgres) to sync user chats, recipes, and bookmarks across devices.
• Shareable Recipes: Allow users to share recipes or their favorites list with a unique link.
• Improved Images: Improve the correlation between the images fetched and the recipes generated.
• Mobile Responsive: Make the UI better for mobile. Right now, it's really good on pc and bigger screens, and decent on smaller screens.

🤖 Disclaimer

We built this project as a learning experience, so a lot of googling was done, and questions asked to LLMs. Even still, we made sure to almost never just copy-paste its code, but rather ask it to explain its boilerplate code and implemented it again for our own app. But, still there is some code here that was partially generated by AI (although still altered by us to our specific use case / how we wanted it).

• The details that show up when the recipe card is clicked: its skeleton was written using an AI, although we changed up the layouts inside it a little bit and changed the CSS to how we wanted it.

• Used to fix a lot of errors / understand them (as we're fairly new to this stack)

Everything else that isn't mentioned above was written entirely by us, or had its boilerplate taken from the internet and changed to fit our use case/needs.