🛡️ Badger - Operation Gamify

Mission-Driven, Livestream-Powered, Social Competition Platform

🚀 Features

Core Modules

• Authentication: NextAuth.js with role-based access (Admin, Organizer, User)
• Mission System: Dynamic mission feed with filtering and submission system
• 1v1 Battles: Real-time matchmaking with dual livestream interface
• Leaderboards: Global and filtered rankings with comprehensive stats
• Profile System: User profiles with badges, stats, and activity tracking
• Admin Dashboard: Mission management, submission review, user administration

Design

• Tactical UI: Military HUD aesthetic with scan lines and glitch effects
• Font: IBM Plex Mono for that authentic terminal feel
• Color Scheme: Matrix green (#00ff41) with tactical orange accents
• Animations: Glitch effects, battle-live pulsing, and smooth transitions

🛠️ Tech Stack

• Framework: Next.js 15 with App Router
• Language: TypeScript
• Styling: Tailwind CSS with custom tactical classes
• Database: Prisma ORM with PostgreSQL
• Authentication: NextAuth.js
• UI Components: Radix UI primitives
• File Upload: UploadThing
• Streaming: Mux integration ready
• Real-time: Socket.io integration ready

📦 Installation

1. Install dependencies:

npm install

2. Set up environment variables: Update .env.local with your values:

# Database
DATABASE_URL="postgresql://username:password@localhost:5432/badger_db"

# NextAuth.js
NEXTAUTH_URL="http://localhost:3000"
NEXTAUTH_SECRET="your-secret-key-here"

# Add your OAuth providers, UploadThing, and Mux credentials

# Mapbox (for tactical battle map)
NEXT_PUBLIC_MAPBOX_ACCESS_TOKEN="your-mapbox-token-here"

3. Set up the database:

npx prisma migrate dev --name init
npx prisma generate

4. Run the development server:

npm run dev

Visit http://localhost:3001 to see the tactical interface in action!

📋 Database Schema

The app includes comprehensive models for:

• Users: Authentication, stats, social features
• Missions: Categories, difficulty levels, proof requirements
• Submissions: File uploads, review system, scoring
• Battles: 1v1 matchmaking, scoring, streaming
• Badges: Achievement system with rarity tiers
• Social: Following system, leaderboards

🎮 Usage

For Users:

1. Sign up and complete your operator profile
2. Browse and accept missions from the tactical feed
3. Submit proof (photo/video/livestream) for review
4. Challenge opponents in 1v1 battles
5. Climb the leaderboards and earn badges

For Organizers:

1. Create and manage missions
2. Review submissions and moderate content
3. Launch battle events and tournaments

for Admins:

1. Full platform oversight via Command Center
2. User management and role assignment
3. Content moderation and system monitoring

🔧 Development

Key Components:

• components/missions/ - Mission feed and submission system
• components/battles/ - Matchmaking and battle interface
• components/leaderboard/ - Ranking system with filters
• components/profile/ - User profiles and stats
• components/admin/ - Administrative dashboard

Custom CSS Classes:

• .tactical-grid - Matrix-style background grid
• .hud-border - Military HUD border styling
• .status-active, .status-pending, .status-danger - Status indicators
• .battle-live - Pulsing live battle indicator
• .scan-lines - CRT-style scan line overlay

🚀 Deployment

The app is ready for deployment on Vercel, Netlify, or any Node.js hosting platform.

1. Set up your production database
2. Configure environment variables
3. Run database migrations
4. Deploy!

📊 Future Enhancements

• Live streaming integration with Mux
• Real-time notifications with Socket.io
• Mobile app companion
• Tournament bracket system
• Advanced analytics dashboard
• Integration with fitness trackers
• Multi-language support

---

Built for the mission. Engineered for victory. 🛡️

Operation Badger - Where every challenge becomes a conquest.