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.

9 live

16 total demos

7 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

Dashboards are the heart of any good CRM, SaaS, or management application. In this demo you'll find different types of visualizations for each persona in your company.

CRMSaaSDashboardPerformanceRechartsD3.jsReact QueryTanStack TableFramer Motion

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