🍕 MargMap

A web application for visualizing and rating pizza places on an interactive map. Data is maintained in a Google Sheets document and automatically converted to JSON for the web application.

Restaurant Ratings

Name	Rating	Location	Country	Date	Price	Crust	Dough	Sauce	Cheese	Basil	Sliced	Sloppiness	Saltiness	Oiliness
Monellis	8.5	Hastings	England	19/10/2024	£13.50	9	9	9	9	5	5	8	8	9
SOL Taphouse	8.4	Busan	South Korea	10/10/2025	£11.14	7	8	8	9	10	10	9	8	9
Oro di Napoli	8.2	Saint-Raphaël	France	03/05/2026	£8.64	7	8	9	8	10	10	7	8	8
Pizzarelli	8	St Leonards-on-Sea	England	22/08/2025	£11.99	8	7	8	9	5	10	9	8	9
Le Bellini	7.9	Toulouse	France	23/09/2024	£10.80	9	8	8	8	5	5	9	8	8
Dora's	7.8	St Leonards-on-Sea	England	14/06/2026	£10.00	8	7	8	7	10	10	7	8	8
La Pizza	7.6	València	Spain	30/08/2025	£10.82	8	7	8	7	10	0	8	8	8
Brewing Brothers The Imperial	7.2	Hastings	England	25/04/2025	£9.50	8	7	9	7	0	10	7	8	7
The Crust	7.2	Bude	England	13/08/2024	£12.00	8	8	7	7	5	5	7	8	7
Rustico	7.2	Hastings	England	03/05/2025	£9.50	8	7	8	6	5	5	7	8	8
Dough Ray Me	6.9	St Leonards-on-Sea	England	17/07/2025	£11.00	7	7	8	6	5	5	7	8	7
Homeslice	6.9	City of London	England	02/02/2026	£14.00	7	7	8	7	5	5	6	7	6
Tredici	6.6	Cannes	France	09/08/2025	£14.00	7	6	8	6	5	0	7	8	7
Magpie	6.5	Seoul	South Korea	07/10/2025	£12.14	6	6	7	7	5	10	7	7	6
La Saporita	6.2	St Leonards-on-Sea	England	31/10/2025	£9.95	6	6	7	7	0	10	7	7	7
The Rising Sun	6.2	Chelmsford	England	01/02/2026	£10.00	7	6	7	6	0	10	6	7	7
PizzaExpress	6.1	Hastings	England	01/04/2026	£15.90	6	6	7	7	0	5	6	8	7
Marina Fountain	5.9	St Leonards-on-Sea	England	08/05/2026	£11.50	6	6	7	5	0	10	6	8	7
Bellissimo	5.7	Corfu	Greece	26/10/2024	£8.33	5	6	6	6	0	5	7	8	7
The Boathouse	5.6	Christchurch	England	19/04/2025	£14.00	5	6	7	6	0	10	5	6	6
Wetherspoons	5.4	Gatwick	England	19/09/2024	£13.25	6	6	6	6	0	0	7	5	6
Casa de Pier	5.3	St Leonards-on-Sea	England	16/05/2025	£10.00	5	5	6	5	0	10	6	6	7
Wetherspoons (Cornfield Garage)	5	Eastbourne	England	08/03/2026	£9.28	5	5	6	6	0	0	6	5	6

Project Structure

├── scripts/              # Data and local dev helper scripts
│   ├── csv-to-json.js    # Convert CSV data to JSON format
│   ├── check-data.js     # Verify checked-in JSON matches CSV
│   ├── dev-worker.js     # Worker-first local dev runner
│   └── enrich-google-places.js # Store Google place IDs for restaurant photos
├── src/                  # Web application source
│   ├── index.html        # Main HTML file
│   ├── main.js           # Application logic and Leaflet integration
│   ├── main.css          # Tailwind CSS and Leaflet styles
│   └── data/            # Data directory
│       ├── google-places.json # Stored Google place IDs by restaurant
│       ├── ratings.csv   # CSV data fetched from Google Sheets
│       └── ratings.json  # Processed JSON data for the app
├── dist/                 # Production build output (generated)
├── worker.js             # Cloudflare Worker routes and photo proxy
├── vite.config.js        # Vite build configuration
├── tailwind.config.js    # Tailwind CSS configuration
├── postcss.config.js     # PostCSS configuration
└── mise.toml            # Development environment config

