Matteo as a collectible 3D figure, waving

Product builder, code and design

MatteoVanzini

I build digital products from idea to release: mobile apps, backends and admin tools, designed as one system.

Write to me
Matteo's figure turning back into his younger self, made of points of light

Hi, I'm Matteo.

Software engineer from Modena. I write code, but I think in products.

Let me rewind to where it started.

My journey

Keep scrolling, the story moves sideways.

Where it started

IIS Fermo Corni, Modena

Where it started

High school on the computer science track at IIS Fermo Corni. An old PC, the first programs and a lot of curiosity: university was the obvious next step.

Bachelor's in Computer Science

2016-2020

Bachelor's in Computer Science

University of Modena and Reggio Emilia. My thesis was a web app for neuroscience data that generated its own management front end.

Master's, 110 cum laude

2020-2022

Master's, 110 cum laude

Computer Engineering, Data Engineering and Analytics. Thesis on text extraction for multilingual heritages, and the first graduation award in memory of Davide Rabotti.

Research and AI

2021-2023

Research and AI

At FSCIRE on DigitalMaktaba: AI to catalogue multilingual and multi-alphabetic libraries. Three papers, then a year of PhD research before moving to industry.

Designing and building products

2023-today

Designing and building products

Software developer at OTConsulting, on enterprise apps across Java, C#, Python, SQL, Angular and Flutter. After graduating I also fell for design: my own products now start in Figma, long before the first line of code.

What I've built

2026Personal product, end-to-end

Fantapredio

A collectible-card fantasy football game, built around a real five-a-side team.

The problem
Turn a game between friends into a credible product: cards, packs and scores driven by real matches.
What I built
Three pieces, all on one Django API with JWT auth:
  • Flutter
  • Riverpod
  • Django
  • DRF
  • Angular
  • Astro
  • GSAP
Fantapredio on a phone

2026Website, back office and backend

Classified

A project I'm building right now. You'll see it when it's live.

  • Astro
  • Angular
  • Django
  • Docker

Templates

One method, many businesses.

Complete products for real kinds of business, built end to end on purpose: a different sector each time, a different problem, sometimes a different stack. They show how I work, and they are a head start if you run one of these businesses.

  • Cinema template, WebsiteCinema template, BookingCinema template on a phone
    01CinemaWebsite, back office, app, API

    01 · Northlight CinemaDemo brand and data are fictional

    Cinema

    Cinemas and small multiplexes

    Programme, seat maps, payments and tickets, from the website to the door.

    What it shows Seats are held for ten minutes and locked in the database, so two people can never buy the same one. Payments run on Stripe or on a built-in simulator, and QR tickets are checked in at the door.

    What's inside

    1. 01WebsiteProgramme and film pages, static and fast, in Astro.
    2. 02BookingA live seat map with premium rows and wheelchair spaces.
    3. 03Back officeAngular: daily figures, a timeline per screen, refunds and check-in.
    4. 04AppFlutter: what's on, seat booking, payment and QR tickets.
    • Django
    • DRF
    • Astro
    • Angular
    • Flutter
    • Stripe
    SiteCode
  • Clothing store template, WebsiteClothing store template, Product pageClothing store template on a phone
    02Clothing storeWebsite, back office, app, API

    02 · HaldenDemo brand and data are fictional

    Clothing store

    Clothing and accessories shops

    An editorial shop with colours, sizes, stock, orders and returns.

    What it shows Stock is set aside for fifteen minutes at checkout, so nothing is ever sold twice. Cancellations, shipping and 30-day returns with partial refunds, and a back office with sales, best sellers and low stock.

    What's inside

    1. 01WebsiteAn editorial home page and a catalogue with filters.
    2. 02Product pageColours and sizes with live stock, bag and checkout.
    3. 03Back officeAngular: sales, orders to ship, stock and returns.
    4. 04AppFlutter: discover, shop, wishlist, bag and returns.
    • Django
    • DRF
    • Astro
    • Angular
    • Flutter
    • Stripe
    SiteCode
  • Personal finance template, OverviewPersonal finance template, Investments
    03Personal financeDesktop app

    03 · CofferDemo brand and data are fictional

    Personal finance

    Anyone who wants their money in one place, privately

    Accounts, budgets, net worth and investments, encrypted on your own computer.

    What it shows No server and no account: one file encrypted with AES-256-GCM, a key derived with Argon2id, a recovery key and auto-lock. Budgets, net worth over time and a portfolio with average cost, dividends and allocation.

    What's inside

    1. 01OverviewNet worth over time, spending and budgets at a glance.
    2. 02InvestmentsHoldings, gains, dividends and allocation by type and region.
    3. 03BudgetMonthly limits per category against the pace of the month.
    4. 04The vaultMaster password, recovery key, nothing ever written in clear.
    • Python
    • SQLite
    • pywebview
    • SvelteKit
    • ECharts
    Code
  • Wiki template, WebsiteWiki template, Pokémon pageWiki template on a phone
    04WikiWebsite and app

    04 · FieldbookUnofficial, data from PokéAPI

    Wiki

    Communities, fan sites and any large catalogue

    An unofficial field guide to every Pokémon, built on a large public API.

    What it shows PokéAPI turned into a cross-linked reference: about 1,000 species with their forms, 900 moves, 300 abilities, 18 types and 30 games. No backend: the website reads the API once at build time and becomes 2,000 static pages, the app keeps what it reads on the device.

    What's inside

    1. 01WebsiteA naturalist's notebook in Astro, with instant search.
    2. 02Pokémon pageStats, evolutions, type matchups, learnsets and games.
    3. 03Catalogue1,025 species with filters by type, generation and stats.
    4. 04AppFlutter: the same content, offline cache and saved Pokémon.
    • Astro
    • Flutter
    • Riverpod
    • GraphQL
    • PokéAPI
    SiteCode
  • Bed & breakfast template, WebsiteBed & breakfast template, 3D tourBed & breakfast template on a phone
    05Bed & breakfastWebsite with a 3D tour

    05 · Alder HouseDemo brand and data are fictional

    Bed & breakfast

    B&Bs, guesthouses and holiday homes

    Walk through the house before booking: a 3D tour that follows the scroll, room by room.

    What it shows The house is built by a Python script in Blender and furnished with CC0 models and PBR textures; the light is baked into the textures, so the site draws it without lights and runs on phones. The roof lifts off, the camera eases into each room, and booking goes to the property's own channel.

    What's inside

    1. 01WebsiteThe house first, rendered live in the browser.
    2. 023D tourThe roof lifts off; the floor plan and the model are clickable.
    3. 03RoomsEach room with its photo, amenities, price and booking link.
    4. 04Getting hereAn illustrated map with the route for each way of arriving.
    • Astro
    • React Three Fiber
    • Three.js
    • GSAP
    • Blender
    • Python
    SiteCode

