Full-stack and browser-native case studies

Caregivers need a fast phone-first way to log feeds, diapers, sleep, and health events—and share that timeline with partners without losing data when connectivity drops.

• React 19 SPA with TanStack Router and 20+ file-based routes
• IndexedDB offline outbox with sync-on-reconnect and client ID remapping
• HttpOnly cookie auth client with CSRF headers and silent refresh
• PWA install manifest, shortcuts, and service worker reminders
• English/Hebrew i18n with RTL and voice log via Web Speech API

• FastAPI REST API with 25+ v1 route modules and OpenAPI docs
• MongoDB repository layer with JWT cookie auth and owner/caregiver/viewer RBAC
• Web Push reminders (VAPID) with secured external cron job endpoint
• Production on AWS Lightsail: Docker Compose stack with Caddy reverse proxy/TLS, backend API, and Redis
• Observability on the VPS: Prometheus, Loki/Promtail, Grafana, Node Exporter, and cAdvisor
• GitHub Actions CI: pytest (70% coverage gate), Vitest, and Playwright E2E

• HttpOnly cookie sessions instead of localStorage JWT storage
• IndexedDB offline outbox for mutation queueing and ID remap after sync
• Cloudflare Pages frontend with API on AWS Lightsail behind Caddy (ports 80/443 only)
• External HTTP cron for reminder push dispatch in production

• Offline-first mutation queue with ordered flush and temporary ID remapping
• Cross-origin cookie auth between Cloudflare Pages frontend and Lightsail-hosted API
• Multi-caregiver invite flows with viewer read-only enforcement

• Live app
• GitHub
• Documentation

Running image models locally means juggling checkpoints, Python environments, GPU diagnostics, and a usable UI. This project wraps that into one coordinated app.

• React dashboard for generation, gallery, runtime diagnostics, and image-to-image editor
• Canvas-based crop/color preprocessing plus server-side Pillow tool endpoints
• Typed API client for JSON and multipart flows with Vitest component coverage

• FastAPI routes with subprocess `diffusers` runner in a dedicated model venv
• Generation lock and CUDA OOM retry with smaller preset sizes
• Optional API key, CORS origin checks, and upload validation for local-but-exposed use
• Filesystem output storage under `outputs/generated`

• Isolate GPU inference in a subprocess/venv so the API stays fast and testable
• Allowlisted model IDs instead of arbitrary filesystem paths from the client
• Split instant browser edits from heavier Pillow tools before image-to-image runs

• Orchestrating reliable local GPU pipelines across two Python environments and a web UI
• Canvas mask retouch workflow with backend blur/median fill
• Keeping frontend types aligned with Pydantic schemas across JSON and multipart routes

• GitHub

Generic BLE LED strips often ship with closed or mobile-only vendor apps. This utility talks to compatible strips from Chromium on HTTPS with runtime protocol tuning.

• Petite-Vue reactive UI with iro.js color wheel and responsive glassmorphism layout
• Web Bluetooth pairing, GATT discovery, throttled writes, and serialized command chain
• Pluggable protocol profiles, channel order, and debug panel with storage CRUD
• Accessibility hooks: aria-live, aria-label, labeled inputs

• No backend — GitHub Actions CI with zero npm install static tests
• GitHub Pages deploy publishes `src/` directly with no build step

• Single HTML file with no build step for trivial static hosting and direct device control
• Throttled and serialized BLE writes to avoid overlapping GATT operations

• Web Bluetooth requires HTTPS, user gesture, and Chromium — with clear unsupported-context warnings
• Protocol fragmentation across command families, channel orders, and write modes
• Characteristic discovery across many known service/characteristic pairs

• Live app
• GitHub

Polymarket’s product surface is complex (category navigation, live odds, charts, sports, mobile chrome), and building a faithful read-only experience requires careful separation of static event data from high-frequency price updates without melting the React tree.

• Built 7 App Router pages: /, /crypto, /sports, /sports/live, /politics, /event/[slug], /api-docs
• Implemented Polymarket-faithful app chrome: TopBar, CategoryNav, Footer, MobileBottomNav, search toolbar
• Split state: Jotai for filters/bookmarks/theme/live prices; TanStack React Query for events and chart history
• Rendered BinaryCard, MultiOutcomeCard, SportsMatchCard, featured carousel, and category page layouts
• Built event detail with Recharts PriceChart, timeframe toggles, related news, share/embed, visual OrderTicket
• Wired live prices via shared livePriceEngineManager with leaf-only subscriptions and reduced-motion support
• Styled with Tailwind CSS v4 semantic tokens, dark mode, and Motion for modal transitions
• Added debounced client search, localStorage bookmarks, and URL-synced category navigation

• Implemented 7 Next.js BFF routes proxying Gamma, CLOB, Data API, sports live, and related news
• Normalized all upstream responses with Zod schemas; thin route handlers delegate to lib/api modules
• Added server-side caching with optional Redis (REDIS_URL) and in-memory fallback
• Built GDELT news fetch with OkSurf fallback and 5-minute server cache
• Published OpenAPI 3.0 spec at /api/openapi with Swagger UI at /api-docs
• Configured Next.js image remotePatterns for Polymarket CDN assets
• Deployed on Vercel (bun install --frozen-lockfile, bun run build); no CI workflow in repo
• Env vars: REDIS_URL (optional), NEXT_PUBLIC_LIVE_PRICE_MODE (auto | websocket | simulation)

