Food Faves Tracker - Copilot Instructions

Project Overview

Food Faves Tracker is a React-based web application that allows users to track and share their favorite meals from restaurants. Users can add, edit, and delete meal entries with photos, ratings, descriptions, and location data.

Technology Stack

Frontend: React 18 with TypeScript
Build Tool: Vite
UI Framework: Tailwind CSS + shadcn/ui components
Backend: Supabase (PostgreSQL database + Auth)
Package Manager: npm (though bun.lockb exists, use npm for commands)
Deployment: Likely Lovable/Vercel platform

Project Structure

src/
├── components/          # Reusable UI components
│   ├── ui/             # shadcn/ui base components
│   ├── MealCard.tsx    # Individual meal display card with edit/delete actions
│   ├── MealForm.tsx    # Form for adding/editing meals
│   ├── StarRating.tsx  # Star rating component
│   └── ...
├── contexts/           # React contexts (Auth, etc.)
├── hooks/              # Custom React hooks
├── integrations/       # External service integrations
│   └── supabase/       # Supabase client and types
├── lib/                # Utility functions
├── pages/              # Page components
│   ├── Index.tsx       # Main meals list page
│   ├── Auth.tsx        # Authentication page
│   └── NotFound.tsx    # 404 page
└── types/              # TypeScript type definitions
    └── meal.ts         # Meal interface definition

Key Features Implemented

User Authentication - Supabase Auth integration
Meal CRUD Operations - Create, Read, Update, Delete meals
Restaurant Location Search - Integration with location APIs
Star Ratings - 1-5 star rating system
Image URLs - Support for meal photos via URLs
Tags System - Categorize meals with custom tags
Price Tracking - Optional price field for meals
Social Sharing - Share meal cards via social media
Responsive Design - Mobile-friendly UI

Database Schema (Supabase)

The

meals

table contains:

```
id
```
(uuid, primary key)
```
user_id
```
(uuid, foreign key to auth.users)
```
restaurant
```
(text) - Restaurant name
```
name
```
(text) - Meal name
```
description
```
(text, optional) - Meal description
```
rating
```
(integer) - 1-5 star rating
```
image_url
```
(text, optional) - Photo URL
```
latitude
```
(numeric, optional) - Restaurant location
```
longitude
```
(numeric, optional) - Restaurant location
```
tags
```
(text[], optional) - Array of tag strings
```
price
```
(numeric, optional) - Meal price
```
created_at
```
(timestamp)

Development Guidelines

Code Style

Use TypeScript for all new files
Follow React functional component patterns with hooks
Use meaningful variable and function names
Implement proper error handling and user feedback via toast notifications
Use Tailwind CSS for styling (avoid custom CSS when possible)

Component Patterns

MealForm: Handles both adding new meals and editing existing meals
MealCard: Displays meal info with hover actions (edit/delete buttons)
Protected Routes: Wrap authenticated pages with ProtectedRoute component
Use shadcn/ui components for consistent UI (Button, Dialog, Input, etc.)

State Management

Use React hooks (useState, useEffect) for local state
AuthContext provides user authentication state
Supabase client handles database operations and real-time subscriptions

API Integration

All database operations go through Supabase client
Include user_id in all meal operations for data isolation
Handle errors gracefully with toast notifications
Use proper TypeScript types for API responses

Security Considerations

Row Level Security (RLS) should be enabled in Supabase
Users can only access their own meals
Validate user ownership before update/delete operations
Sanitize user inputs for XSS prevention

Common Development Tasks

Adding New Features

Define TypeScript types in appropriate files
Create/update database schema in Supabase if needed
Build UI components using shadcn/ui patterns
Implement database operations with proper error handling
Add user feedback via toast notifications
Test authentication and authorization

UI Development

Use existing shadcn/ui components when possible
Follow Tailwind CSS utility-first approach
Ensure mobile responsiveness
Implement loading states and error boundaries
Use consistent color scheme (orange/red gradients for primary actions)

Database Operations

Always include user_id in queries for data isolation
Use Supabase's TypeScript types for better type safety
Implement optimistic updates where appropriate
Handle network errors and offline scenarios

Environment Setup

Supabase configuration in
```
src/integrations/supabase/client.ts
```
Environment variables should be in
```
.env.local
```
(not tracked in git)
Required env vars: VITE_SUPABASE_URL, VITE_SUPABASE_ANON_KEY

Testing Strategy

Focus on user authentication flows
Test CRUD operations for meals
Verify responsive design on different screen sizes
Test error handling and edge cases
Ensure data isolation between users

Performance Considerations

Use React.memo for expensive re-renders
Implement proper loading states
Optimize images (consider lazy loading)
Use Supabase's built-in caching where appropriate
Minimize unnecessary re-fetches of data

Deployment Notes

Built for Lovable.dev platform
Static site generation with Vite
Environment variables configured in platform settings
Supabase handles backend scaling automatically

Command line instructions

When running multiple commands on a single line, use
```
;
```
to chain them.

Food Faves Tracker - Copilot Instructions

Project Overview

Technology Stack

Frontend: React 18 with TypeScript
Build Tool: Vite
UI Framework: Tailwind CSS + shadcn/ui components
Backend: Supabase (PostgreSQL database + Auth)
Package Manager: npm (though bun.lockb exists, use npm for commands)
Deployment: Likely Lovable/Vercel platform

Project Structure

src/
├── components/          # Reusable UI components
│   ├── ui/             # shadcn/ui base components
│   ├── MealCard.tsx    # Individual meal display card with edit/delete actions
│   ├── MealForm.tsx    # Form for adding/editing meals
│   ├── StarRating.tsx  # Star rating component
│   └── ...
├── contexts/           # React contexts (Auth, etc.)
├── hooks/              # Custom React hooks
├── integrations/       # External service integrations
│   └── supabase/       # Supabase client and types
├── lib/                # Utility functions
├── pages/              # Page components
│   ├── Index.tsx       # Main meals list page
│   ├── Auth.tsx        # Authentication page
│   └── NotFound.tsx    # 404 page
└── types/              # TypeScript type definitions
    └── meal.ts         # Meal interface definition