CricketBuddy

A production-ready fantasy cricket web application built with Next.js, Supabase, and Razorpay.

Features

• Authentication - Google & Email auth via Supabase
• Premium Subscription - ₹49 one-time payment via Razorpay
• Private Leagues - Create & join leagues with invite codes
• Fantasy Team Builder - Budget-based team selection with constraints
• Live Matches - Real-time match data with caching
• Real-time Leaderboards - WebSocket-powered rankings
• League Chat - Real-time chat with meme reactions
• Points Engine - Server-side fantasy points calculation
• Dark Theme - Stunning UI with neon accents
• Mobile-first - Responsive design for all devices
• SEO Optimized - Server-side rendering, meta tags, sitemap

Tech Stack

• Frontend: Next.js 14 (App Router), TypeScript, Tailwind CSS, Framer Motion
• Backend: Next.js API Routes, Supabase Edge Functions
• Database: Supabase PostgreSQL with Realtime
• Auth: Supabase Auth (Google + Email)
• Payments: Razorpay
• State: Zustand
• Validation: Zod

Project Structure

fantasy-cricket/
├── src/
│   ├── app/                    # Next.js App Router
│   │   ├── (auth)/            # Auth pages (login, register)
│   │   ├── (dashboard)/       # Protected dashboard pages
│   │   └── api/               # API routes
│   ├── components/
│   │   ├── ui/                # Reusable UI components
│   │   └── features/          # Feature-specific components
│   ├── lib/
│   │   ├── supabase/          # Supabase clients
│   │   ├── razorpay/          # Payment utilities
│   │   └── cricket-api/       # Cricket data fetching
│   ├── hooks/                 # Custom React hooks
│   ├── stores/                # Zustand stores
│   ├── types/                 # TypeScript types
│   └── validators/            # Zod schemas
├── supabase/
│   └── migrations/            # Database migrations
└── public/                    # Static assets

Installation

Prerequisites

• Node.js 18+
• npm or yarn
• Supabase account
• Razorpay account (test mode)

1. Clone the repository

cd fantasy-cricket

2. Install dependencies

npm install

3. Set up Supabase

1. Create a new project at supabase.com
2. Go to SQL Editor and run the migration script from supabase/migrations/001_initial_schema.sql
3. Enable Google Auth in Authentication > Providers
4. Copy your project URL and anon key

4. Set up Razorpay

1. Create account at razorpay.com
2. Switch to Test Mode
3. Copy your test API keys from Dashboard > Settings > API Keys

5. Configure environment variables

cp .env.example .env.local

Edit .env.local:

NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
NEXT_PUBLIC_RAZORPAY_KEY_ID=rzp_test_xxxxx
RAZORPAY_KEY_ID=rzp_test_xxxxx
RAZORPAY_KEY_SECRET=your-secret-key
CRON_SECRET=your-random-secret
NEXT_PUBLIC_APP_URL=http://localhost:3000

6. Run the development server

npm run dev

Open http://localhost:3000

Deployment

Environment Variables for Production

Variable	Description
NEXT_PUBLIC_SUPABASE_URL	Supabase project URL
NEXT_PUBLIC_SUPABASE_ANON_KEY	Supabase anonymous key
NEXT_PUBLIC_RAZORPAY_KEY_ID	Razorpay key ID (live)
RAZORPAY_KEY_ID	Razorpay key ID (live)
RAZORPAY_KEY_SECRET	Razorpay secret key (live)
CRON_SECRET	Secret for cron job auth
NEXT_PUBLIC_APP_URL	Your production URL

Database Schema

Main Tables

• profiles - User profiles with points and premium status
• leagues - Fantasy leagues with invite codes
• league_members - League membership junction
• fantasy_teams - User's fantasy team selections
• players - Cricket players with stats
• matches - Cricket matches
• chat_messages - League chat messages
• leaderboards - Real-time rankings

Security Features

• JWT authentication with refresh tokens (Supabase)
• Row Level Security (RLS) on all tables
• Input validation with Zod
• Rate limiting via middleware
• Secure payment verification with signatures
• Server-side team locking before match start

Usage

Creating a League

1. Go to Dashboard → Create League
2. Enter league name and settings
3. Share the invite code with friends

Joining a League

1. Get invite code from friend
2. Go to Dashboard → Join League
3. Enter the 6-character code

Building a Team

1. Select a match
2. Pick 11 players within 100 credits
3. Choose Captain (2x points) and Vice Captain (1.5x)
4. Save before team locks

Testing Payments

Use Razorpay test mode with these cards:

• Success: 4111 1111 1111 1111
• Failure: 4000 0000 0000 0002

---

Made with 🏏 in India