Have I Been To

Interactive 3D globe app to track and visualize countries you've visited.

Built with Next.js 15, react-globe.gl, Supabase, Stripe, and Next-Auth.

Features

• Interactive 3D globe — click countries to mark as visited
• Google OAuth + magic link authentication
• Subscription plans via Stripe
• Per-user data with Supabase Row Level Security
• Email notifications via Nodemailer

Getting Started

# install
pnpm install

# copy env and fill in values
cp .env.example .env.local

# run dev server
pnpm dev

Open http://localhost:3000.

Environment Variables

See .env.example for all required variables:

• Supabase — NEXT_PUBLIC_SUPABASE_URL, NEXT_PUBLIC_SUPABASE_ANON_KEY, SUPABASE_SECRET_KEY
• Stripe — NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY, STRIPE_SECRET_KEY, STRIPE_WEBHOOK_SECRET
• Auth — AUTH_GOOGLE_ID, AUTH_GOOGLE_SECRET, AUTH_SECRET
• Email — EMAIL_SERVER_HOST, EMAIL_SERVER_PORT, EMAIL_SERVER_USER, EMAIL_SERVER_PASSWORD, EMAIL_FROM

Scripts

pnpm dev              # dev server (Turbopack)
pnpm build            # production build
pnpm lint             # ESLint
pnpm lint:ts          # type check
pnpm email            # email dev server
pnpm stripe:listen    # local Stripe webhooks

Project Structure

app/                  # Next.js App Router
  app/                # protected area (globe, dashboard)
  api/                # API routes (auth, countries, webhooks)
components/           # React components
  app/                # app-specific (InteractiveGlobe)
  email/              # email templates
lib/                  # auth, email utilities
utils/                # Supabase clients, Stripe helpers
types/                # TypeScript definitions
supabase/             # database schema SQL files

Tech Stack

• Framework — Next.js 15 (App Router, Turbopack)
• Globe — react-globe.gl + Three.js
• Auth — Next-Auth v5 (Google OAuth, magic links)
• Database — Supabase (PostgreSQL + RLS)
• Payments — Stripe (subscriptions)
• Styling — Tailwind CSS
• Email — React Email + Nodemailer