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

Most AI chat tools depend on hosted APIs. This project runs chat, persistence, and inference entirely on localhost with a one-command dev stack.

• TanStack Start chat UI with session sidebar, SSE streaming, and optimistic messages
• Three-column layout with mobile drawers and react-virtual for long transcripts
• OpenAPI codegen into shared TypeScript contracts
• Roleplay template management route with CRUD forms

• FastAPI layered routes, services, repositories, and Alembic migrations
• PostgreSQL + pgvector for chat and embedding metadata; MinIO for image binaries
• Ollama client with model allowlist and optional CrewAI orchestration backends
• Docker Compose stack: Ollama, PostgreSQL, MinIO, API, and model pull jobs

• Docker Compose brings up the full backend stack with one `bun run local:start` command
• Shared `@local/shared` package keeps frontend and backend request shapes aligned
• SSE streaming with optimistic UI instead of waiting for full completion responses

• SSE client parsing with optimistic pending/streaming/failed message states
• Orchestration trace storage separate from user-visible chat messages
• Local-only security tradeoffs documented (no auth in default configuration)

• 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

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