Cyber City

CyberCity's dashboard at 96% resilience — every number derived from play, including the district flagged as the weakest defence.
Onboarding in two screens: accounts rendered as a dimly lit 0% city, then a role to play. Composite with annotations added.
Digital Breadcrumbs — Find Alex mid-case: connect evidence to facts to inferences. High-sensitivity ones need 2-3 corroborating clues.
Three harmless habits — tagged family, a reused username, a holiday post — chain into a de-anonymised identity. Reasoning generated live.
Claude re-reasons on every scan: tick a different set of habits and it writes new chains for that exact combination, live.
Privacy Defence Score — each mission you clear raises it. Hide your route's start point, blur your birthday, check who can see you.
Recovery Rush — the hub tracks your weakest incident type and sends you back to it. Two scenarios playable, three on the roadmap.
Email Compromise Cascade mid-run — one Gmail breach reaching four accounts via recovery email. Each action costs seconds; order decides.
Contained in 31 seconds. The debrief explains why Instagram was the account to lock first — and Level 5 unlocks the Guardian Spire.
Help Auntie May — a "this is my new number" text from someone claiming to be her son. You read the chat and pick the advice she follows.
The same request run twice. Message, fake domain and answer key all differ — Claude writes the flags, the engine still scores them.
The capstone chains all three districts into one case. Stage 2 of 3: Jordan's Gmail is breached and a reused password exposes Instagram.

Inspiration

I've always been interested in cybersecurity, and the deeper I've explored it, the more one thing has stood out — almost everything in the field is written for people already inside it. The average everyday user, the person most likely to actually lose an account, never sees any of it.

Looking at my own setup, I noticed how my email can reset my bank account, while my phone number can reset my email. A game I logged into with "Continue with Google" four years ago is still connected to my account. Nobody designed that graph — it accumulated. In a real takeover, the attacker maps it faster than you do.

"Be careful what you share" doesn't show you the mechanism. And a twenty-item breach checklist arrives at exactly the moment stress has ruined your ability to prioritise.

You can't defend a shape you can't see.

So I drew it: a city where every account cluster becomes a district, and every security habit you fix lights another building.

What it does

CyberCity turns your security posture into a skyline you can look at. The banner across the top isn't decoration — the lit windows, the neon towers, the ambient traffic and the "CITY UNDER ATTACK / CYBERCITY PROTECTED" badge are all computed from your actual scores. A neglected city is dark and hazy. A defended one glows. Beneath it, three district towers show how protected each area is, and the dashboard always points you at whichever one is currently your weakest defence.

You start by choosing a role — each represents a different reason people begin caring about cybersecurity. Investigator uncovers what their digital trail reveals. Responder learns to act during a compromise. Guardian protects someone else. Each role maps to a district, but everyone begins in Digital Breadcrumbs — because that's where the story starts. Your choice simply shapes what you're working toward.

Digital Breadcrumbs — the Investigator's district.

Privacy Mirror asks what you normally share — birthday photos, running routes, workplace, holiday updates — then, instead of warning you, shows you the chain. A repeated route starting point plus an identifiable home in your photos can reveal roughly where you live. Not advice, a derivation.

Find Alex is the practice run: five public posts from a fictional profile, and you work out what a stranger could learn. Then it gets personal. You investigate a profile generated to share the way you do, scored on the direct facts you spotted versus the inferences you missed — because collecting information is not the same as understanding what it reveals.

Reveal the Trail walks through those missed connections one chain at a time. A public "currently away" post plus a home identifiable from earlier photos means someone now knows your house is empty — and how to find it. That's where the experience stops testing you and starts teaching.

Everything feeds into a Privacy Defence Score, which turns what you missed into three specific actions: hide the start point of your regular route, reduce how easily your date of birth can be inferred, or review who can see your posts by default. And every read carries a "How did we get this?" toggle that opens the scoring graph behind it — a tool that tells you you're exposed should be willing to show its working.

