Hackloft — Gamified Competitive Coding Platform

A web-based platform that combines interactive coding challenges with real-time competitive features to make programming practice more engaging.

Features

• In-browser code editor powered by Monaco Editor (the engine behind VS Code)
• Challenge runner — submit solutions and receive immediate feedback
• Real-time leaderboard — competitive rankings across all users
• Problem library — curated set of algorithmic challenges with difficulty tiers
• User dashboard — track progress, completed challenges, and rankings

Tech Stack

Layer	Technology
Frontend	React, JavaScript, CSS
Code Editor	Monaco Editor
Backend	Python (Flask/routes.py)
Build	npm, webpack

Screenshots

Project Structure

├── index.html          # Landing page
├── dashboard.html/js   # User dashboard
├── challenges.html     # Challenge browser
├── compiler.html/js    # In-browser code execution
├── leaderboard.js      # Real-time rankings
├── problemData.js      # Challenge definitions
├── routes.py           # Backend API routes
└── App.js              # React entry point

Getting Started

npm install
npm start

Backend:

python routes.py

Team

Built as part of a collaborative software engineering project using Agile/Scrum methodology across 4 sprints.