Build System

The application uses Vite for optimal bundling and performance:

• CSS: Styles imported via <link> tag in HTML, processed by PostCSS/Tailwind
• Leaflet CSS: Imported from node_modules via CSS @import in styles.css
• Tailwind CSS: Purged and minified in production
• Leaflet: Bundled as ES module
• HTML: Minified with whitespace removal
• Code Splitting: Automatic chunk splitting for optimal loading
• Minification: JavaScript minified with esbuild
• Tree Shaking: Unused code eliminated

Commands

• pnpm dev - Worker-first development server on http://localhost:8787 with asset rebuilds, live reload, and photo API routes
• pnpm dev:frontend - Vite-only frontend server on http://127.0.0.1:8080 without Worker photo routes
• pnpm check - Non-mutating CI validation: verify data, build assets, and syntax-check the Worker
• pnpm build - Production build with full minification and optimization (also updates the README ratings table)
• pnpm preview - Builds and serves the production worker locally on http://localhost:8788
• pnpm ship - Build and deploy to Cloudflare Workers Assets

Getting Started

Prerequisites

• Node.js and pnpm
• A Google Sheets document with restaurant data
• GOOGLE_MAPS_API_KEY in .env.local for local photo API calls and place enrichment

Local Development

1. Clone the repository

   git clone <repository-url>
   cd margmap

2. Install dependencies

   pnpm install

3. Fetch and build data

   pnpm fetch-data

4. Start local development server

   pnpm dev

5. Access the application

   Open your browser to http://localhost:8787

Available Scripts

• pnpm dev - Start the local Cloudflare Worker plus asset rebuild watcher on port 8787
• pnpm dev:frontend - Start Vite only on port 8080 for frontend-only work
• pnpm check - Run the CI validation build without updating README
• pnpm build - Build optimized production bundle and update README ratings table
• pnpm preview - Preview production worker locally on port 8788
• pnpm ship - Build and deploy to Cloudflare Workers Assets
• pnpm fetch-csv - Fetch the raw CSV from Google Sheets only
• pnpm fetch-data - Fetch CSV from Google Sheets and convert to JSON
• pnpm enrich-google-places - Match restaurants to Google place IDs for photo lookups
• pnpm prepare-data - Convert existing CSV to JSON
• pnpm update-data - Fetch fresh data, enrich missing Google place IDs, regenerate JSON, and sync README
• pnpm update-readme - Sync README ratings table from CSV
• pnpm clean - Remove generated data files and build output

Data Management

Google Sheets Integration

The application pulls data from a Google Sheets document. The sheet should contain restaurant information with columns for:

• Restaurant names
• Addresses/locations
• Ratings
• Additional metadata

Manual Data Updates

Since data is committed to the repository for simplified builds:

1. Update the Google Sheets document with new restaurants or ratings

2. Regenerate local data:

   pnpm update-data

3. Commit and push changes:

   git add src/data/ README.md
   git commit -m "Update restaurant data"
   git push origin main

Deployment

The application is deployed manually to Cloudflare Workers Assets from a local machine via:

pnpm ship

Technology Stack

• Frontend: HTML, CSS (Tailwind), JavaScript
• Mapping: Leaflet.js for interactive maps
• Data: Google Sheets → CSV → JSON pipeline
• Build: Node.js scripts with pnpm package manager
• Deployment: Cloudflare Workers Assets (via pnpm ship)
• Environment: Mise for development tooling

Development Notes

• The application uses a responsive design that works on both desktop and mobile
• Map view is available on larger screens, with a list-only view on mobile
• Data conversion happens automatically during the build process
• Photo lookups are served through the Cloudflare Worker, so local development should use pnpm dev instead of plain Vite
• pnpm update-data requires GOOGLE_MAPS_API_KEY when new restaurants need Google place IDs
• All source code is in the src/ directory for easy deployment

Contributing

1. Update restaurant data in the Google Sheets document
2. Run pnpm update-data to regenerate data, place IDs, and the README table
3. Test locally with pnpm dev
4. Commit and push changes to trigger deployment