This is OSINT — open-source intelligence — with one stage deliberately removed. OSINT involves gathering public information, then combining it to infer things a person never explicitly revealed. Digital Breadcrumbs teaches that second stage without searching for the first. Nothing is scraped or looked up; the profile is synthetic, built only from the categories you choose to declare. That was a choice, not a shortcut. Scraping someone's real footprint to prove the risk would recreate the attack on live data. Teaching the same method against a synthetic target makes the mechanism visible without exposing a real person.

Recovery Rush — the Responder's district.

An alert lands and a clock starts. Single Account Takeover is an unusual login on one account. Email Compromise Cascade raises the stakes, where a single Gmail breach fans out into four dependent accounts. Every decision costs seconds and changes the blast radius, and you're scored on Priority, Containment, Recovery and Speed alongside accounts lost and accounts exposed. Afterwards you're told what actually happened — which action interrupted the attack path, and which was a wasted move. The hub tracks your weakest incident type and sends you there first.

Community Centre — the Guardian's district.

Four people bring you something that doesn't feel right. Auntie May gets a WhatsApp message from someone claiming to be her son and urgently asking for money. Mr Ravi is told to scan a QR code to process a customer's refund. Sarah's internship offer asks for a $150 registration fee and her bank details before the interview. Daniel gets a Discord link promising free skins if he logs in through their site.

A grandmother, a shop owner, a student and a kid — because scams aren't one demographic's problem.

You read the conversation, then choose what to tell them. The distractors are where the teaching happens: telling Auntie May to reply with personal questions sounds cautious, but keeps her inside the channel the attacker controls. The safer move is to call her son's known number independently. Her brief also says she dislikes technical language and just wants to know what to do, so technically correct advice that someone cannot use does not count as correct. Every case contributes to Community Resilience and can be replayed.

Running across all three districts is Training Simulation, which generates phishing messages matched to your current accuracy and challenges you to separate genuine red flags from convincing but harmless ones. Scam or Legit turns that into a daily reflex: six messages, five seconds each, with a streak to keep alive. Clear all four and Guardian Mode unlocks: a two-person scenario played on one device, with an explicit handoff between turns. It's the only part of CyberCity that needs someone sitting next to you, which is fitting for the district about protecting other people.

Progress carries back into the city through nine Guardian Badges and XP levels that unlock skyline landmarks — the Signal Tower at Level 2 and Guardian Spire at Level 5.

Complete Find Alex, a privacy scan and a Recovery Rush scenario, and your Defence Plan unlocks: everything the three districts found, consolidated into one personalised list of what to actually fix. Complete all three districts and the Final Challenge opens — a three-stage capstone that runs all three mechanics as cause and effect. You investigate a footprint and deduce a reused password; that password is the one the attacker uses in the incident you then have to contain; and in the last stage you sit down and explain it to the person it happened to. Three stage scores average into one certification tier.

How I built it

React and Vite on the front, with progress living in the browser's own storage. A deterministic engine does all the deciding; Claude is called in three places and never gets a vote on the result. The Express backend is optional — the whole game plays without it — and does three jobs: it holds the Anthropic key somewhere the browser can't reach, and its SQLite database backs a six-character share code for moving a save between devices plus an opt-in resilience comparison.

React (browser)
     │
     ├────────► SCENARIO ENGINE ──► localStorage
     │          deterministic       state, scores,
     │                              progression
     │
     └────────► lib/ai.js ──► Express ──► Claude API
                the one         │  key lives here,     │
                choke point     │  never in the        │
                                │  browser             ▼
                                ▼              generated text
                             SQLite                    │
                        share-code sync,               ▼
                        opt-in comparison  rendered to you — or a
                                           labelled fallback, tagged
                                           so you can tell which

