Fenrir Security: B2B SaaS Security Dashboard UI
React | Next.js | TypeScript | Tailwind CSS | Dark Mode | Mock Data
MY Role and summary
Built a B2B SaaS security dashboard as part of a 24-hour frontend design challenge. Translated a three-screen design reference — Login, Scan Dashboard, and Active Scan Detail into a fully navigable React application with complete dark and light mode parity, realistic mock data, and end-to-end screen transitions. Every interactive element was wired: tabs, filters, search, scan row navigation, toast actions, and a globally applied theme toggle.
Delivery Highlights
- Three-Screen Implementation from Design Reference: Recreated Login (split-layout with social auth), Scan Dashboard (sidebar, severity counters, status-chip table), and Active Scan Detail (live console, step tracker, finding log) with high visual accuracy across both themes.
- Global Theme System: Implemented a teal-accented design system using semantic color tokens - near-black surfaces for dark mode, light-gray for light - ensuring both themes feel native rather than inverted, with instant toggle applied across all screens.
- Wired Interactivity Throughout: All UI elements function: search filters the scan table, tabs switch console content between Activity Log and Verification Loops, and action buttons (New Scan, Export Report, Stop Scan) respond with toasts or modal state changes rather than sitting decorative.
- Reusable Component Library: Built standalone severity badges (Critical, High, Medium, Low), status chips (Completed, Scheduled, Failed), and button variants as isolated primitives consumed consistently across all three screens.
UX and Responsiveness Focus
- Collapsible Sidebar on Mobile: The seven-item sidebar (Dashboard, Projects, Scans, Schedule, Notifications, Settings, Support) collapses into a hamburger-accessible menu on 375px viewports, keeping the full nav accessible without occupying screen real estate.
- Scan Table Scroll Behavior: The vulnerability table with severity-colored badges and status chips horizontally scrolls on small screens rather than collapsing columns, preserving data density for the B2B use case.
- Information Hierarchy in Scan Detail: The Active Scan Detail screen stacks the circular progress indicator, step tracker, metadata row, live console, and finding log in a hierarchy designed for fast scanning - most critical state (progress, active step) visible without scrolling.
TECHNICAL IMPACT
This project was scoped, built, and deployed within a strict 24-hour window - covering pixel-accurate screen recreation, full theme implementation, mock data architecture, and a live Vercel deployment. Working from a design reference without engineering specs required independent judgment on component boundaries, routing logic, and state shape. The result demonstrates the ability to move from a design file to a shippable, interactive product under deadline pressure - a core skill for fast-moving product teams.