tech projects

DeepSafe

Gamified AI Safety: A Progressive Web App that turns cybersecurity education into an engaging RPG adventure. Built with Next.js 16, Supabase, and Tailwind v4.

2 min read
DeepSafe

DeepSafe is a revolutionary Progressive Web App (PWA) designed to democratize AI Safety education through gamification. By borrowing addictive mechanics from apps like Duolingo, we turn the dry task of learning about phishing, deepfakes, and prompt injection into an exciting “Cyber-Guardian” adventure.

The Mission

In an era where AI threats are becoming increasingly sophisticated, traditional cybersecurity training is often boring and ineffective. DeepSafe changes the narrative. Our goal is to make learning engaging, accessible, and rewarding for everyone.

Key Features

🇮🇹 The Campaign: A Journey Through Italy

Forget boring lists of modules. DeepSafe features a non-linear interactive map of Italy with 20 regions and over 100 provinces.

  • Regional Challenges: Unlocking a region like Lombardy might present financial fraud scenarios, while Lazio focuses on government data security.
  • Visual Progression: The map comes alive, with provinces glowing Gold (Mastered) or Cyan (Passed) based on your performance.

🎮 Gamification Core

We implemented a robust game loop to keep users coming back:

  • Lives System: You have 5 hearts. Make a mistake? Lose a heart. It adds stakes to every quiz.
  • Streaks: Daily login streaks build a habit of learning.
  • NeuroCredits (NC): Earn currency by completing missions to spend in the Black Market.

🎨 Cyber-Guardian Aesthetic

The UI is built with a “Glassmorphism” design language, featuring neon accents, dark modes, and smooth framer-motion animations. It feels like a premium sci-fi interface, not a corporate training tool.

🛒 The Black Market & Shop

A fully integrated economy where users can spend their hard-earned NeuroCredits or purchase boosters via Stripe.

Tech Stack: Bleeding Edge

DeepSafe pushes the boundaries of modern web development:

  • Framework: Next.js 16 (Canary) & React 19, utilizing the latest React Server Components and Server Actions.
  • Styling: Tailwind CSS v4 for high-performance styling.
  • Backend: Supabase for Auth, Database, and Realtime subscriptions.
  • Mobile: Capacitor integration allows the app to be installed as a native iOS and Android app.

Community

DeepSafe is more than code; it’s a movement.

Join us and become a Cyber-Guardian today.