An interactive, data-driven map of San Diego restaurants that displays curated restaurant data from a Google Sheet using Mapbox.

• 🗺️ Interactive Mapbox map centered on San Diego
• 📍 Restaurant markers with popups showing details
• 🏷️ Category filtering (Brunch, Coffee, Dinner, Drinks, etc.)
• 📱 Responsive sidebar with restaurant list
• 🔄 Live data updates from Google Sheets
• 🎨 Modern UI with Tailwind CSS

• Frontend: Next.js 14 with App Router
• Map: Mapbox GL JS
• Data: Google Sheets → CSV export
• Styling: Tailwind CSS
• Deployment: Vercel

1. Install dependencies:

   npm install

2. Set up environment variables: Copy .env.local.example to .env.local and fill in your values:

   cp .env.local.example .env.local

   Required environment variables:

   • NEXT_PUBLIC_MAPBOX_TOKEN: Your Mapbox access token
   • NEXT_PUBLIC_SHEET_CSV_URL: Your Google Sheets CSV export URL

3. Get a Mapbox token:

   • Sign up at mapbox.com
   • Create a new access token
   • Add it to your .env.local file

4. Set up Google Sheets:

   • Create a Google Sheet with the following columns:
     • Name (required)
     • Address (required)
     • Latitude (required)
     • Longitude (required)
     • Category (optional, e.g., "Brunch", "Coffee", "Dinner")
     • Description (optional)
     • Image (optional, URL to image)
     • Link (optional, restaurant website)
   • Publish the sheet as CSV
   • Copy the CSV URL to your .env.local file

5. Run the development server:

   npm run dev

6. Deploy to Vercel:

   • Connect your GitHub repository to Vercel
   • Add the same environment variables in Vercel dashboard
   • Deploy!

Your Google Sheet should have these columns:

• npm run dev - Start development server
• npm run build - Build for production
• npm run start - Start production server
• npm run lint - Run ESLint

MIT