Banner Dev Showcase

Premium Developer Portfolio

Engineering
to explore.

A place where I keep, test and show what I've been studying and applying as a full stack developer. Every demo is a real, working implementation — authentication, PWA, browser APIs, offline data, 3D and more — that you can open, try out and check the code for.

11 live

16 total demos

5 coming soon

Banner Dev Showcase

Scroll to explore

FEATURED SHOWCASES

Where to start

A selection of the demos that best show how I think about architecture, browser APIs 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 and open whatever catches your interest.

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

Group chat in temporary rooms, with its own login and messages arriving in real time.

RealtimeChatWebSocketServer-Sent EventsJavaSpring BootRedisJWT

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