Run a cinema, a shop, a studio?

These are starting points, not finished products: I adapt them to your business, your brand and your data.

Let's talk about yours

A product is a system, not a pile of screens.

  1. Understand

    I start from the problem and the people who live it. Technology comes later.

  2. Reduce

    I cut down to the smallest version worth using.

  3. Design

    Flows, screens and details take shape in Figma first. Design is where the product starts to feel real.

  4. Build

    Apps, APIs and internal tools grow together and speak the same language.

  5. Ship

    I release early, document what matters and stay on the product after launch.

AI in the loop

I build with AI every day. The judgment stays mine.

I worked on AI in research before it was everywhere. Today models and agents are part of how I ship: they take the repetitive work, I keep the decisions, the reviews and the responsibility.

What I use, and for what

  • BuildClaude CodeMy pair in the terminal: features across app and API, refactors, tests and reviews. I set the plan, read every diff and own what ships.
  • ThinkClaudeArchitecture choices, specs and trade-offs, talked through before writing code.
  • ExploreChatGPTA quick sparring partner for ideas, copy and edge cases.
  • ResearchGeminiResearch and long documents: docs, comparisons, the Google ecosystem.
  • VisualsGoogle FlowImage and video generation. The collectible figure on this site was art-directed there, from a character sheet.
  • MotionHiggsfieldAI video and motion for product visuals and launch content.

Proof, right here

This site was built with Claude Code and its figure was generated in Google Flow. Every line and every image went through me.

  1. 01

    I review everything

    Generated code is a draft until I've read it, tested it and understood it.

  2. 02

    Context first

    Clear specs, small steps and the right files: better input, better output.

  3. 03

    Leverage, not show

    I use AI where it saves real time, not to look modern.

The tools I use every day

Languages

  • Java
  • C#
  • TypeScript
  • Dart
  • SQL

Backend

  • Django
  • Django REST Framework
  • Flask
  • ASP.NET Core
  • Knowledge extraction

Frontend & mobile

  • Flutter
  • Riverpod
  • Angular
  • Astro
  • Tailwind CSS
  • GSAP
  • WebGL

Design

  • Figma
  • UI design
  • Prototyping
  • Motion

Data

  • PostgreSQL
  • MongoDB
  • Firestore
  • Pandas / NumPy

Cloud

  • Railway
  • Google Cloud
  • Firebase
  • Docker
  • Linux / Nginx
  • Git

Got a product to build?

Tell me what you have in mind. Based near Modena, Italy.

Matteo as a collectible figure in its box, waving