🗺️ Review Map NZ

An interactive, community-driven location review platform for New Zealand. Users can explore locations on a live map, watch embedded video reviews, leave their own star-rated community reviews, and log in with their social accounts. Admins can moderate content via a built-in panel.

Live demo URL: YOUR_SITE_URL — update this once deployed.

---

✨ Features

Feature	Description
📍 Interactive Map	Leaflet.js map with custom markers and fly-to animations
⭐ Community Reviews	Logged-in users can submit star-rated reviews per location
🎥 Video Embeds	YouTube, TikTok, Instagram & Facebook video embeds per location
🔐 Social Login	Google OAuth, TikTok Login Kit, Meta (Instagram/Facebook)
🌙 Dark / Light Mode	Toggle saved in localStorage
🛡️ Admin Panel	Report flagging, user banning, admin management
🔍 Search & Sort	Filter by name/day; sort by day, score, community rating, or unvisited
🔒 Rate Limiting	Per-IP review limits enforced client-side (localStorage)
🚫 Profanity Filter	Client-side word list filter applied to review submissions
📱 Responsive	Mobile-friendly layout

---

🧱 Tech Stack

Layer	Technology
Frontend	Vanilla HTML5, CSS3, JavaScript (ES6 modules) — no build step required
Map Engine	Leaflet.js v1.9.4 with CartoDB dark/light tile layers
Database	Supabase (PostgreSQL) — tables, Row Level Security (RLS), SECURITY DEFINER functions
Auth	Supabase Auth — Google OAuth, custom TikTok & Instagram flows
Backend Functions	Netlify Functions (Node.js) — serverless OAuth token exchange for TikTok and Instagram
Hosting	Netlify — static site + serverless functions
Fonts	Google Fonts — Outfit
Icons	FontAwesome 6
Geocoding	Nominatim / OpenStreetMap — converts admin-entered addresses to lat/lng

---

🚀 Getting Started

Prerequisites

• A free Supabase account
• A Netlify account (for serverless functions & hosting)
• (Optional) Developer apps set up on TikTok for Developers and/or Meta for Developers if you want social login beyond Google

---

1. Clone the Repository

git clone https://github.com/YOUR_USERNAME/review-map.git
cd review-map

---

2. Set Up Supabase

1. Create a new project at supabase.com.
2. Go to SQL Editor → New Query and run supabase_setup.sql — this creates all tables, functions, RLS policies, and seeds a few sample locations.
3. (Optional) If you need TikTok or Instagram login, also run:
   • supabase_tiktok_migration.sql
   • supabase_insta_migration.sql
   • supabase_tiktok_fix.sql (if needed)
4. In Authentication → Providers, enable:
   • Google — paste in your Google OAuth Client ID and Secret from Google Cloud Console
   • (Optional) Any other providers you need

Supabase Database Schema Overview

locations   — Map pin records (name, coordinates, rating, review text, video URL, etc.)
profiles    — Users created from social login (display name, avatar, provider, admin/ban status)
reviews     — Community-submitted reviews (linked to location + user)
reports     — Flagged reviews (admin moderation queue)

RLS is fully enabled. Key functions:

• handle_new_user() — trigger that auto-creates a profile on first login
• upsert_location(loc JSONB) — SECURITY DEFINER function for admin writes (bypasses RLS safely)
• is_user_admin() / is_user_banned() — used in RLS policies

Make Yourself an Admin

After your first login, run this in the Supabase SQL Editor:

UPDATE profiles SET is_admin = TRUE WHERE id = 'paste-your-user-uuid-here';

Find your UUID under Authentication → Users.

---

3. Configure the App

Copy the example config file and fill in your credentials:

cp js/config.example.js js/config.js

Edit js/config.js:

// Find these in your Supabase project → Settings → API
export const SUPABASE_URL      = 'https://xxxx.supabase.co';
export const SUPABASE_ANON_KEY = 'your-anon-key-here';

// From your TikTok Developer App (Client Key only — secret stays on the server)
export const TIKTOK_CLIENT_KEY = 'your-tiktok-client-key';

⚠️ Never commit js/config.js — it is excluded by .gitignore. Only config.example.js is tracked.

---

4. Set Up Netlify Functions (Social Login)

The OAuth token exchange for TikTok and Instagram must happen server-side (the client secret must never be exposed in the browser). This is handled by two Netlify Functions in netlify/functions/:

Function	Purpose
tiktok-token.js	Exchanges TikTok auth code for access token
insta-token.js	Exchanges Instagram auth code for access token

Set the following environment variables in your Netlify dashboard (Site Settings → Environment Variables):

