TraceTag

An offline, zero-PII educational simulator that visualizes your digital footprint and proves how targeted protections work without promising impossible 100% immunity.

Comment

Inspiration

Every click you make leaves a trace you never see. Passwords reused across sites. Location data sold to brokers. Public Wi-Fi intercepting your traffic. We wanted to turn this invisible problem — digital surveillance, data exploitation, privacy erosion — into something visible, intuitive, and actionable for every age group.

Most privacy tools fail at communication. They're either too technical (VPN settings, cookie managers, encryption protocols) or too passive ("your data is being collected" warnings that users ignore). We asked: what if you could live a day online and watch your footprint grow in real time, then take it back? What if privacy education felt less like a lecture and more like a game of "catch the tracker"?

Built for The Blueprint Hackathon, which challenges builders to create for all ages with mission-driven impact. TraceTag answers that call by making the invisible visible — for a teenager learning about digital footprints, a parent protecting their family, or a professional understanding corporate data collection.

What it does

TraceTag is an educational simulator that lets anyone "live a day online" and see which personal data they expose and who collects it. Users toggle everyday actions — opening social media, buying online, joining café Wi-Fi, subscribing to newsletters, traveling abroad — and watch a live radar of 13 data types and 7 collector categories grow in real time.

Then they apply protection measures and watch their privacy score climb from fully exposed (score ~0) to protected (score ~88). The key insight: protection is never absolute. Even with all measures enabled, the score caps at ~88 because a residual 12% of risk always remains. This honest model teaches that privacy is a spectrum, not a switch.

Core features:

  • Live SVG radar with three node states: hidden (no exposure), exposed (red/coral), mitigated (amber/yellow)
  • 13 data types tracked: passwords, payment data, location, profile, IP, address, traffic, phone, device ID, contacts, email, interests, name
  • 7 collector categories visualized: ad networks, trackers, data brokers, ISPs, Wi-Fi snoopers, merchants, carriers
  • 5 protection measures mapped to real-world products (text-only references): VPN tunnel, password manager, data broker removal, private roaming/eSIM, identity-theft insurance
  • Privacy score computed by a pure, deterministic function — no magic, no black boxes
  • Full RU/EN localization with instant switching
  • WCAG AA accessibility: keyboard navigation, aria-live on score, prefers-reduced-motion support

Privacy by design: nothing leaves the browser. No backend, no analytics, no cookies, no tracking. The entire simulation runs client-side.

How we built it

Stack: React + Vite + TypeScript + Tailwind CSS + Vitest

Architecture:

  • Pure logic layer: evaluate() function in logic/evaluate.ts — commutative, idempotent, no side effects. Takes active action IDs and measure IDs, returns score + node states in a single pass. No parallel counters, no race conditions.
  • Immutable data catalog: data/catalog.ts — 13 data types with weights (sum = 88), 7 collectors, 5 actions, 5 measures. All Object.freeze() to prevent tampering.
  • Hand-computed SVG radar: no heavy graph libraries. Nodes positioned radially, edges drawn from data types to collectors. Three states rendered via CSS classes.
  • Animated score meter: requestAnimationFrame-driven counter, 600ms easing, aria-live="polite" for screen readers.
  • Zero external dependencies at runtime: no API calls, no third-party scripts, no analytics.

Security & privacy:

  • Strict Content-Security-Policy: default-src 'self', frame-ancestors 'none'
  • No eval, Function, or innerHTML with dynamic content
  • All sponsor references are text-only (no logos, no API integrations)
  • localStorage stores only a non-identifying "demo completed" flag and last score — no PII, no user IDs
  • npm audit: 0 vulnerabilities

Testing: 25/25 Vitest unit tests covering invariants (commutativity, idempotency, monotonicity, boundary conditions, edge cases). Green build, 0 lint errors, 59 KB gzip production bundle.

Sponsor alignment: Five sponsor products (NordVPN, NordPass, Incogni, Saily, Coveron) are referenced as text-only illustrative examples of protection categories. This demonstrates deep alignment with sponsor missions without trademark infringement or data sharing.

Challenges we ran into

1. Designing an honest scoring model. We refused a fake "100% protected" result. Instead, we introduced a residual factor (RESIDUAL = 0.12) so even a fully mitigated footprint scores ~88, because protection is never absolute. This required rethinking the entire visual language: nodes don't turn green, they turn amber — "protected, not perfect." The math: score = 100 × (1 - uncovered_weight / MAXW), where uncovered_weight = Σ(weight × (covered ? RESIDUAL : 1)).

2. Keeping the visual graph and numeric score in sync. Early prototypes had parallel counters for score and node states, leading to desync bugs. We eliminated this entire class of errors by computing both from a single pass over the data catalog. One function, one source of truth.

3. Avoiding the "centered hero trio" trap. Most privacy apps open with a centered headline + subtitle + CTA button. We built an asymmetric first frame: manifesto on the left (large serif display type), live radar on the right (cursor-reactive from the first second). This immediately communicates "this is alive, not static."

4. Balancing simplicity and depth. The challenge: make it intuitive for a 13-year-old but technically credible for a judge from Microsoft or Meta. Solution: simple interactions (click actions, toggle measures) backed by a rigorous, testable model. The surface is playful; the engine is serious.

Accomplishments that we're proud of

  • A reproducible, test-backed model: 25/25 Vitest tests, 0 npm vulnerabilities, deterministic scoring function
  • A living radar interface: three node states, smooth CSS transitions, cursor-reactive from load
  • Full RU/EN localization: instant switching without reload, <html lang> sync
  • WCAG AA accessibility: semantic <button> elements, aria-pressed on toggles, aria-live="polite" on score, visible focus rings, full keyboard navigation, prefers-reduced-motion support
  • A clean 59 KB production build with zero external dependencies at runtime
  • An honest privacy model that teaches, not promises — the residual factor is a pedagogical choice, not a technical limitation
  • Sponsor alignment without compromise: text-only references, no logos, no data sharing, no API integrations

What we learned

Privacy education works best when it's interactive, not declarative. Showing someone "your data is being collected" is less effective than letting them see it happen and undo it. The act of toggling a measure and watching a node turn from red to amber creates a stronger mental model than any warning banner.

Constraints breed creativity. The "no backend" rule forced us to design a scoring function so clean it could be tested in isolation, which in turn made the entire project more robust. The "no logos" rule pushed us to think about sponsor alignment as conceptual fit, not visual branding.

Honesty builds trust. By refusing to show "100% protected," we risked confusing users. Instead, we got a more nuanced conversation: "Why is it 88 and not 100?" That question is the teaching moment.

What's next for TraceTag

  • Classroom mode for teachers: pre-built scenarios (e.g., "a day in the life of a social media user"), student progress tracking (still client-side, no PII)
  • Deeper collector taxonomy: regional data brokers, device fingerprinting techniques, cross-site tracking mechanisms
  • Region-specific data-protection guidance: GDPR (EU), CCPA (California), LGPD (Brazil) — mapped to protection measures
  • Scenario library: "What if you're a journalist?" "What if you're traveling?" "What if you're a small business owner?"
  • Always client-side, always privacy by design. The product teaches privacy; it must embody it.

Disclaimer: TraceTag is an educational simulation. Not legal, financial, or medical advice. Mentioning a product does not guarantee protection. All sponsor names are used as illustrative examples of protection categories; no trademark infringement is intended.

Built for The Blueprint Hackathon · Privacy by design · Budget $0

Built With

Share this project:

Updates