The Problem

The exam asked for a web app that builds a resume from a given grid design: a set of blocks (avatar, personal info, languages, education, interests, contacts, experience) on a grid, each editable right on the page.

Architecture

I decided not to just hard-code the template, but to build a scalable, customizable system instead.

The key decision was to reduce the problem to “adding a new block type” rather than piling conditional logic into one component. Everything sits on a base Component class, from which Box inherits — the generic grid box. Concrete resume blocks then inherit from Box: AvatarBox, InfoBox, LanguagesBox, EducationBox, InterestsBox, ContactsBox, ToolsBox, ExperienceBox.

Each block is described by a config object with its grid position (row, col, rows, cols) and a type-specific payload — for AvatarBox, for example, that’s src pointing at the user’s image. Blocks are created and placed onto the Grid via a Factory Method, and property handling uses a Configuration Object pattern. Styles stay isolated at the block level, with no dependency on global classes.

The finished resume can be exported to PDF straight from the browser — the page is rendered to a canvas via html2canvas and packed into a PDF via jsPDF, no server round-trip needed.

How to Run

git clone https://github.com/tolstovrob/tbank-intensive-js-entry
cd tbank-intensive-js-entry
npm install
npm run dev