MultyLeak
MultyLeak is a cybersecurity tool that helps users discover whether their personal data has been compromised in known data breaches. Built with Next.js 16 and React 19, it queries the Have I Been Pwned API to check emails against a database of billions of breached records. The app features severity classification, paste dump detection, real-time breach statistics, and a comprehensive info page covering threats, privacy, and protection strategies. A custom canvas-based interactive grid background and GSAP-powered animations give it a polished, hacker-aesthetic feel. Server-side rate limiting via Upstash Redis ensures responsible API usage.
The Challenge
Build a polished, privacy-respecting breach checker that queries the HIBP API without storing any user data, while preventing abuse through intelligent rate limiting. The UI needed to communicate security severity clearly and feel responsive despite network-dependent lookups.
The Solution
Created a Next.js application with server-side API routes that proxy HIBP requests with proper authentication and Upstash Redis-backed rate limiting. Implemented a severity classification system that grades breaches by exposed data types. Built a custom canvas grid background that reacts to mouse movement and flashes on scan results. Added a full info section with live breach statistics, threat breakdowns, and actionable protection advice.
Tech Stack
Key Metrics
Details
- Category
- web
- Year
- 2026
- Status
- completed
- Role
- Full-Stack Developer
Key Features
Email Breach Scanner
Check any email against billions of breached records with instant results and severity classification.
Severity Grading
Breaches are classified as LOW, MEDIUM, HIGH, or CRITICAL based on the types of data exposed.
Paste Detection
Detects if an email has appeared in public paste dumps, a common vector for credential leaks.
Interactive Grid Background
Custom canvas-rendered grid that highlights cells on hover and flashes red or green on scan results.
Rate Limiting
Upstash Redis-powered rate limiting per IP to prevent abuse while keeping the service free.
Info & Statistics Page
Comprehensive page with live breach statistics, threat explanations, privacy guidance, and protection tips.
Project Gallery
Technical Details
Implementation
Built with Next.js 16 App Router and React 19. Server-side API routes proxy requests to the HIBP v3 API with proper authentication. Upstash Redis handles per-IP rate limiting with sliding window counters. The interactive grid background is rendered entirely on HTML5 Canvas with requestAnimationFrame for 60fps performance. GSAP handles all entrance animations and error state transitions. Tailwind CSS 4 with a custom theme provides the dark cybersecurity aesthetic. The info page fetches live breach statistics from the HIBP API and renders them with scroll-triggered reveal animations.
Lessons Learned
This project taught me how to build a security-focused application that respects user privacy while still providing valuable functionality. I learned the intricacies of rate limiting strategies and how to balance user experience with API constraints. The canvas grid background was an exercise in performant real-time rendering, and integrating severity classification helped me think about how to communicate complex security information to non-technical users.
Design Handbook
Color Palette
Typography
Geist Sans
Weight: 400-700Geist Mono
Weight: 400-600Patterns & Textures
Interactive canvas grid with mouse-tracking cell highlights
Animated orb backgrounds with drift and pulse keyframes
Clip-corner geometric shapes on cards and buttons
Red/green full-screen flash feedback on scan results
Design Principles
Privacy first — no user data is stored or logged
Clear severity communication through color-coded badges
Dark cybersecurity aesthetic with purple accent palette
Responsive design with dedicated 2XL breakpoints for large screens
Other Projects
Diploma Uitreiking 2026
The live graduation-ceremony platform for my school, where families enter the code on their invitation to watch the livestream, built in dependency-free PHP with hand-written passkey login and intrusion detection.
Subli Studio
A full-stack custom clothing print shop where customers configure a garment, pick print locations, upload their own design, and pay online, with a complete admin back office behind it.
Yume Ramen
A full-stack restaurant ordering platform for an authentic Japanese ramen restaurant, featuring real-time order tracking and admin dashboard.