Health-Focused Food Discovery Platform

I'll create a responsive web app prototype for a health-focused food discovery platform using Next.js and Tailwind CSS. This will be a simple tech stack that can run easily anywhere.

Key Features Implemented

This health-focused food discovery platform includes all the requested features:

1. Home Page with Map:

   • A mock map with pins representing food outlets
   • Clicking a pin opens a popup with outlet information and a link to the full profile

2. Outlet Profile Page:

   • Shows outlet name, address, and "Verified for Safety" badge
   • Lists food items with images, ingredients, and nutritional information
   • Displays allergen information and health warnings

3. AI Chat Assistant:

   • Simple chat UI where users can ask about food items
   • Provides nutritional breakdowns and health considerations
   • Includes mock responses for common food items

4. Search and Filter Bar:

   • Allows filtering by dietary tags (Low Sugar, Gluten-Free, etc.)
   • Includes a search input for finding specific outlets or foods

5. Navigation Bar:

   • Tabs for Home, Verified Outlets, AI Assistant, and Profile
   • Responsive design that adapts to mobile and desktop

6. Mock Data:

   • Includes realistic mock data for outlets and food items
   • Nutritional information and health warnings are included

7. Clean UI with Tailwind CSS:

   • Modern, responsive design using Tailwind CSS
   • Health-focused color scheme with greens and whites

8. Map Placeholder:

   • Uses a placeholder image for the map with interactive pins

The application is fully responsive and works on both mobile and desktop devices. The UI is clean and focused on health information, making it easy for users to find nutritious food options.

I'll update the application to connect with the Google Maps API and make the search functionality work. Let's implement this:

Google Maps Integration Implementation

I've updated the application to integrate with the Google Maps API and made the search functionality work. Here's what I've done:

1. Google Maps Integration

• Added the Google Maps JavaScript API script to the layout file
• Implemented the @react-google-maps/api library to render the Google Map
• Converted our mock coordinates to real latitude and longitude values
• Added custom markers for verified and non-verified outlets
• Implemented InfoWindows for when a marker is clicked

2. Search Functionality

• Updated the SearchBar component to use Google Places Autocomplete API
• Added location search with a dropdown of suggestions
• Implemented geocoding to convert addresses to map coordinates
• Made the map center on the selected location when searched
• Maintained the dietary filter functionality

3. Additional Improvements

• Made the map responsive to search queries
• Added different colored markers for verified outlets (green) vs. non-verified (red)
• Updated the outlets data with more realistic San Francisco addresses
• Made the Verified Outlets page use the same search functionality

How to Use

1. Setup Google Maps API Key:

   • You'll need to get a Google Maps API key from the Google Cloud Console
   • Enable the Maps JavaScript API and Places API
   • Add the key as an environment variable named NEXT_PUBLIC_GOOGLE_MAPS_API_KEY

2. Search for Locations:

   • Type a location in the search bar to see autocomplete suggestions
   • Select a location to center the map on that area
   • The map will zoom in to the selected location

3. Filter Results:

   • Use the filter button to filter outlets by dietary preferences
   • The map will update to show only the filtered outlets

Now the application has a fully functional Google Maps integration with search capabilities. The search bar will suggest locations as you type, and selecting a location will center the map on that area. The dietary filters still work to show only outlets that match your preferences.

Please make sure to add the following environment variable to your project: