Dinner Matchmaker

Dinner Matchmaker is a web application that helps you generate personalized recipes based on your guests' dietary preferences and restrictions.

Table of Contents

• Overview
• Features
• Technologies Used
• Architecture
• Project Structure
• Setup and Installation
• Authentication
• Guest Management
• Recipe Generation
• Database Schema
• Recipe Storage
• AI Integration
• Contributing

Overview

Dinner Matchmaker helps you plan meals when hosting guests with various dietary restrictions. The application allows you to create profiles for your guests, specify their dietary preferences, and then generate suitable recipes that accommodate everyone's needs.

Features

• User Authentication: Secure login and registration system
• Guest Profiles: Create, edit, and delete guest profiles with dietary preferences
• Guest Categorization: Organize guests by categories (family, friends, colleagues, etc.)
• Dietary Preferences: Support for various dietary restrictions (vegetarian, vegan, gluten-free, etc.)
• Recipe Generation: AI-powered recipe generation based on guest preferences
• Recipe Storage: Save and retrieve your favorite recipes
• Customizable Recipe Options: Set cooking time, preparation time, difficulty, and more
• Multiple AI Providers: Generate recipes using Gemini or Perplexity AI models

Technologies Used

Frontend

• React - UI library
• TypeScript - Type-safe JavaScript
• Tailwind CSS - Utility-first CSS framework
• Shadcn UI - UI component library
• Lucide React - Icon library
• React Router - Client-side routing
• Zustand - State management
• React Hook Form - Form handling

Backend

• Supabase - Backend-as-a-Service platform
• Supabase Auth - Authentication service
• PostgreSQL - Database (via Supabase)
• Row Level Security - Database security policies

AI Services

• Google Gemini API - AI for recipe generation
• Perplexity API - Alternative AI for recipe generation

Architecture

The application follows a modern web architecture:

• Frontend: React Single Page Application (SPA)
• Backend: Serverless using Supabase
• Database: PostgreSQL hosted on Supabase
• Authentication: Handled by Supabase Auth
• State Management: Combination of local state, React Context, and Zustand
• External Services: Google Gemini API and Perplexity API for recipe generation

Project Structure

src/
├── components/         # React components 
│   ├── layout/         # Layout components
│   ├── ui/             # UI components (from shadcn)
│   ├── guest-form/     # Guest form components
│   ├── recipe/         # Recipe-related components
├── hooks/              # Custom React hooks
├── integrations/       # External service integrations
│   └── supabase/       # Supabase client and types
├── lib/                # Utility functions
├── pages/              # Page components
├── services/           # Service functions
│   ├── recipe/         # Recipe generation services
│   └── translations/   # Translation services
├── store/              # Zustand stores
└── types/              # TypeScript type definitions

Setup and Installation

1. Clone the repository:

   git clone [repository-url]
   cd dinner-matchmaker

2. Install dependencies:

   npm install

3. Set up Supabase:

   • Create a Supabase project
   • Set up the database tables as defined in the Database Schema section
   • Configure authentication providers
   • Configure RLS policies

4. Create environment variables: Create a .env file with the following variables:

   VITE_SUPABASE_URL=your-supabase-url
   VITE_SUPABASE_ANON_KEY=your-supabase-anon-key
   

5. Run the development server:

   npm run dev

Authentication

The application uses Supabase Auth for authentication. The authentication flow is as follows:

1. Users register or log in through the Auth component
2. Upon successful authentication, the user is redirected to the home page
3. The authenticated user's session is stored in the browser
4. Protected routes check for authentication and redirect to the login page if not authenticated

Authentication logic is primarily in src/components/Auth.tsx and src/App.tsx.

Guest Management

Guests are managed through the following components and services:

• GuestManager.tsx: Main component for managing guests
• GuestList.tsx: Displays the list of guests
• CreateGuestForm.tsx: Form for creating and editing guests
• GuestProfile.tsx: Contains the Guest type definition
• guestDatabaseService.ts: Service for CRUD operations on guests

Each guest has:

• A name
• A category (family, friends, colleagues, other)
• Dietary preferences (vegetarian, vegan, etc.)

Guest data is stored in the guests table in Supabase.

Recipe Generation

Recipes are generated based on selected guests' dietary preferences and user-specified options:

1. User selects guests from the guest list
2. User configures recipe options (preparation time, cooking time, difficulty, etc.)
3. System generates a recipe that accommodates all dietary restrictions

The recipe generation process uses either the Google Gemini API or Perplexity API, depending on user selection.

Key components:

• RecipeContainer.tsx: Main container for recipe functionality
• RecipePreferences.tsx: Component for recipe options
• RecipeGenerator.tsx: Logic for generating recipes
• recipeService.ts: Service for interacting with AI APIs

Database Schema

The database consists of the following tables:

guests table

• id: UUID (primary key)
• name: Text
• category: Text (family, friends, colleagues, other)
• preferences: JSON (dietary preferences)
• created_at: Timestamp

saved_recipes table

• id: UUID (primary key)
• user_id: UUID (foreign key to auth.users)
• title: Text
• ingredients: JSON Array
• instructions: JSON Array
• dietary_info: JSON Array
• budget: Text (optional)
• created_at: Timestamp

global_api_keys table

• id: UUID (primary key)
• gemini_api_key: Text
• perplexity_api_key: Text (nullable)
• created_at: Timestamp

Recipe Storage

Saved recipes are stored in the saved_recipes table in Supabase. The recipeStorageService.ts file provides functionality to:

• Save recipes to the database
• Retrieve saved recipes
• Delete recipes from the database

Each saved recipe is associated with the user who created it through the user_id field.

AI Integration

The application integrates with two AI services:

1. Google Gemini API:

   • Used by default for recipe generation
   • Integration is in recipeService.ts
   • API key is stored in the global_api_keys table

2. Perplexity API:

   • Alternative AI provider for recipe generation
   • Integration is in perplexityService.ts
   • API key is stored in the global_api_keys table

The recipe generation process follows these steps:

1. Create a prompt based on guest preferences and recipe options
2. Send the prompt to the selected AI service
3. Parse the AI response into a structured recipe format
4. Display the recipe to the user

Contributing

To contribute to this project:

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Submit a pull request

When adding a new feature, consider:

• Adding appropriate tests
• Updating documentation
• Following the existing code style
• Ensuring proper TypeScript typing
• Respecting the component structure