CodeBlocks - Coding Competition Platform

Arrange the Code. Build the Solution.

A Next.js 14 fullstack application for a one-time coding competition event with drag-and-drop code block arrangement, real-time scoring, and anti-cheat measures.

🚀 Features

• Drag & Drop Interface: Intuitive code block arrangement using @dnd-kit
• Real-time Leaderboard: Live updates every second with animated rankings
• Admin Dashboard: Complete question management and monitoring
• Anti-Cheat System: Fullscreen enforcement, tab detection, and violation tracking
• Futuristic UI: Glassmorphism effects, neon glows, and animated backgrounds
• Secure Scoring: Server-side calculation with time bonuses and penalties

🛠️ Tech Stack

• Framework: Next.js 14 with App Router
• Language: TypeScript (strict mode)
• Database: SQLite with Prisma ORM (WAL mode)
• Styling: Tailwind CSS v3 + shadcn/ui components
• Animations: Framer Motion
• Drag & Drop: @dnd-kit
• Code Execution: Piston API (C language)

📦 Installation

Prerequisites

• Node.js 18+ and npm
• Git

Setup

1. Clone the repository

git clone <repository-url>
cd chain-reaction

2. Install dependencies

npm install

3. Set up the database

npx prisma generate
npx prisma db push

4. Seed the database (optional)

node prisma/seed.js

5. Create environment file Create a .env file in the root directory:

DATABASE_URL="file:./dev.db"

🏃 Running the Application

Development Mode

npm run dev

Open http://localhost:3000

Production Build

npm run build
npm run start

🔐 Admin Access

Admin access is available for authorized personnel only.

📁 Project Structure

/app
  /api          → Backend API routes
  /meowin       → Admin section
  /contest      → Student contest page
  /login        → Team login
  /practice     → Practice mode

/components
  /ui           → shadcn components
  /contest      → Contest-specific
  /shared       → Shared components

/lib            → Utilities, DB client, scoring
/prisma         → Database schema

🎯 Key Features

Admin Features

• ✅ Create and manage questions with multi-step wizard
• ✅ Live leaderboard with scan animation
• ✅ Team management and monitoring
• ✅ Violation tracking
• ✅ Export results to CSV

Student Features

• ✅ Drag-and-drop code block arrangement
• ✅ Check answer functionality (1 free test)
• ✅ Real-time timer and scoring
• ✅ Practice mode for learning
• ✅ Fullscreen enforcement
• ✅ Anti-cheat protection

Scoring System

• Base Points: 100 points per question
• Match %: 100% = full points, <100% = halved points
• Time Bonus: +10% if under goal time
• Test Penalty: -25 points per test after 1st free test
• Violation Penalty: Progressive (20, 30, 40...)

🎨 Design System

Colors

• Primary: #00ff88 (Neon Green)
• Accent: #00d4ff (Electric Blue)
• Background: #0a0a0a (Dark)
• Cards: #1a1a1a with glassmorphism

UI Components

• Glassmorphism cards with backdrop blur
• Neon glow effects on interactive elements
• Animated particle background
• Scan line animations on tables
• Smooth transitions and micro-interactions

🔒 Security Features

• Server-side authentication
• Hardcoded admin credentials (change for production!)
• Anti-cheat measures:
  • Fullscreen enforcement
  • Tab switch detection
  • Copy/paste disabled
  • Right-click disabled
  • Mobile device blocking

📊 Database Schema

Main Tables:

• Team - Team information and scores
• Question - Contest questions
• Attempt - Submission history
• QuestionProgress - Team progress per question
• Violation - Anti-cheat violations

🚨 Troubleshooting

Build Errors

Tailwind CSS PostCSS Error:

npm uninstall tailwindcss @tailwindcss/postcss @tailwindcss/node
npm install -D tailwindcss@^3.4.17

Database Issues:

npx prisma generate
npx prisma db push

Common Issues

1. Dev server not starting: Delete .next folder and node_modules, then reinstall
2. Database locked: Close all connections and restart
3. Linting errors: Build uses ignoreDuringBuilds: true for flexibility

🎯 Configuration

next.config.ts

• ESLint and TypeScript errors ignored during builds
• Customize in production for stricter validation

tailwind.config.js

• Dark mode configured
• Custom colors and animations
• Responsive design (desktop only, 1024px+)

📝 Scripts

npm run dev      # Start development server
npm run build    # Build for production
npm run start    # Start production server
npm run lint     # Run ESLint

🤝 Contributing

This is a one-time event platform. For improvements:

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

📄 License

MIT License - See LICENSE file for details

🙏 Acknowledgments

• Next.js team for the amazing framework
• shadcn for the beautiful UI components
• Prisma for the excellent ORM
• Tailwind CSS for utility-first styling

---

Built with ❤️ for coding competitions

For detailed setup instructions, see LOCAL_SETUP_GUIDE.md