Gian
Canevari

Every streaming tracker I tried surfaced the same trending content regardless of what I actually watched. ShowFreak fixes that with a recommendation engine that weights genres from your rated content (5★=3pts, 4★=2pts, 3★=1pt) — the more you rate, the more accurate it gets.

The key architectural decision was local content caching: all TMDB metadata is stored in a local content_cache table on first fetch, so library queries and sorting never hit the external API. This eliminated the N+1 problem at the API boundary and made the library fast regardless of TMDB's response time.

JWT auth uses refresh token rotation — every token refresh issues a new refresh token and invalidates the old one, so a stolen token becomes useless after one use. The full test suite covers 81 backend integration tests and 25 frontend unit tests, giving me confidence to refactor without regressions.

I built ShowFreak using AI-assisted development throughout — starting with Kilo Code for architecture and scaffolding, then switching to Claude Code for debugging, refactoring, and feature delivery. This workflow cut implementation time significantly and is now how I approach every project.

Stack: React 18 + TypeScript · Node.js 20 + Express · PostgreSQL 16 + Prisma · TanStack Query · Vitest · Vercel + Render + Neon

I built Frello to understand how Trello actually works under the hood — not just the UI, but the data model and API that makes complex board state consistent across sessions.

The most interesting engineering challenge was guest mode. I wanted users to try the app without signing up, but losing your boards on registration would kill conversion. The solution: boards created in guest mode persist in localStorage; on account creation, the app migrates the entire board structure to the server without any visible interruption.

The REST API covers boards, lists, cards, labels, comments, priorities, due dates, and reusable templates — 15 routes total, validated with Joi. Drag-and-drop works across all entity levels: you can reorder boards, reorder lists within a board, and move cards between lists. Express 5 on the backend with Sequelize 6 ORM and PostgreSQL.

Stack: React 19 · React Router 7 · Node.js + Express 5 · PostgreSQL + Sequelize 6 · JWT Auth · Vite · Vercel + Render

This started as a curiosity about the Web Audio API and became a study in browser timing constraints and performance engineering.

The first problem: rapid repeated hits on the same pad cut off the previous sound. A single HTMLAudioElement per pad can only play one instance at a time. I pre-created a pool of 3 HTMLAudioElements per key at mount, cycling round-robin so rapid inputs overlap correctly without artifacts.

The second problem: a naïve setTimeout-based metronome drifts badly under JavaScript's single-threaded event loop. I implemented a look-ahead scheduler — the same technique used by Tone.js — that schedules Web Audio API events 25ms ahead of playback time, decoupling the scheduler from the main thread and eliminating audible drift at any BPM.

Recording captures millisecond-accurate timestamps; replay drives a setTimeout chain with a ref-based abort flag so playback can be cancelled mid-sequence. All five custom hooks (useAudioPool, useRecording, useRecordingHistory, usePlayback, useMetronome) are independently unit-tested. Full keyboard accessibility with ARIA labels and prefers-reduced-motion support.

Stack: React 19 · TypeScript · Vite · Web Audio API · Vitest + Testing Library · GitHub Pages

I built this portfolio to the same standard I'd apply to a client project — not as a static site, but as a production Next.js application.

The architecture uses React Server Components throughout: the GitHub API fetch runs server-side with a 1-hour ISR revalidation cycle, so the project list updates automatically without a redeploy. A static fallback fires if the API is unavailable, making the site resilient to GitHub outages. The resume is hosted on Vercel Blob (never committed to the repo) and served via an environment variable.

The design system is Tailwind CSS v4 with a custom @theme inline block and shadcn/ui zinc dark tokens. Geist Sans is loaded via the geist npm package as a Next.js font variable. Animations use CSS @keyframes registered as Tailwind tokens — no animation library added.

The test suite covers 14 unit tests (Vitest + Testing Library) and a Playwright E2E suite. GitHub Actions runs typecheck, lint, and the unit suite on every push. JSON-LD structured data, a generated /sitemap.xml, and Open Graph tags handle SEO.

Stack: Next.js 15 · React Server Components · TypeScript · Tailwind CSS v4 · shadcn/ui · Vitest · Playwright · GitHub Actions · Vercel