Banner Dev Showcase

Premium Developer Portfolio

Engineering
to explore.

A technical showcase where each implementation demonstrates a real software engineering skill. Architecture, performance, security, PWAs, Browser APIs, 3D rendering, and more, brought together in interactive experiences.

10 live

16 total demos

6 coming soon

Meet the Developer

Banner Dev Showcase

Scroll to explore

FEATURED SHOWCASES

Our Showcases

A selection of demos that explore APIs, architecture, and best practices.

PWA & Smart Cache

PWA & Smart Cache

Native installation, multi-strategy caching per resource type, and real connectivity detection: the pillars that hold up a good PWA.

PWAService WorkerCache StrategiesSerwistInstallableOffline Available

Authentication

Authentication

Interactive demo of the main modern authentication mechanisms: JWT with Refresh Token, OAuth 2.0, two-factor authentication (TOTP), passwordless login through a Magic Link, and biometrics with WebAuthn/Passkeys.

JWTRefresh TokenOAuth 2.02FATOTPMagic LinkWebAuthnPasskeysFIDO2NextAuthHttpOnly CookieCSRFSecurity

3D & Advanced Animations

3D & Advanced Animations

Interactive real-time 3D rendering demo: an orbitable scene with PBR materials, a full solar system with a camera that chases the focused planet, an 8,000-particle galaxy with a hand-written GLSL shader, and a scroll-driven journey through the author's own tech stack.

Three.jsReact-Three-FiberWEBGL3DShaderGLSLScrollAnimation

EXPLORE ALL DEMOS

Explore All Demos

Filter by category to find what interests you

PWA & Smart Cache

Native installation, multi-strategy caching per resource type, and real connectivity detection: the pillars that hold up a good PWA.

PWAService WorkerCache StrategiesSerwistInstallableOffline Available

Authentication

Interactive demo of the main modern authentication mechanisms: JWT with Refresh Token, OAuth 2.0, two-factor authentication (TOTP), passwordless login through a Magic Link, and biometrics with WebAuthn/Passkeys.

JWTRefresh TokenOAuth 2.02FATOTPMagic LinkWebAuthnPasskeysFIDO2NextAuthHttpOnly CookieCSRFSecurity

3D & Advanced Animations

Interactive real-time 3D rendering demo: an orbitable scene with PBR materials, a full solar system with a camera that chases the focused planet, an 8,000-particle galaxy with a hand-written GLSL shader, and a scroll-driven journey through the author's own tech stack.

Three.jsReact-Three-FiberWEBGL3DShaderGLSLScrollAnimation

Camera, Screen & Audio APIs

Camera, screen recording, and audio recording straight from the browser — capture, encoding, and a custom player, no plugins and no upload.

CameraScreenAudioRecordingBlobCodec Negotiation

Notifications API

The push-type Notifications API is native to the operating system, delivered even with the app closed — Service Worker + VAPID end to end.

Push APINotifications APIService WorkerVAPIDWeb Push Protocol

Voice Interface

Real-time voice dictation and text-to-speech playback, straight from the browser — no external API involved. We use your device's native APIs.

Speech RecognitionText-to-SpeechSpeech SynthesisAccessibilityVoice

Accessibility / AI

Offline Data + Sync

100% offline data persistence with automatic sync on reconnect — including real SQL running on WebAssembly inside a Web Worker.

OPFSIndexedDBwa-sqliteWebAssemblyWeb WorkersSyncStorage API

Native Browser Integrations

Web Share, Clipboard, Screen Wake Lock, and Fullscreen: four native browser APIs that bring a web app closer to an installed-app experience, with zero external dependencies.

Web Share APIClipboard APIScreen Wake LockFullscreen API

Device & Hardware Sensors

Network Information, Battery Status, and the Vibration API: three Web APIs that read the device's real state — connection, battery, and haptic feedback — to adapt the experience in real time.

Network Information APIBattery Status APIVibration API

Dashboards

Observability dashboard inspired by tools like Grafana, simulating the real-time health of a distributed application through metrics, events, interactive charts, and incident scenarios.

ObservabilityMonitoringDashboardGrafana/SignozDevOpsSREPerformanceShadcnRechartsReact Query

Real-time & Communication

Real-time chat, a live event feed, and in-app notifications over WebSocket and Server-Sent Events.

RealtimeChatNotificationsWebSocketServer-Sent EventsAblyPusher

Micro-frontend Architecture

A living diagram of this project's Feature-Sliced Design, plus a Module Federation demo showing two independent micro-apps side by side.

ArchitectureMicro-frontendsModule FederationFeature-Sliced Design

React Query Mastery

Server-side pagination, infinite scroll, async cache, optimized refreshes, polling, and SSR — the advanced patterns of TanStack Query.

React QueryTanStack QueryCacheSSRInfinite ScrollUI Optimization

Performance Showcase

Measurable optimizations: list virtualization, code splitting, memoization, and Web Workers, with live metrics.

PerformanceVirtualizationCode SplittingWeb WorkersCore Web Vitals

Forms & Fields

Multi-step forms, drag and drop, advanced upload, text editor, field masks, custom fields, componentization.

FormsReact Hook FormZodDrag and DropText EditorMasks

GraphQL

Integration with a public GraphQL API demonstrating queries, mutations, fragments, and normalized caching.

GraphQLApollo ClientNormalized CacheREST vs GraphQL