07 · 2024 · public source
Techie Sleuthsevent gameplay on the web.
A Next.js frontend for FOSS NSBM's Techie Sleuths '24 event. It packages a playful competition experience with registration, login, clue routes, crossword gameplay, scoring actions, leaderboard views, and a themed Mario-inspired visual system.
Problem
Event sites need more than a landing page when the competition itself happens online. Players need guided entry, puzzles, feedback, scoring, and enough atmosphere to make the experience feel like a game rather than a form.
Approach
The frontend uses Next.js 14, TypeScript, Tailwind CSS, Redux Toolkit, React Hook Form, Zod, Headless UI, Radix primitives, and Tremor. The route structure covers landing, registration, login, play, clue pages, crossword screens, and leaderboard views, while API modules handle auth, clues, puzzles, and score deductions.
Role
Frontend contributor. Worked on the event-facing application experience, UI structure, puzzle surfaces, and API-connected gameplay flows.
Highlights
- Competition flow includes registration, login, play state, clue pages, crossword gameplay, and leaderboard pages.
- API modules organize auth, clue retrieval, clue marking, puzzle interaction, and score deduction behavior.
- The visual system uses themed assets, custom fonts, marquees, cards, and responsive layout components.
- Form and UI layers combine React Hook Form, Zod, Headless UI, Radix, Tailwind, and Redux Toolkit.
Stack
- TypeScript
- Next.js
- Redux Toolkit
- Tailwind CSS
- React Hook Form
- Zod
- Headless UI
- Radix UI
At a glance
- Organization
- FOSS NSBM
- Surface
- Event frontend + puzzle UI
- Routes
- Clues, crossword, play, leaderboard
- State
- Redux Toolkit
- Status
- Live / public source