PhotoHunt 📸

An interactive photo scavenger hunt platform built with Next.js 15, Supabase, and deployed on Vercel.

🚀 Tech Stack

• Frontend & API: Next.js 15 with App Router
• Database & Auth: Supabase
• Caching: Upstash Redis (Optional)
• Deployment: Vercel
• UI Components: shadcn/ui + Tailwind CSS
• Icons: Lucide React

📦 Installation

Prerequisites

• Node.js 18+ and pnpm installed
• Supabase account (for database)
• Upstash account (optional, for Redis)

Local Development

1. Clone the repository

   git clone <your-repo-url>
   cd photohunt

2. Install dependencies

   pnpm install

3. Set up environment variables

   cp .env.example .env

   Fill in your environment variables:

   NEXT_PUBLIC_SUPABASE_URL=your-supabase-url
   NEXT_PUBLIC_SUPABASE_ANON_KEY=your-supabase-anon-key
   SUPABASE_SERVICE_ROLE_KEY=your-service-role-key
   UPSTASH_REDIS_REST_URL=your-upstash-redis-url
   UPSTASH_REDIS_REST_TOKEN=your-upstash-redis-token

4. Run development server

   pnpm dev

5. Build for production

   pnpm build

🌐 Deployment to Vercel

Quick Deploy

Manual Deployment

1. Install Vercel CLI

   pnpm add -g vercel

2. Link to Vercel project

   vercel link

3. Set environment variables

   vercel env add NEXT_PUBLIC_SUPABASE_URL
   vercel env add NEXT_PUBLIC_SUPABASE_ANON_KEY
   vercel env add SUPABASE_SERVICE_ROLE_KEY
   vercel env add UPSTASH_REDIS_REST_URL
   vercel env add UPSTASH_REDIS_REST_TOKEN

4. Deploy to production

   vercel --prod

🗂️ Project Structure

photohunt/
├── app/                    # Next.js App Router
│   ├── api/               # API routes
│   ├── admin/             # Admin pages
│   ├── play/              # Player pages
│   ├── layout.tsx         # Root layout
│   ├── page.tsx           # Home page
│   └── globals.css        # Global styles
├── components/            # React components
│   └── ui/               # shadcn/ui components
├── lib/                   # Utility libraries
│   ├── supabase/         # Supabase clients
│   ├── redis.ts          # Upstash Redis client
│   └── utils.ts          # Helper functions
├── public/               # Static assets
├── vercel.json          # Vercel configuration
└── package.json         # Dependencies

🎯 Features (Planned)

• ✅ Landing page with Figma design
• ⏳ Session management
• ⏳ Player registration and authentication
• ⏳ Photo submission and approval
• ⏳ Real-time leaderboard
• ⏳ Admin dashboard
• ⏳ QR code session joining

📝 Development Workflow

1. Create feature branch
2. Implement feature
3. Test locally with pnpm dev
4. Build and verify with pnpm build
5. Deploy preview with vercel
6. Merge to main for production deploy

🔐 Environment Variables

Variable	Description	Required
NEXT_PUBLIC_SUPABASE_URL	Your Supabase project URL	Yes
NEXT_PUBLIC_SUPABASE_ANON_KEY	Supabase anonymous key	Yes
SUPABASE_SERVICE_ROLE_KEY	Supabase service role key	Yes
UPSTASH_REDIS_REST_URL	Upstash Redis REST URL	No
UPSTASH_REDIS_REST_TOKEN	Upstash Redis token	No

📄 License

© Luke Guo 2025

🤝 Contributing

Contributions are welcome! Please open an issue or submit a pull request.