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