Inspiration
Cybersecurity is often seen as a dry, overly technical, and intimidating field for beginners. We wanted to change that. Inspired by the neon-drenched aesthetics of cyberpunk culture and the engaging mechanics of modern puzzle games, we set out to build an experience that makes learning about digital security genuinely fun. We asked ourselves: What if learning to defend against phishing or ransomware felt like a high-stakes, sci-fi hacking movie?
What it does
Neon Sleuth: The Digital Fixer is an interactive, gamified cybersecurity educational web application. Players take on the role of a "Fixer," tasked with securing a vulnerable mainframe across 5 distinct levels: The Phony Friend: A "Spot the Difference" challenge where players identify red flags in a simulated phishing email. The Glass Vault: An interactive vault where players drag-and-drop words, numbers, and symbols to physically construct an unbreakable password. The VIP Club: A high-speed sorting game where players act as a bouncer, accepting legitimate database queries and rejecting malicious SQL injection attempts (e.g., ' OR 1=1). Defend the Grid: A fast-paced grid defense game where players deploy firewalls to block incoming network viruses. The Ticking Clock: A high-pressure ransomware scenario forcing the player to choose whether to pay a ransom, ignore it, or sever the network connection before a timer expires. After each level, players receive an Intelligence Briefing that breaks down the real-world cybersecurity concepts they just applied. Players are also rewarded with unlockable badges in their Trophy Room based on their performance, culminating in a final "Security Rating."
How we built it
We built Neon Sleuth as a modern Full-Stack application, utilizing a microservices architecture: Frontend: We used React and Vite for a blazing-fast user interface. The entire cyberpunk aesthetic was custom-built using Tailwind CSS (v4), leveraging its new configuration engine for our neon color palette (cyber-neonCyan, cyber-neonMagenta). We used Framer Motion heavily for the cinematic entrances, physics-based springs, and smooth micro-animations. Backend: We built a lightweight backend using Python and FastAPI to manage game state, validate scores, and serve contextual hints via our "AI-Sidekick." Deployment: The frontend is deployed globally on Vercel, while the backend is containerized using Docker and deployed via the GitHub Container Registry (GHCR) to Render.
Challenges we ran into
State Management & Closures: Managing the fast-paced, asynchronous state in the mini-games (especially Level 2 and Level 4) was tricky. We initially ran into a "stale closure" bug where the game logic evaluated old state while the UI rendered new state, making a level unbeatable. We had to carefully refactor our React useEffect hooks and state updates to keep the game loop perfectly in sync. Tailwind v4 Migration: Upgrading to Tailwind v4 midway through development completely broke our custom CSS utility classes because v4 overhauled how it reads configuration files. We had to dive into the documentation to implement the new @import "tailwindcss" and @config directives to get our custom neon themes working in production. CI/CD Pipeline: Getting the GitHub Actions pipeline to authenticate and automatically push our Dockerized Python backend to GHCR required meticulous environment variable and permissions management.
Accomplishments that we're proud of
The Aesthetic: We are incredibly proud of the UI/UX. It doesn't look like a standard educational quiz
- it looks and feels like a premium game. The custom scrollbars, scanline overlays, glowing toast notifications, and cinematic level transitions make the experience incredibly immersive. The Gamification: We successfully transformed abstract concepts (like SQL Injection) into tangible, understandable game mechanics (like acting as a bouncer at a club). Flawless Deployment: Successfully setting up a full CI/CD pipeline that automatically builds our Docker container on every GitHub push was a major win for our workflow.
What we learned
We learned a massive amount about integrating complex Framer Motion animations with React state without causing performance bottlenecks. We also gained deep experience in containerizing Python applications, configuring GitHub Actions, and bridging the gap between educational content and game design.
What's next for Neon Sleuth
We want to expand the "Digital Fixer" universe! Our next steps include:
Adding a global leaderboard to encourage competitive learning. Introducing new levels covering advanced topics like Man-in-the-Middle (MitM) attacks and Social Engineering. Adding sound effects and a synth-wave background track to complete the cyberpunk atmosphere.
Log in or sign up for Devpost to join the conversation.