• React Query for structural event data, Jotai atom families for live prices — prevents tick-driven query invalidation
• BFF API routes instead of direct browser calls — centralizes validation, caching, and upstream shape handling
• Polymarket activity WebSocket with 2s simulation fallback in auto mode — UX without full CLOB order book
• Per-outcome outcomePriceAtomFamily with RAF coalescing — minimizes re-render scope on price ticks
• Recharts fed by CLOB history with generateChartData simulated fallback when upstream is sparse
• IndexedDB persistence for React Query via @tanstack/react-query-persist-client and idb-keyval

• High-frequency price updates without grid re-renders — Jotai leaf subscriptions, React.memo, documented profiler targets
• WebSocket reliability — reconnect, ping, subscription index by event_slug, simulation engine fallback
• Sports live complexity — separate sportsWebSocketEngine, game state atoms, league aggregation (phase in progress)
• CLOB chart sparsity — merge logic plus simulated series; latest point synced to live atoms
• Chrome fidelity vs. scope — many nav/footer links are visual-only placeholders

• Live app
• GitHub
• Documentation

A touch-friendly water-sort game needs precise move rules, responsive liquid animations, and reliable progress even without connectivity. Connected competition also needs server-verified results and synchronized multiplayer state.

• Deterministic pouring, undo, hints, fog-of-war, and win rules on a TanStack Store game model
• Responsive SVG/CSS liquid animations with staged tilt, stream, fill, settle, and celebration effects
• Local-first campaign progression with unlock rules, personal bests, resume state, and authenticated cloud merging
• Typed REST client with Zod runtime validation, bearer authentication, token refresh, and WebSocket match state
• Installable PWA with offline notices, reduced-motion interactions, Web Audio cues, haptic fallbacks, and Capacitor native-shell support

• Versioned FastAPI APIs for progress, daily challenges, leaderboards, profiles, social features, clubs, custom puzzles, and competitions
• Server-authoritative puzzle and move-replay validation for campaign results and competitive matches
• Redis-backed WebSocket rooms with reconnect tickets, presence, distributed locks, ordered commands, and duplicate-command protection
• MongoDB repositories and indexes for identity, progression, ratings, match history, seasons, and shared content
• Passwordless email, Google, and Apple authentication with signed access tokens and rotating opaque refresh tokens
• Implemented Redis Stream consumers for match settlement and progression, plus season rollover; checked-in deployment configuration does not launch these workers

• Keep campaign gameplay functional offline through a local catalog and locally persisted progression
• Separate deterministic game mechanics from animated presentation, committing pours after animation completion
• Use TanStack Start in static SPA mode for PWA delivery and Capacitor native-shell integration
• Validate external data with Zod and verify competitive move sequences on the server
• Use MongoDB for durable records and Redis for realtime coordination, locks, caching, and event streams

• Synchronizing liquid geometry, animation phases, input, audio, and authoritative move commits
• Keeping the mobile board stable as browser chrome changes the visible viewport
• Reconciling local and remote progression across level IDs, slugs, and independent move/time personal bests
• Maintaining ordered, idempotent multiplayer commands across reconnects and coordinating MongoDB records with Redis Stream processing

• Live app
• GitHub

I needed a portfolio for presenting data analysis work and project visualizations without running a CMS or database. Content stays in validated JSON, deploys as a static SPA, and only uses backend code where a server-side secret is required.

• React 19 + TypeScript + Vite SPA with lazy-loaded routes
• Theme UI design system with light/dark mode
• Searchable and filterable project grid
• Project detail pages with case-study structure and plot carousel
• Static content pipeline using JSON, Zod schemas, and Vite asset resolution
• Contact page with React Hook Form, Getform submission, clipboard copy, and resume download
• SEO metadata with react-helmet-async, sitemap, robots, and Vercel Speed Insights
• Accessibility details including skip link, reduced-motion styles, and ARIA feedback states

• Minimal Vercel serverless handler for GET /api/geo-block
• Abstract API IP geolocation used server-side so the API key stays private
• Vercel routing that sends /api/* to the serverless handler and the rest to the static frontend
• Client-side Getform submission for contact messages

• Used JSON + Zod instead of a CMS/database to keep content git-reviewable and statically deployable
• Kept backend scope intentionally minimal — only serverless code where secrets must remain server-side
• Used Zustand as a lightweight access layer over validated static content
• Lazy-loaded routes and heavier UI pieces to keep the SPA structure cleaner
• Used Vercel to deploy a static frontend and one serverless route from the same repo

• Keeping content integrity without a CMS
• Resolving local asset references into Vite build output
• Coordinating static frontend routing with a minimal serverless backend
• Keeping Theme UI and React Bootstrap components visually consistent
• Making geo-blocking fail open so the site still renders when the external API is unavailable

• Live app
• GitHub