Code Challenge Platform - University Testing System

A modern, production-ready code challenge platform built with Astro, Tailwind CSS v4, Prisma, and MySQL. Students fix syntax errors in code snippets with a timer-based scoring system.

✨ Features

Student Features

• Code Challenges: Fix syntax errors in various programming languages
• Timer-Based Scoring: Faster solutions earn more points
• Leaderboard: Real-time rankings based on performance
• Profile Dashboard: Track personal statistics and progress
• Performance Analytics: View challenge history and metrics

Admin Features

• User Management: Create and manage student accounts
• Challenge Creation: Add new coding challenges with custom parameters
• Platform Analytics: Monitor student activity and submissions

🛠️ Tech Stack

• Framework: Astro 4.x (SSR mode)
• Styling: Tailwind CSS v4
• Database: MySQL with Prisma ORM
• Authentication: Session-based with bcryptjs
• Runtime: Node.js
• Language: TypeScript

📋 Prerequisites

• Node.js 18+ or 20+
• MySQL 8.0+ (running locally or remote)
• npm or yarn package manager

🚀 Installation & Setup

Quick Setup (Recommended)

For Linux/Mac:

chmod +x setup.sh
./setup.sh

For Windows:

setup.bat

Manual Setup

1. Configure Database

Update the .env file with your MySQL credentials:

DATABASE_URL="mysql://root:YOUR_PASSWORD@localhost:3306/code_challenge_platform"
NODE_ENV="development"

Replace:

• YOUR_PASSWORD: your MySQL password
• localhost:3306: your MySQL host and port (if different)

2. Install Dependencies

npm install

Note: This will automatically run prisma generate via the postinstall hook.

3. Setup Database

Option A - Using Prisma Push (Faster, recommended for development):

npx prisma db push
npm run db:seed

Option B - Using Migrations (Better for production):

npm run prisma:migrate
npm run db:seed

4. Start Development Server

npm run dev

The application will be available at http://localhost:4321

Troubleshooting Setup

Error: "Failed to deserialize constructor options"

# Delete node_modules and reinstall
rm -rf node_modules package-lock.json
npm install
npx prisma generate

Database Connection Error:

• Ensure MySQL is running: mysql -u root -p
• Check DATABASE_URL in .env
• Verify the database user has proper permissions

🔑 Default Login Credentials

After seeding the database, you can log in with:

Admin Account:

• User ID: admin
• Password: admin123

Student Accounts:

• User ID: student1 / Password: password123
• User ID: student2 / Password: password123
• User ID: student3 / Password: password123

🎮 Usage Guide

For Students

1. Login: Use your student credentials to access the platform
2. View Challenges: Browse available coding challenges on the dashboard
3. Attempt Challenge: Click on a challenge to start the timer
4. Fix Code: Edit the code in the editor to fix syntax errors
5. Submit: Submit your solution before time runs out
6. Track Progress: View your stats on the profile page
7. Check Rankings: See your position on the leaderboard

For Administrators

1. Login: Use admin credentials to access admin panel
2. Create Users: Navigate to Users → Create New User
3. Create Challenges: Go to Challenges → Create New Challenge
4. Monitor Activity: View platform statistics on the dashboard

🗄️ Database Schema

The platform uses 4 main tables:

• users: Student and admin accounts
• challenges: Coding challenges with errors and solutions
• submissions: Student solution submissions
• sessions: Authentication sessions

🔧 Available Scripts

npm run dev          # Start development server
npm run build        # Build for production
npm run preview      # Preview production build
npm run prisma:generate  # Generate Prisma Client
npm run prisma:migrate   # Run database migrations
npm run prisma:studio    # Open Prisma Studio (DB GUI)
npm run db:seed      # Seed database with sample data

🏗️ Production Deployment

1. Build the Application

npm run build

2. Set Environment Variables

Ensure production environment variables are set:

DATABASE_URL="mysql://user:password@production-host:3306/db_name"
NODE_ENV="production"

3. Run Migrations

npm run prisma:migrate

4. Start Production Server

npm run preview

Or deploy to platforms like:

• Vercel (recommended for Astro)
• Netlify
• Railway (includes MySQL)
• DigitalOcean
• AWS/Azure/GCP

🎨 Design System

The platform uses a custom dark-mode design system:

• Colors: Primary blue (#007AFF), success green, warning orange, error red
• Typography: Inter (UI), JetBrains Mono (code)
• Spacing: 4px base unit system
• Components: Consistent styling across buttons, cards, tables

🔐 Security Features

• ✅ Password hashing with bcrypt (10 rounds)
• ✅ HTTP-only session cookies
• ✅ CSRF protection via SameSite cookies
• ✅ SQL injection prevention via Prisma
• ✅ Input validation on all forms
• ✅ Secure session management

📸 Preview

🤝 Contributing

This is a university project. For production use, consider adding:

• Rate limiting
• Email verification
• Password reset functionality
• Real-time leaderboard updates (WebSocket)
• Code execution sandbox
• More programming languages
• Difficulty-based filtering
• Search functionality

📝 License

MIT License - feel free to use for educational purposes.

🐛 Troubleshooting

Error: "Failed to deserialize constructor options" or "missing field enableTracing"

This means Prisma Client hasn't been generated properly.

# Clean install
rm -rf node_modules package-lock.json
npm install

# Generate Prisma Client
npx prisma generate

# Setup database
npx prisma db push
npm run db:seed

Database Connection Error:

Error: Can't reach database server at localhost:3306

Solutions:

• Ensure MySQL is running: sudo systemctl start mysql (Linux) or start MySQL from System Preferences (Mac)
• Check if MySQL is listening: mysql -u root -p
• Verify DATABASE_URL in .env matches your MySQL credentials
• Make sure port 3306 is not blocked by firewall

Prisma Client Not Generated:

# Manually generate
npx prisma generate

# If that fails, reinstall
rm -rf node_modules node_modules/.prisma
npm install

Port 4321 Already in Use:

# Kill the process using port 4321
lsof -ti:4321 | xargs kill -9

# Or use a different port
npm run dev -- --port 3000

Build Errors:

• Clear .astro cache: rm -rf .astro
• Clear node_modules: rm -rf node_modules && npm install
• Check Node.js version: node --version (should be 18+)

TypeScript Errors:

# Regenerate types
npx prisma generate
npm run astro check

📧 Support

For issues and questions, please check:

• Create a new issue
• Astro Documentation: https://docs.astro.build
• Prisma Documentation: https://www.prisma.io/docs
• Tailwind CSS: https://tailwindcss.com/docs

---

Built with ❤️ for modern code education