RecipeAI Mobile App - Expo Project
Description
RecipeAI is a mobile application built with Expo, designed to help users discover recipes based on the ingredients they have. The app allows users to manually input ingredients or select from preset options, and then uses AI to generate personalized recipes. Users can also get AI-powered improvement suggestions to enhance their recipes. This app is intuitive and user-friendly, with a sleek, modern design.

Features
Ingredient Input with Quick Selection

Users can manually input ingredients.
There will be preset ingredient tags like "tomato," "cheese," and "pepper" for quick selection.
Recipe Suggestions

AI generates personalized recipe suggestions based on selected ingredients.
Recipes will be for a specified number of people (3 by default).
AI-Powered Recipe Improvement

An "Improve" button will allow the AI to suggest additional ingredients that the user may not have but could improve the dish.
Example: “You don’t have garlic, but it would enhance the dish.”
Saved Recipes and History

Users can save favorite recipes and view their history of searched dishes.
Step-by-Step Cooking Guide

After selecting a recipe, users can follow an easy step-by-step guide for cooking.
Technologies Used
Frontend:

Expo (React Native): The base for building the mobile app.
React Navigation: For handling navigation between screens.
Redux (or Context API): For managing app state and user preferences.
Styled Components / SASS: For modern, clean, and colorful UI styling.
Backend and AI Integration:

Node.js & Express: To serve API requests and handle backend logic.
MongoDB: For storing user data, recipes, and saved items.
Pollinations AI API: For generating recipe suggestions and improvement recommendations based on ingredients.
Text: https://text.pollinations.ai/
Image: https://pollinations.ai/p/
Firebase Auth: For handling user accounts and authentication.
Screens and User Flow
Home Screen:

Ingredient Entry: Manual input with autocomplete suggestions.
Preset Tags: Quick access to common ingredients like "Tomato," "Cheese," "Bell Pepper." Clicking on a tag adds it to the ingredient list.
Improve Button: Tapping this sends the current ingredient list to the AI, which suggests improvements.
Recipe Suggestions:

Displayed after the user has entered their ingredients.
Shows a list of recipes generated by the AI based on the available ingredients.
Each recipe has an image generated by the Pollinations Image API.
Option to save the recipe or view it step-by-step.
Recipe Details:

Shows detailed steps for cooking the recipe.
Users can follow along with a step-by-step guide that includes timers and reminders.
Users can set servings to match the number of people (default 3).
Profile & Favorites:

Users can access their saved recipes, preferences, and history.
API Integration Example
Pollinations AI (Text & Image)
We'll use Pollinations AI to both suggest recipes and offer additional ingredients to improve recipes.

Text API for Recipe Suggestions:

Prompt: “Generate a recipe with [user’s ingredients] for 3 people. It should be easy to cook for dinner.”
Endpoint: https://text.pollinations.ai/
Response: A generated recipe with steps, ingredients, and preparation time.
js
Kodu kopyala
const axios = require('axios');

async function getRecipe(ingredients) {
  const prompt = `Generate a recipe with ${ingredients.join(', ')} for 3 people.`;
  const response = await axios.post('https://text.pollinations.ai/', { prompt });
  return response.data;
}
Text API for Improvement Suggestions:

Prompt: “These are the available ingredients: [user’s ingredients]. Suggest additional ingredients to improve the recipe.”
Response: AI suggests extra ingredients.
js
Kodu kopyala
async function improveRecipe(ingredients) {
  const prompt = `These are the available ingredients: ${ingredients.join(', ')}. Suggest additional ingredients to improve the recipe.`;
  const response = await axios.post('https://text.pollinations.ai/', { prompt });
  return response.data;
}
Image API:

For every generated recipe, we'll use the Pollinations Image API to create a vibrant, colorful dish representation.
js
Kodu kopyala
async function getRecipeImage(recipeDescription) {
  const prompt = `A vibrant image of ${recipeDescription}.`;
  const response = await axios.post('https://pollinations.ai/p/', { prompt });
  return response.data;
}
Project Structure
bash
Kodu kopyala
RecipeAI-Mobile/
│
├── assets/                  # Icons, images, fonts, etc.
│
├── components/              # Reusable UI components
│   ├── IngredientInput.js   # Input for entering ingredients
│   ├── RecipeCard.js        # UI for displaying recipes
│   └── StepGuide.js         # Step-by-step cooking guide
│
├── screens/                 # Application screens
│   ├── HomeScreen.js        # Ingredient input and improve functionality
│   ├── RecipeScreen.js      # Shows recipe suggestions
│   └── ProfileScreen.js     # User's profile and saved recipes
│
├── services/                # API calls
│   ├── pollinationsApi.js   # Pollinations AI integration
│   └── firebaseConfig.js    # Firebase authentication setup
│
├── App.js                   # Main app file
├── app.json                 # App configuration (Expo specific)
└── package.json             # Dependencies and scripts
Expo Project Setup & Installation
Install Expo CLI:

bash
Kodu kopyala
npm install -g expo-cli
Clone the Repository:

bash
Kodu kopyala
git clone https://github.com/username/recipeai-mobile.git
cd recipeai-mobile
Install Dependencies:

bash
Kodu kopyala
npm install
Set up Firebase:

Create a Firebase project and enable authentication.
Add your Firebase config to firebaseConfig.js.
Run the App:

bash
Kodu kopyala
expo start
New Features to Add
Preset Ingredient Tags:

Example: Display tags like "Tomato," "Cheese," "Pepper." Users can tap to add them to the list.
Implementation: Add a component for displaying common ingredients.
Improve Button:

Function: AI suggests additional ingredients if the user has missing key ingredients.
Text: "You don’t have garlic, but adding it would improve the flavor."
Recipe Suggestion:

Based on user-entered ingredients, recipes are generated for 3 people by default. AI provides recipe steps, images, and cooking instructions.
UI/UX Design
The design will be sleek, modern, and colorful:

Color Scheme: Use vibrant colors like orange, green, and blue for buttons, and light backgrounds for better contrast.
Ingredient Tags: Display common ingredients as colorful, clickable tags.
Step-by-Step Cooking: Easy-to-follow steps with a large, clean interface. Use icons and color-coded timers to enhance the cooking experience.
AI Improvements & Future Plans
Advanced AI Suggestions: In the future, we plan to add user feedback for recipe quality, allowing the AI to learn and suggest better options over time.
Dietary Preferences: Include filters for dietary restrictions (vegan, keto, etc.).
Shopping List Generator: Automatically create a shopping list for missing ingredients based on selected recipes.