Skip to content

SaaS · co-founder

Squizzu

Role
Co-Founder & Full-Stack Engineer
Period
Jul 2024 - present
Team
Co-built with a backend team; I own the product design, the frontend and the design system.
The Squizzu homepage open in a browser on a MacBook: the headline “Practice The Interview Quiz by Quiz” and a ring of technology-category icons on a dark background.

The problem

Preparing for technical interviews is a grind that's easy to abandon. Squizzu had to turn that grind into a game people come back to. The whole product, from user journeys to API contracts, had to be settled before the first line of code.

Context & constraints

  • Greenfield: we started from zero users and an empty repository.
  • One person owns product definition, brand, design system and frontend, with no pre-made UI kit.

Architecture

One OpenAPI contract binds the frontend and the backend: the client types are generated straight from it, so drift on the API side breaks the build before it can reach a user's screen.

Process

The design system wasn't borrowed, it was built in Adobe XD: a fixed palette (from warm ambers #FFCD5D and #FDB410 to near-blacks), a shared asset library, and a second-generation landing page drawn out in both light and dark. Over a hundred responsive screens and custom icons.

Iterations

I redrew the Explore quizzes view from the first low-fidelity wireframe to the shipped screen. Across six frames it moves from a flat grid of featured cards, through a guided three-step build-a-quiz wizard, to a single searchable directory of the whole technology taxonomy.

  1. A low-fidelity black-and-white wireframe with a top search bar and three labelled rows of plain placeholder cards.

    The first wireframe sets the idea in black and white: three stacked rows (categories, paths and languages), each a row of four featured cards plus an Explore all.

  2. A colour mock-up with yellow-accented Categories, Career paths and Languages rows of text-rich cards.

    The yellow brand and real content arrive: positions, technologies, salary, questions and use cases, with a few card-header treatments tried on horizontally scrolling rows.

  3. The app with an icon sidebar and top bar, a Choose a category row of illustrated cards with sub-category counts, and a row of selectable technology tag chips below.

    The view moves into the real app shell with a sidebar, and browsing turns into building a quiz: pick an illustrated category, then toggle technology tags.

  4. The same app showing three numbered steps stacked down the page, each with illustrated selectable cards or tag chips, and a selected item outlined in yellow.

    The flow made explicit: Steps 1, 2 and 3 on one page, with a helper line and consistent selection, so category, specialisation and tag read as three clear tiers.

  5. The stepped view with a labelled sidebar (Dashboard, Explore Quizzes, My Progress) and cards that each show a count badge and a row of preview sub-tags.

    The sidebar gains readable labels and every card previews its contents: a count badge plus a strip of the sub-categories inside, so a choice shows what it holds before you commit.

  6. The final Explore quizzes page headed What do you want to practice?, with a search bar, domain filter tabs, and a browsable index of technologies with section counts.

    The shipped screen drops the linear wizard for one searchable directory: search and domain filters with counts above the full taxonomy, from domain through specialisation to technology.· final

Design decisions

Definition before pixels: requirements, journeys and API contracts settled before building.
A co-founder can't afford rework: the shape of the product had to hold before anyone built a screen.
A design system from scratch, not a single pre-made template.
A learning product lives on consistency and a recognisable identity; a template would have made it look like everyone else.
Gamification as the core mechanic: XP and correct-answer rankings, streaks, progress tracking and several learning modes.
Studying gets abandoned when it's dull. Game loops give a reason to come back the next day.
Difficulty-graded practice, not a flat question bank: every quiz holds a fixed 25/50/25 split of easy, medium and hard.
Interview prep pays off when it's structured; a graded mix keeps a session hard enough to matter without tipping into discouraging.
The product demo lives on the landing page, with no login and no backend call: a self-contained, code-split demo that shares the app's visual language.
The shortest path to conversion is letting someone feel the product, not read about it; when the demo looks like the real thing, 'try it' flows straight into 'sign up'.
One visual system across two front-ends on different styling foundations: the app on owned, accessible component primitives, the marketing site on build-time atomic CSS. Both are driven by shared colour, type and spacing tokens.
The two surfaces have to read as siblings without forcing one styling system on both; shared tokens keep the identity continuous from the first marketing page to the deepest product screen.
Contracts kept honest automatically: TypeScript clients from OpenAPI, quality gates and self-healing validation of the JSON from GPT-4o agents.
On a two-sided product, drift between the frontend and the API should break the build, not a user's screen.
Content quality gated independently, to keep wrong questions from reaching users: every AI-drafted question passes a separate, cold self-critique pass, and a human publishes it.
On a two-person team the guardrails have to run themselves: a second, independent judge on the content raises the floor before anyone's time is spent.

The solution

Delivered end to end: brand and design system, an accessible frontend in TypeScript, React 19 and Next.js with dark mode, on .NET 8 with Aspire orchestration and CosmosDB on Azure, topped with a gamification layer that turns studying into a game.

The Squizzu logo: a smiling yellow octopus in round glasses beside the SQUIZZU wordmark in a rounded, playful typeface.
A Squizzu question screen with an Incorrect banner: the question about console.log after setSaved(true), a TSX code block, the wrong option flagged red and the four-question navigator on the right.
A question with code: the wrong answer is called out plainly and the correct one is shown right away. Captured in the demo environment.
The same screen scrolled on: the Knowledge Base section with the explanation, the collapsible in-depth breakdown, a 100% progress bar and thumbs-up/down question feedback.
A wrong answer isn't a punishment, it's the doorway into the explanation and the in-depth breakdown. Captured in the demo environment.
The Squizzu React quiz board: “Continue Grind session” and “See sections” actions, Grind-session and Standard-quiz mode cards, and sections with 25%, 100% and 40% progress bars.
Learning modes side by side: the mixed Grind session and structured topic sections, each with its own progress. Captured in the demo environment.
The Session Complete card after finishing a session: 75% accuracy, 100% completion, Review Answers and Back to Menu buttons.
Closing the loop: a session ends in an accuracy report and a route back into reviewing the answers. Captured in the demo environment.
The Squizzu leaderboard in dark mode: a top-three podium, an XP / correct-answers toggle, a pinned “YOU” row at rank 4 and the streak counter in the header. Demo data: Demo Learner accounts.
The game layer in dark mode: a podium, two rankings (XP and accuracy), your own position always in view and the streak in the header. Demo data.
The “Experience Squizzu in Action” section on squizzu.com: an interactive demo of a Python memory-management question with the correct answer, the explanation, an in-depth breakdown with a code block and a “Start practicing” button.
The demo decision in practice: the full question → answer → explanation loop runs on the landing page with no login and no backend.
See it live

Outcome

On the gamification layer I designed and shipped, the platform grew from zero to over a thousand users. It runs in production as a paid product, not a prototype.

users
0to1,000+

Reflection

Definition, brand and code in one head keep the seams between them invisible. The product feels coherent because nobody had to guess at someone else's intent. The rule underneath all of it: make the right thing easy and the wrong thing loud, in the design system, in the contracts, and in the quality gates.