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

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