An interactive, live-event platform for running a hackathon as a real-time spectator sport. Squads compete through a 7-stage championship while player dashboards, judge consoles, host controls, and a stadium projector screen all stay in perfect sync — with countdowns, sound effects, confetti, and a 3D victory podium.
Built with React, TypeScript, TailwindCSS, and a zero-dependency Node.js + MongoDB backend.
- Round 1: Open Qualifier (No Elimination)
- All registered squads advance to Round 2.
- Round 2: Problem Statement Showdown (Top 8 Qualify)
- 8 distinct challenge tracks with a maximum capacity of 2 teams per problem statement.
- The Top 8 ranked teams advance to the Grand Finals.
- Round 3: Grand Finals (Top 4 Prized)
- 🥇 1st Place: Tournament Champion (1 Team)
- 🥈 2nd Place: Runner-Up Silver Laureate (1 Team)
- 🥉 3rd Place: Dual Bronze Joint Winners (2 Teams)
- 7-Stage Event Flow Pipeline: Lobby ➔ Problem Reveal ➔ Card Reveal (3 Tech Stack Draft) ➔ 15m Build Phase ➔ Live Pitch & Defense ➔ Judging Deliberation ➔ Leaderboard & 3D Podium Reveal.
- Real-Time Sync: Server-Sent Events (SSE) + fast polling fallback automatically synchronizes Player Dashboards, Judge Consoles, Host Controls, and the Stadium Projector in real time.
- Web Audio Soundscape: Zero-dependency synthesized audio cues for countdown ticks, buzzers, phase whooshes, and victory fanfares.
- Stadium Visuals: Canvas confetti engine, qualification modals, and 3D animated victory podiums.
| Console | URL | Who |
|---|---|---|
| 🧑💻 Player Dashboard | /join → /lobby → /game → /pitch |
Competing squads (max 32 teams, 3 members each) |
| 🎛️ Host Control | /host/login → /host/dashboard |
Event host — drives phases, rounds, game control |
| ⚖️ Judge Portal | /judge/login → /judge/dashboard |
Judges — score submissions, deliberate |
| 🏟️ Stadium Projector | /projector |
Big-screen view for the audience |
Phase-gating protects the flow: each route only unlocks when the event is in the right phase (ProtectedParticipantPhase / ProtectedHost).
| Layer | Tech |
|---|---|
| Frontend | React 19, TypeScript 6, Vite 8, Tailwind CSS 4 |
| Animation | Framer Motion 13, custom Canvas confetti |
| State | Zustand 5, React Router 7 |
| Backend | Zero-dependency Node.js node:http server with SSE broadcast |
| Database | MongoDB Atlas (with local JSON file backup/fallback) |
| Linting | OxLint |
BuildWithoutBuilding/
├── index.html
├── vite.config.ts · tsconfig*.json · vercel.json
├── server/ # Zero-dependency Node backend (port 3001)
│ ├── index.js # http server + SSE sync + Mongo + host auth
│ ├── seed_room.js # Room seeding
│ ├── database.json # Local fallback store
│ └── backups/ # Automatic backups
└── src/
├── App.tsx # All routes (player, host, judge, projector)
├── components/
│ ├── cards/ · forms/ # Tech-stack draft cards, score & solution forms
│ ├── leaderboard/ # Leaderboard table + 3D tournament podium
│ ├── pitch/ # Live pitch deck
│ ├── timer/ # Countdown timer
│ ├── auth/ # Phase-gated route guards
│ ├── layout/ · ui/ # Navbar, modals, confetti, transitions…
│ └── # SoundToggle (Web Audio soundscape)
└── pages/ # Landing, Lobby, Game, Pitch, Judging,
# Leaderboard, Projector, Host, Judge…
git clone https://github.com/princekumar-dev/BuildWithoutBuilding.git
cd BuildWithoutBuilding
npm installcp .env.example .env
# then fill in your own MONGO_URI, DB_NAME, HOST_EMAIL, HOST_PASSWORD…npm run dev:full- Client Application:
http://localhost:5173 - Backend API & SSE Server:
http://localhost:3001 - Host Dashboard:
http://localhost:5173/host/login - Judge Portal:
http://localhost:5173/judge/login - Stadium Projector:
http://localhost:5173/projector
npm run buildFree to use for your own events — attribution appreciated.
Build fast. Pitch hard. Win big. ⚡