A competitive LeetCode leaderboard with weekly rankings, built with Next.js and Supabase. Features a retro Minecraft-inspired dark theme!
- 🔐 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
For first-time setup, see: QUICK_START.md
For Phase 2 setup, see: PHASE2_QUICKSTART.md
- Node.js 18+
- Supabase account
- Google OAuth credentials
- Vercel account (for cron jobs)
# 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 devVisit http://localhost:3000
- 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
- Google OAuth integration
- LeetCode username validation
- Supabase database setup
- Minecraft-styled UI theme
- User profile management
- 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)
- 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
- Admin dashboard
- Manual user management
- Bulk operations
- System logs
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
.mc-button- Minecraft-styled buttons.mc-input- Pixelated input fields.mc-panel- Container panels.mc-table- Leaderboard table
- 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)
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
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.comSee .env.local.example for details.
# Start dev server
npm run dev
# Build for production
npm run build
# Run production build
npm start
# Lint code
npm run lintThis is a personal project, but feel free to fork and customize it for your own use!
MIT License - feel free to use this project however you'd like!
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