The engine decides	Claude writes
Scenario state and timers	The phishing message in each Training Simulation, and its red-flag key
Blast radius — which accounts fall when a path is left open	One sentence per Privacy Mirror risk, explaining why the chain the engine built is inferable
The four scores: Priority, Containment, Recovery, Speed	The incident debrief explaining why your sequence worked or didn't
XP, levels, district resilience, badges, unlocks
Every right and wrong answer, and every Privacy Mirror inference chain

When the key is actually used. Three moments, all server-side — and Claude sits in a different place in each:

TRAINING SIMULATION
  your running accuracy
    -> engine picks the difficulty tier
    -> CLAUDE writes the message + answer key
    -> you pick the flags
    -> engine scores it

PRIVACY MIRROR
  the categories you tick
    -> CLAUDE writes the inference chains
    -> engine computes your exposure + score

RECOVERY RUSH
  your decisions
    -> engine scores the run
    -> CLAUDE writes the debrief

Claude never sits at the end of a scoring arrow, and it never receives anything it went and found — Privacy Mirror sends only the categories you ticked. In Recovery Rush, you can see that separation: while the debrief reads “Analyzing your response…”, the engine’s verdict is already on screen.

Nothing else reaches the API. Scoring, XP, levels, unlocks and skyline rendering all run from stored state and engine rules.

Claude never determines a score or outcome. It generates material and explains results; the engine decides what happened. In a security tool, letting AI grade its own scenarios risks turning a confident mistake into incorrect guidance.

The Digital Breadcrumbs persona is deterministic for the same reason: each post must map to a fixed exposure category, or the answer key — and the score — would stop meaning anything.

The skyline also renders directly from stored state, so the picture and the data can never disagree.

Challenges I ran into

One of the biggest challenges was designing for API failure without breaking the learning experience. As several features rely on Claude, a failed or delayed call could not simply leave the user with an error screen. Every AI feature needed a fallback that still taught something useful, while being transparent that the response was not AI-generated.

This led to an important product decision:

Failure states should preserve the learning experience, not just keep the interface running.

The engine therefore keeps the core experience independent of the API. Scoring, progression and outcomes still work from deterministic rules, while fallback content allows the user to continue. Claude enhances the experience, but the product never depends on it to remain functional or educational.

Accomplishments that I'm proud of

This was my first solo hackathon, which meant every part of CyberCity — frontend, backend, interaction design and scenario writing — was mine to build and connect.

The interface is what I'm proudest of. I wanted CyberCity to feel like a place, not a form: layered skylines, neon towers, ambient traffic and a moon that shifts from grey to gold as the city recovers. Security tools often feel clinical; I wanted something people would actually want to explore.

More importantly, the city isn't just decoration — it's drawn from the data. Lit windows, district resilience and even the shift from CITY UNDER ATTACK to CYBERCITY PROTECTED are generated from the user's actual state. Making the visual world respond to progress turns it from a quiz with a nice background into a game about security.

I'm also proud that the AI is provable rather than decorative. Run the same Training Simulation twice and Claude produces different message text, sender domains and red-flag keys. Those outputs sit side by side in the gallery because “we used AI” is a claim; different generated outputs are evidence.

What I learnt

Making something predictable on purpose can be the more sophisticated choice. Being able to explain why a feature doesn't use AI is sometimes more valuable than adding one more feature that does.

I also learned how much meaning exists in visual language before context even enters the picture. A shape's silhouette alone can imply an interaction — no amount of styling could stop those triangles from reading as buttons. Good atmosphere still has to respect usability.

What's next for Cyber City

Deployment comes first. CyberCity currently runs locally and requires your own API key, which means the AI features I'm most confident in are also the hardest for someone else to experience.

Next are the three remaining Recovery Rush scenarios — Lost Phone, SIM Swap and Ransomware Response — alongside more Community Centre cases. The four scam types covered now are a real spread, but still a small fraction of what people actually get hit with.

Longer term is the version I originally imagined: with permission, CyberCity could read your real connected apps and recovery relationships, turning the map on screen into your actual dependency graph rather than one you described to it.

That was the original idea. The city was how I made it visible.