GeoGem

The High-Fidelity Map Scanner for Hidden Local Gems

GeoGem is a specialized geospatial intelligence tool designed to overcome the "Top 60" limitation of standard Google Maps searches. By utilizing a smart grid-scanning algorithm, GeoGem divides a user-selected area into micro-zones, executes parallel API requests, and aggregates the results. This allows users to filter thousands of local businesses (starting with Cafes & Restaurants) by strict metrics like "Minimum 4.8 Stars" AND "Minimum 1,000 Reviews"—queries that are impossible on the native Google Maps app.

Features

• 🗺️ Interactive map with rectangle drawing tool
• 🔍 Grid-based scanning algorithm to bypass 60-result limit
• ⭐ Real-time filtering by rating and review count
• 💾 Supabase caching to reduce API costs
• 🎨 Color-coded markers (Green/Yellow/Red by rating)

Tech Stack

• Frontend: Next.js 14 (App Router), React, TypeScript
• Styling: Tailwind CSS
• Maps: Google Maps JavaScript API
• Data: Google Places API (New)
• Database: Supabase (PostgreSQL with PostGIS)
• Deployment: Vercel

Prerequisites

• Node.js 18+ and npm/yarn
• Google Cloud Project with billing enabled
• Supabase account (free tier works)

Setup Instructions

1. Clone and Install

git clone <your-repo-url>
cd GeoGem
npm install

2. Google Cloud Setup

1. Create a new Google Cloud Project named "GeoGem"
2. Enable the following APIs:
   • Maps JavaScript API (for map rendering)
   • Places API (New) (for place data)
3. Create API keys:
   • One for Maps JavaScript API (restrict to your domain)
   • One for Places API (restrict to Vercel IPs or your server IPs)
4. Set daily quota to 500 requests/day for Places API

3. Supabase Setup

1. Create a new Supabase project at supabase.com
2. Go to SQL Editor and run the migration:

   # Copy contents from supabase/migrations/001_initial_schema.sql

3. Get your project URL and service role key from Settings > API

4. Environment Variables

Create a .env.local file in the root directory:

NEXT_PUBLIC_GOOGLE_MAPS_API_KEY=your_maps_api_key_here
GOOGLE_PLACES_API_KEY=your_places_api_key_here
NEXT_PUBLIC_SUPABASE_URL=your_supabase_url_here
SUPABASE_SERVICE_ROLE_KEY=your_service_role_key_here

5. Run Development Server

npm run dev

Open http://localhost:3000 in your browser.

Usage

1. Draw Area: Click "Draw Area" button and drag a rectangle on the map
2. Scan: The app automatically scans the area using grid-based algorithm
3. Filter: Use sliders to filter by minimum rating and review count
4. Explore: Click markers to see place details

Project Structure

GeoGem/
├── app/                 # Next.js app directory
│   ├── api/            # API routes
│   ├── layout.tsx      # Root layout
│   ├── page.tsx        # Main page
│   └── globals.css     # Global styles
├── components/         # React components
│   ├── MapContainer.tsx
│   ├── DrawingManager.tsx
│   ├── FilterSidebar.tsx
│   └── PlaceMarkers.tsx
├── context/           # React context
│   └── PlacesContext.tsx
├── lib/               # Utility functions
│   ├── grid.ts        # Grid generation
│   ├── places-api.ts  # Google Places API client
│   ├── cache.ts       # Supabase caching
│   └── types.ts       # TypeScript types
└── supabase/          # Database migrations
    └── migrations/

Cost Optimization

• Field masking to request only Basic SKU fields
• 30-day cache to avoid duplicate API calls
• Max 25 API calls per scan (frontend validation)
• Daily quota limits in Google Cloud Console

License

MIT License - see LICENSE file for details