SIP Events — Hackathon Event Platform

A real-time, multi-event hackathon platform built with React + Vite, Node.js / Express, Socket.io, and Firebase Admin Firestore.

---

🌟 Architecture Overview

/
├── client/                     # Vite + React 18 Single Page App
│   ├── src/
│   │   ├── shared/             # AuthContext, useSocket, ProtectedRoute, ProjectorLayout, TimerComponent
│   │   ├── pages/              # LoginPage, SignupPage, EventListPage, CreateTeamPage, JoinTeamPage
│   │   ├── admin/              # AdminDashboard (overview, team inspection, user admin toggle)
│   │   ├── events/             # 5 Event Folders: EventPage & DisplayPage (/display projector)
│   │   │   ├── reverse-research-engineering/
│   │   │   ├── bytestorm/
│   │   │   ├── tech-trap/
│   │   │   ├── tech-time-capsule/
│   │   │   └── tech-quiz/
│   │   ├── App.jsx             # Router definition
│   │   └── index.css           # Custom dark glassmorphism design system
│   └── vite.config.js          # Proxies /api and /socket.io to server:3001
│
└── server/                     # Express + Socket.io + Firebase Admin
    ├── constants/events.js     # Event definitions (5 events)
    ├── shared/                 # auth.middleware.js, socket.js, joinCodeGen.js
    ├── routes/                 # auth.js, teams.js, admin.js
    ├── events/                 # Per-event route stubs & socket handlers
    │   ├── reverse-research-engineering/
    │   ├── bytestorm/
    │   ├── tech-trap/
    │   ├── tech-time-capsule/
    │   └── tech-quiz/
    ├── firebase.js             # Firebase Admin SDK initialization
    └── index.js                # Express & Socket.io server entry point

---

🔑 Key Features Implemented

1. Individual Authentication:

   • Register with Name + (Email or Phone) + Password.
   • Passwords hashed with bcryptjs.
   • JWT tokens stored in localStorage and sent via Authorization: Bearer <token> and Socket.io handshake auth.

2. Per-Event Team Registration:

   • Independent teams: A user can lead a team in ByteStorm, join another team in Tech Quiz, and be unassigned in Tech Trap.
   • Create Team: Generates a unique join code per event (e.g. BYTE-42X) and sets the creator as leader.
   • Join Team: Validates the join code against the event and enforces the leader-configured max capacity.

3. Socket.io Room Assignment:

   • Central socket layer validates team membership in Firestore on team:join event.
   • Assigns members to the room ${eventId}-${teamId} for team-isolated real-time synchronization.

4. Projector Display & Timers:

   • Fullscreen /display route for each event with synced timer progress bar listening to timer:start, timer:tick, timer:end.

5. Admin Panel (/admin):

   • Tabbed view across all 5 events.
   • Inspect team names, join codes, members, and team leaders.
   • User directory with 1-click admin toggle.

---

🚀 Getting Started

1. Configure Server Environment

Create server/.env based on server/.env.example:

FIREBASE_PROJECT_ID=your-project-id
FIREBASE_CLIENT_EMAIL=firebase-adminsdk-xxxx@your-project-id.iam.gserviceaccount.com
FIREBASE_PRIVATE_KEY="-----BEGIN RSA PRIVATE KEY-----\n...\n-----END RSA PRIVATE KEY-----\n"

JWT_SECRET=your-32-char-random-secret
JWT_EXPIRES_IN=7d
PORT=3001
CLIENT_ORIGIN=http://localhost:5173

2. Install Dependencies

From root:

npm run install:all

Or manually:

cd server && npm install
cd ../client && npm install

3. Run Development Servers

From the root directory:

npm run dev

• Client: http://localhost:5173
• Server: http://localhost:3001