Variable	Where to Find It
SUPABASE_URL	Supabase → Settings → API
SUPABASE_SERVICE_ROLE_KEY	Supabase → Settings → API (service role — keep secret!)
TIKTOK_CLIENT_KEY	TikTok Developer App
TIKTOK_CLIENT_SECRET	TikTok Developer App
META_APP_ID	Meta Developer App
META_APP_SECRET	Meta Developer App

---

5. Configure OAuth Redirect URIs

In each social platform's developer portal, you must whitelist your deployment URL as an allowed redirect. Set these based on your actual Netlify/custom domain:

Supabase (Google OAuth):

• Supabase → Authentication → URL Configuration → Site URL: https://your-domain.com
• Redirect URL: https://your-domain.com

TikTok Developer App:

• Redirect URI: https://your-domain.com/tiktok-callback.html

Meta Developer App (Instagram):

• Valid OAuth Redirect URIs: https://your-domain.com/instagram-callback.html

---

6. Deploy to Netlify

Option A — Netlify CLI

npm install -g netlify-cli
netlify login
netlify init
netlify deploy --prod

Option B — GitHub Integration (Recommended)

1. Push your repo to GitHub.
2. In Netlify, click Add new site → Import an existing project.
3. Connect your GitHub repository.
4. Netlify auto-detects netlify.toml and deploys.
5. Add your environment variables under Site Settings → Environment Variables.

Option C — Any Static Host (Google-only login)

If you only need Google login (no TikTok/Instagram), you can deploy the static files to any host (GitHub Pages, Vercel, Cloudflare Pages, etc.) — no serverless functions required for Google auth. You still need to set SUPABASE_URL and SUPABASE_ANON_KEY in js/config.js.

---

📁 Project Structure

review-map/
├── index.html                  # Main app shell
├── privacy.html                # Privacy Policy
├── terms.html                  # Terms of Service
├── tiktok-callback.html        # TikTok OAuth callback handler
├── instagram-callback.html     # Instagram OAuth callback handler
├── styles.css                  # All styles (dark/light theme, layout, components)
├── favicon.svg                 # SVG favicon
├── netlify.toml                # Netlify build config
├── supabase_setup.sql          # Full DB schema + seed data (run this first)
├── supabase_tiktok_migration.sql
├── supabase_insta_migration.sql
├── supabase_tiktok_fix.sql
├── netlify/
│   └── functions/
│       ├── tiktok-token.js     # Serverless: TikTok OAuth token exchange
│       └── insta-token.js      # Serverless: Instagram OAuth token exchange
└── js/
    ├── config.js               # ⚠️ YOUR CREDENTIALS (gitignored)
    ├── config.example.js       # Template — copy this to config.js
    ├── main.js                 # App entry point — wires everything together
    ├── appState.js             # Global UI state (user session, theme, admin mode)
    ├── state.js                # LocationState class — Supabase data layer
    ├── components/
    │   ├── Map.js              # Leaflet map, markers, popups, review forms
    │   ├── Sidebar.js          # Location list, search, sorting
    │   └── AdminModal.js       # Add/edit location modal + toast notifications
    ├── services/
    │   ├── SupabaseClient.js   # Supabase JS client singleton
    │   ├── AuthService.js      # Google + social login orchestration
    │   ├── TikTokAuthService.js
    │   ├── InstaAuthService.js
    │   └── ReviewService.js    # CRUD for reviews, profanity filter, cache
    ├── data/
    │   └── locations.js        # Static sample locations (fallback / seed reference)
    └── utils/
        └── embeds.js           # Video URL → embed HTML converter

---

🔐 Security Notes

• js/config.js is gitignored — only placeholder credentials are tracked via config.example.js.
• The Supabase service role key is only ever used inside Netlify Functions (server-side). It is never exposed to the browser.
• TikTok and Instagram client secrets are stored exclusively as Netlify environment variables.
• Row Level Security (RLS) is enforced on all Supabase tables.
• The upsert_location RPC uses SECURITY DEFINER with an explicit admin check to safely bypass RLS for admin writes only.

---

📝 Customising for Your Use Case

This project was built as a community review map for New Zealand locations, but it's generic enough to adapt for any use case:

• Change the map centre — edit setView([-40.9006, 174.8860], 6) in js/components/Map.js
• Expand beyond NZ — remove or adjust nzBounds and the countrycodes=nz geocoding parameter in AdminModal.js
• Change the colour scheme — edit the CSS variables at the top of styles.css
• Remove social logins you don't need — comment out the relevant buttons in index.html and skip those migrations/env vars

---

📄 License

MIT — free to use, modify, and distribute. See LICENSE for details.