Quiz Maker

An Angular application for creating, managing and sharing slideshow-style quizzes while the target backend API was still under development.

RoleFrontend architecture & implementation

Project typeTechnical assessment / independent case study

Angular 19
TypeScript
Angular Material
RxJS
Signals

View source on GitHub

The challenge

The frontend had to be completed before the real backend existed. It needed full quiz management, an unlimited dynamic question form, reusable questions from deleted or previous quizzes and a refresh-safe URL that could be shared with mobile participants.

Product interface

From workflow to detail

Quiz Maker workspace with quiz statistics and library — 01Quiz workspace and content overview

Quiz library with question counts and management actions — 02Quiz management and responsive listing

Create quiz dialog with dynamic question and answer fields — 03Dynamic quiz authoring with validated questions

Quiz presentation with progress and answer reveal controls — 04Shareable presentation and answer reveal flow

Question recycling dialog with reusable question selection — 05Question recycling from the reusable library

The approach

I placed quiz and question access behind repository contracts, with localStorage-backed mock implementations and API implementations selected through environment configuration. Components stay independent of the data source while Reactive Forms, Signals and route-driven pages handle authoring and solving workflows.

What I built

Core implementation

Replaceable data layer

Repository abstractions allow mock and HTTP implementations to be exchanged without changing component logic.

Dynamic authoring

Reactive FormArray controls support an open-ended number of validated questions and answers.

Question recycling

Questions remain available independently of deleted quizzes and can be selected for reuse in new quizzes.

Shareable solve flow

URL-driven solve pages provide refresh-safe slideshow navigation with hidden answers and copied links.

Engineering judgment

Key decisions

Used localStorage instead of static in-memory fixtures so assessment data survives refreshes.
Separated quiz and question repositories because questions have a lifecycle beyond an individual quiz.
Used standalone components and Signals alongside RxJS-based repositories.
Added responsive card layouts, English/Croatian switching and theme persistence beyond the required scope.

Next iteration

What I would improve

Add unit tests for repositories, state services and dynamic form behavior.
Add unsaved-change protection and stronger accessibility for dialog and slideshow keyboard flows.
Introduce backend pagination, search, sorting and quiz versioning.
Connect authentication, ownership rules and a production API.

Interested in how I approach product and engineering problems?

Let’s talk →