HackCode Arena

An interactive coding game for hackathons. Solve challenges in the browser, pass tests, and climb the leaderboard.

Comment

Introduction

HackCode Arena is an interactive browser-based coding game designed for hackathons. Participants solve bite-sized programming challenges directly in the browser, run their code against automated tests, and earn points based on correctness and speed. A live leaderboard keeps the competition exciting. The project is lightweight, extensible, and easy to deploy — perfect for hackathon settings where speed, fun, and collaboration matter most.

Key Features

  • Live Code Editor: Write and run JavaScript code directly in the browser.
  • Automated Testing: Each challenge has predefined test cases. Pass them to score points.
  • Timer & Bonus Points: Solve challenges faster to earn extra points.
  • Leaderboard: Tracks participant scores in real time.
  • Extensible Challenge System: Add new challenges by editing a single JSON file.
  • Cross-Platform: Works on any modern browser; backend is Node.js with Express.

Architecture

Frontend (React + Vite)

  • Editor: A simple textarea (can be upgraded to Monaco/CodeMirror).
  • Challenge List: Displays available coding problems.
  • Runner: Executes user code in a sandbox and compares outputs.
  • Leaderboard Component: Shows top players and scores. Backend (Node.js + Express)
  • Challenges API: Serves challenge data from challenges.json.
  • Leaderboard API: Stores and retrieves scores from leaderboard.json.
  • Persistence: Simple JSON files (no database needed for hackathon speed).

How It Works

  • Player enters name → stored in frontend state.
  • Selects a challenge → starter code is loaded into editor.
  • Writes solution → clicks “Run Tests”.
  • Runner executes code:
  • Wraps user code in a sandbox.
  • Runs each test case.
  • Compares output with expected result.
  • Scoring:
  • Base points per challenge.
  • Bonus points based on remaining time.
  • Leaderboard update:
  • Score is sent to backend via /leaderboard API.
  • Backend saves score in leaderboard.json.
  • Leaderboard component fetches and displays updated scores.

Deployment Options

  • Local: Run npm start in server/ and npm run dev in client/.
  • Docker: Use docker-compose up --build to spin up both services.
  • Cloud: Host frontend on Netlify/Vercel, backend on Heroku/Render.

## Extending the Game

  • Add new challenges: Edit server/data/challenges.json.
  • Change scoring rules: Modify bonus logic in client/src/App.jsx.
  • Upgrade editor: Replace textarea with Monaco for syntax highlighting.
  • Persistent sessions: Save player names and code in localStorage.

Built With

Share this project:

Updates