🎮 LeetBoard - Minecraft-Styled LeetCode Leaderboard

A competitive LeetCode leaderboard with weekly rankings, built with Next.js and Supabase. Features a retro Minecraft-inspired dark theme!

---

✨ Features

• 🔐 Google OAuth Authentication - Secure sign-in with Google
• 🎯 LeetCode Integration - Validates and tracks real LeetCode usernames
• 📊 Automated Stats Tracking - Hourly updates from LeetCode API
• 🔄 Weekly Stats - Automatic weekly reset every Monday
• 🏆 Points System - Earn points based on difficulty (Easy: 1pt, Medium: 2pt, Hard: 3pt)
• 📈 Beautiful Leaderboard - Minecraft-styled table with rankings
• 🥇 Rank Badges - Gold/Silver/Bronze for top 3 users
• ✨ User Highlighting - See your position at a glance
• 🔀 Multiple Sorting - Sort by weekly points, total solved, or contest rating
• ⚡ Manual Refresh - Users can trigger their own stats update
• 📱 Responsive Design - Works perfectly on mobile, tablet, and desktop
• 👑 Admin Panel - Manually manage users (admin-only feature) [Coming in Phase 4]
• 🎨 Minecraft Theme - Retro pixel art styling with dark mode

---

🚀 Quick Start

For first-time setup, see: QUICK_START.md
For Phase 2 setup, see: PHASE2_QUICKSTART.md

Prerequisites

• Node.js 18+
• Supabase account
• Google OAuth credentials
• Vercel account (for cron jobs)

Installation

# Install dependencies
npm install

# Copy environment variables
cp .env.local.example .env.local

# Edit .env.local with your Supabase credentials + CRON_SECRET
# Then run the development server
npm run dev

Visit http://localhost:3000

---

📚 Documentation

• QUICK_START.md - 5-minute setup guide
• PHASE1_SETUP.md - Detailed Phase 1 instructions
• PROJECT_ROADMAP.md - Full project plan (all 4 phases)
• DATABASE_SCHEMA.md - Database structure and SQL

---

🏗️ Project Status

✅ Phase 1: Authentication & Signup (COMPLETE)

• Google OAuth integration
• LeetCode username validation
• Supabase database setup
• Minecraft-styled UI theme
• User profile management

✅ Phase 2: LeetCode Data Integration (COMPLETE)

• Fetch user statistics from LeetCode
• Weekly stats tracking with baseline
• Automated hourly data refresh via Vercel Cron
• Points calculation system (E:1, M:2, H:3)
• Manual refresh button for users
• Automatic weekly reset (Mondays)

✅ Phase 3: Leaderboard UI (COMPLETE)

• Main leaderboard table with Minecraft styling
• Ranking system with gold/silver/bronze badges
• Difficulty breakdown display (E:X, M:Y, H:Z)
• Current user row highlighting
• Multiple sort options (weekly points, total, rating)
• Refresh functionality
• Responsive design for all devices
• Real-time ranking calculation with tie-breaking

👑 Phase 4: Admin Panel (FINAL)

• Admin dashboard
• Manual user management
• Bulk operations
• System logs

---

🎨 Design System

The project uses a Minecraft-inspired dark theme with:

• Pixel font (Press Start 2P)
• Blocky UI elements with depth/shadows
• Retro color palette
• Pixelated scrollbars and inputs

Custom CSS Classes:

• .mc-button - Minecraft-styled buttons
• .mc-input - Pixelated input fields
• .mc-panel - Container panels
• .mc-table - Leaderboard table

---

🛠️ Tech Stack

• Frontend: Next.js 15, React 19, TypeScript, Tailwind CSS 4
• Backend: Next.js API Routes, Supabase (PostgreSQL)
• Auth: Supabase Auth with Google OAuth
• External: LeetCode GraphQL API
• Deployment: Vercel (recommended)

---

📁 Project Structure

leetboard/
├── src/
│   ├── app/
│   │   ├── api/              # API routes
│   │   ├── auth/             # Auth callbacks
│   │   ├── signup/           # Signup page
│   │   └── ...
│   ├── lib/
│   │   └── supabase/         # Supabase utilities
│   └── middleware.ts         # Auth middleware
├── public/                   # Static assets
├── DATABASE_SCHEMA.md        # SQL schema
├── PHASE1_SETUP.md          # Setup guide
└── PROJECT_ROADMAP.md       # Full roadmap

---

🔒 Environment Variables

Create a .env.local file with:

NEXT_PUBLIC_SUPABASE_URL=your-supabase-url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
ADMIN_EMAIL=your-admin-email@example.com

See .env.local.example for details.

---

🧪 Development

# Start dev server
npm run dev

# Build for production
npm run build

# Run production build
npm start

# Lint code
npm run lint

---

🤝 Contributing

This is a personal project, but feel free to fork and customize it for your own use!

---

📝 License

MIT License - feel free to use this project however you'd like!

---

🎯 Roadmap

See PROJECT_ROADMAP.md for the complete 4-phase development plan.

Current Phase: Phase 1 Complete ✅
Next Up: Phase 2 - LeetCode Data Integration 🔄

---

Built with ❤️ and lots of pixel art