Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
FoodFind is a geolocation-based web application designed to help users discover and locate dining options near their current position or a specified area. The platform emphasizes community-driven rankings based on authentic user reviews and AI-driven personalized recommendations, ensuring users find the best dining experiences tailored to their tastes.

## CORE FEATURES
1. **User Authentication & Profiles**: Users can sign up and log in via email, manage their preferences, and save favorite dining locations.
2. **Map-Centric Discovery**: An interactive full-screen map interface powered by Google Maps or Mapbox, allowing users to find nearby restaurants with detailed markers showing photos, ratings, and opening hours.
3. **Community-Driven Ranking System**: A curated ranking algorithm that combines user-generated reviews with manual data verification, ensuring reliable recommendations.
4. **Personalized Recommendation Engine**: AI-powered suggestions tailored to user preferences based on an initial onboarding survey and historical interests.
5. **Dynamic Leaderboards**: Displays the top-rated restaurants in various categories based on user feedback, enhancing discoverability.
6. **Search & Geolocation Features**: Users can easily find their location, adjust search radius, and explore dining options dynamically.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - Clean, simple design with plenty of white space, focusing on typography to enhance readability.
- **Color Mode**: Light theme with dark text on light backgrounds to ensure clarity and accessibility.
- **Layout**: A responsive layout featuring a prominent hero section with a search bar, followed by a map view, user reviews, and recommendations in a stacked format.
- **Typography**: Use a sans-serif font such as Inter or Roboto for a modern and clean look, with clear hierarchy for headings, subheadings, and body text.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS for utility-first styling to ensure a responsive and modern UI.
- **UI Components**: Utilize shadcn/ui for pre-built components to accelerate development.
- **State Management**: Use React Context API or Zustand for managing user authentication and preferences.

## IMPLEMENTATION STEPS
1. **Set Up the Project**:
   - Initialize a new React project with TypeScript.
   - Install Tailwind CSS and configure it for global styles.
   - Set up shadcn/ui for UI component usage.

2. **Build Authentication**:
   - Implement user authentication using Supabase Auth.
   - Create login and registration components with form validations.

3. **Map Integration**:
   - Integrate Google Maps or Mapbox for the interactive map.
   - Create custom markers for restaurants with essential information.

4. **Community Ranking System**:
   - Develop the backend logic for collecting and verifying user reviews.
   - Design the UI for displaying rankings and user-generated content.

5. **Personalized Recommendations**:
   - Create the onboarding survey component to collect user preferences.
   - Implement the recommendation engine using OpenAI API for AI-driven suggestions.

6. **Testing & Deployment**:
   - Conduct thorough testing for usability and performance.
   - Deploy the application on a cloud platform (e.g., Vercel or Netlify) to ensure availability.

## USER EXPERIENCE
Users will experience a seamless interaction flow starting from the onboarding process, where they select their dining preferences. The main screen will feature an interactive map displaying nearby restaurants, with options to view details, read reviews, and see community ratings. Users can easily adjust their search radius and find personalized recommendations, making the discovery of dining options both intuitive and enjoyable.