Apeiron Global Software Engineer Interview Guide

The 60-second brief

Candidates describe the Apeiron Global Software Engineer role as web front-end work: building the interfaces that clients use to interact with the company's products, and turning conceptual designs into responsive, performant web pages. Reports place the engineer between design teams, who hand over the visual intent, and backend engineers, who supply the data the interface renders. Reported responsibilities also include code reviews, technical design discussions and sprint planning, and owning a feature from its design phase through production deployment and monitoring. Reports do not say what the company sells or which product the team owns, so ask your recruiter which platform you would work on and read it as a user before the loop.

This guide is for candidates interviewing for the Software Engineer role at Apeiron Global. It covers the five technical questions candidates report (layout with CSS grid and flexbox, performance under heavy traffic, cross-browser and responsive work, state management in a large application, and debugging UI problems in production), the advanced topics reported alongside them (accessibility, web security, CI/CD for web deployments) and how to prepare project stories. It does not cover backend or algorithm-heavy preparation, because none is reported for this role.

No round sequence is reported for this role. Candidates say the process usually finishes within about 3 to 5 weeks, and the reported content is technical web questions plus discussion of your past projects.

Focus areas

• UI/UX Design Principles
• Front-End Development
• Responsive Web Design

Overview

The reported requirements for this role are HTML, CSS and a modern JavaScript framework, experience with responsive design, and strong debugging and analytical skills. Nice-to-have items are familiarity with UI/UX design tools, cloud infrastructure experience and a portfolio of complex web applications. Preparation therefore means being able to explain, with working detail, how you build a layout, how you make it fast, how you keep it correct across browsers and screen sizes, how you organise its state, and how you find the cause when it breaks in front of real users.

The five reported questions follow that same life cycle of a feature. CSS grid versus flexbox is about building the layout. Optimising performance for high-traffic applications and cross-browser compatibility with responsiveness are about making it hold up across traffic, devices and engines. Managing state in a large-scale application is about keeping it maintainable as it grows. Debugging complex UI issues in production is about what happens after release. Practise them as one connected story rather than five separate facts, because a good answer to one usually borrows vocabulary from another: a layout shift is both a performance metric and a production bug.

Candidates also report evaluation areas named performance optimisation, responsive design and framework internals (the lifecycle and state patterns of the stack you prefer), with web accessibility standards (WCAG), security practices for web interfaces and CI/CD pipelines for web deployments listed as advanced concepts. Pick one framework you know well and be ready to explain how its rendering and update cycle works, not just how to call its API. Reports also mention that documentation and clean-code habits matter in senior-level assessments, so be ready to say how you comment, name and structure what you write.

A reported tip is to discuss specific past projects in detail. Choose two or three projects where you made visible front-end decisions (a layout approach, a performance fix, a state-management choice, a production incident) and rehearse them with the real numbers, tools and trade-offs. Then confirm with your recruiter whether a live coding exercise is part of your loop, since reports describe a technical coding portion without giving its format.

Where to focus your preparation

The sources do not report a round order or round names for this role, so the loop below is a single preparation focus built from the questions and evaluation areas candidates describe. Confirm the actual stages with your recruiter.

Preparation focus

No round sequence is reported for Apeiron Global, so treat this as the whole loop in one block and ask your recruiter for the stages, their format and whether you will write code. What candidates do report is the material: five technical questions on layout, performance, cross-browser and responsive work, state management and production debugging, with evaluation areas of technical depth (performance optimisation, responsive design, framework internals) and system architecture. Candidates also mention a technical coding portion and say clean, readable code and thinking out loud matter more than flawless syntax. Prepare each question as a structured spoken answer of a few minutes, each with one real example from your own work, and keep a few advanced topics (WCAG, front-end security, CI/CD for web) ready as short explanations.

What to demonstrate

• Command of core web technologies: HTML, CSS and a modern JavaScript framework
• Whether you can reason about performance, responsive behaviour and cross-browser differences instead of listing tips
• Debugging and analytical skill when a UI problem appears in production
• How clearly you explain trade-offs and past project decisions

How to prepare

• Write a one-minute decision rule for CSS grid versus flexbox and rehearse it with two layouts you have built
• Prepare a measurement-first answer for web performance: name the metrics you would read, the first three fixes you would try and how you would confirm they worked
• Pick one framework and prepare to explain its render cycle and how you would organise server data, URL state, form state and local UI state in a large application
• Ask the recruiter about the stages and whether a live coding exercise is included, then practise writing small components and layouts without an autocomplete crutch

Where candidates lose points

Answering CSS grid versus flexbox with only 'grid is two-dimensional, flexbox is one-dimensional'

Add a decision rule and a concrete case. Flexbox suits content-driven rows such as a toolbar or a tag list, where item sizes decide the layout. Grid suits layout-driven structures such as a page frame or a card gallery, where tracks are defined first and items placed into them. Mention that the two nest well, and name tools such as gap, minmax, auto-fit and subgrid so the answer shows you have shipped both.

Listing performance tips (minify, lazy load, CDN) without saying how you would find the actual bottleneck

Open with measurement: field data and a lab run, the main metrics (LCP, INP, CLS), and a network waterfall. Then connect each fix to the cost it removes: code splitting for script weight, responsive images and modern formats for image weight, caching headers and a CDN for repeat and distant traffic, and reducing re-renders for runtime cost. Close by saying how you would confirm the change and guard against regressions with a performance budget in CI.

Describing cross-browser testing as 'I check Chrome and Safari' and responsive work as 'I use media queries'

Describe a process. Define a supported-browser list, build mobile-first with progressive enhancement, use feature queries or fallbacks for newer CSS, check compatibility data before relying on a feature, and run real devices or a cloud device lab for engines that behave differently, such as mobile Safari viewport and form-control quirks. For responsiveness, mention fluid units, container or media queries at content breakpoints, and testing at in-between widths, not only at phone and desktop sizes.

Naming a state library as the answer to 'How do you manage state in a large-scale web application?'

Classify state before choosing tools: server data kept in a cache layer with its own refetch and invalidation rules, URL state for anything shareable, form state close to the form, and small local UI state kept inside components. Share client state globally only when several distant components truly need it. Explain the cost of getting this wrong (stale data, unnecessary re-renders, hard-to-trace updates) and how you would keep updates predictable and testable.

Jumping to a guessed fix when asked how you debug a UI issue in production

Walk the sequence out loud: reproduce or narrow by browser, device, user segment and release; check recent deploys and feature flags; read error tracking with source maps and the network and console evidence; form one hypothesis at a time and test it. Say when you would roll back or disable a flag to stop user impact before the root cause is known, and what test, alert or note you would add afterwards.

Questions & practice

Canonicalise a request body into a stable idempotency fingerprint

Medium · parsing · canonicalisation · hashing

idempotency_key.request_fingerprint is a SHA-256 over the method, path and canonicalised body, and a retry whose fingerprint differs must be rejected with 422 rather than served the stored response. Write the canonicaliser. Bodies are JSON up to 256 KB nested at most 32 levels; clients vary key order, whitespace and unicode escaping, and some send 64-bit ids as JSON numbers. Produce a deterministic byte string such that semantically identical bodies match and any semantic difference does not. State your complexity and name two normalisations you refuse to perform.

Approach

1. Parse once into a tree, then re-serialise under fixed rules: object keys sorted, array order preserved, one escaping convention, no insignificant whitespace. Parsing is O(n) and sorting keys is O(k log k) per object, so O(n log n) overall with O(depth) stack, and the 32-level cap is enforced during parsing because hostile nesting is how a canonicaliser becomes a stack overflow.
2. Sort keys by their UTF-8 bytes and say why the obvious implementation is wrong in some runtimes: a default string comparison that orders by UTF-16 code units places surrogate pairs, meaning code points from U+10000 up, below U+E000 to U+FFFF, which is not UTF-8 byte order, so two services written in different languages disagree on the same document.
3. Do not re-encode numbers through a double. IEEE-754 binary64 represents integers exactly only up to 2^53, so normalising a 19-digit id through a float changes it, and 1 against 1.0 cannot be reconciled without deciding whether they are the same value. Preserve the literal token, and require ids as strings at the API boundary if you want them comparable.
4. Reject duplicate keys rather than picking one. JSON permits them and parsers disagree, most keeping the last, so any choice you make ties the fingerprint to a parser detail that the code handling the request does not necessarily share.

Follow-up

• A client sends the same logical request with an extra field your API ignores. Same key, different fingerprint, so you return 422. Is that the right answer?
• Where does the fingerprint get computed relative to request decompression and the body-size limit?

Identify the heaviest tenants in a five-minute window under memory pressure

Medium · top-k · heavy hitters · streaming

The edge service handles about 3,000 requests per second across roughly 50,000 tenants, peaking near 9,000. Expose the 50 heaviest tenants by request count over the trailing five minutes so limits can be tightened before one tenant's backfill starves the fleet. You may not retain five minutes of raw records. Give the exact solution and its memory, then the bounded-memory approximation with its error stated as a formula, and say which you would ship and at what tenant cardinality that choice changes.

Approach

1. Do the exact version first, because it is affordable at this cardinality: a ring of 300 one-second counters per tenant, advanced lazily, is 1,200 bytes of counters per tenant and roughly 60 to 90 MB for 50,000 tenants with overhead. Carry a running total and subtract the bucket you overwrite so a window read is O(1) rather than 300 adds.
2. Extract the top 50 with a size-k min-heap over the tenant sums: O(d log k) for d tenants, against O(d log d) to sort them all. Maintaining the heap continuously instead of on query requires a tenant-to-heap-index map, because incrementing a count already inside the heap means sifting from a known position, and without that map you rebuild the heap on every request.
3. State the approximation precisely rather than gesturing at sketches. Misra-Gries with m counters retains every item whose true count exceeds N/(m+1), and each retained count underestimates the truth by at most N/(m+1). With m = 1,000 and N = 900,000 requests in the window the error is roughly 900 requests, which is fine for spotting a tenant sending 50,000 and useless for ranking two tenants 200 apart.
4. Say what breaks when the window slides: Misra-Gries and Space-Saving are insert-only and cannot be decremented as records age out. The workable construction is one summary per sub-window, say ten seconds, with 30 summaries merged at query time, and the merged error is the sum of the per-summary errors, so the bound degrades linearly in the number of sub-windows.

Follow-up

• The heaviest tenant is heavy because of one export job rather than user traffic. Should the limiter treat those as the same tenant?
• Two tenants sit tied at the boundary of the top 50. Does your answer flap, and does the flapping matter?

Collapse a redelivered event batch into per-aggregate high-water marks

Easy · hashing · at-least-once · aggregation

You drain a batch of up to 5,000,000 events, each (aggregate_id BIGINT, aggregate_version INT, event_type, payload). The log guarantees order within one aggregate only; the batch merges 64 partitions, and a relay failover has redelivered a range, so an older version for an aggregate can appear after a newer one. Given a map of last_applied_version per aggregate, produce the events worth applying, at most one per (aggregate_id, version), plus the count discarded. Target O(n) time. State the memory for 2,000,000 distinct aggregates and what you do when it does not fit.

Approach

1. One pass, one hash map from aggregate_id to the highest version kept, and a discard counter. An event whose version is at or below last_applied_version for its aggregate is dropped without further work, which is the whole reason the event carries its version rather than a delta. O(n) expected time, O(d) space in distinct aggregates.
2. Keep the maximum, never the last occurrence. The redelivered range means the final appearance of an aggregate in the batch can be an older version than one seen earlier in the same batch, so last-wins applies stale state over newer state and the projection regresses with no error anywhere.
3. Cost the memory instead of calling it large: an 8-byte key plus a 4-byte version is 12 bytes of payload, and an open-addressed table held at a 0.7 load factor costs roughly 17 bytes per entry before per-slot metadata, so 2,000,000 aggregates is tens of megabytes in a native layout and several times that in a runtime that boxes both key and value.
4. If the distinct set exceeds memory, partition on hash(aggregate_id) mod P and reduce each partition independently. Every event for one aggregate hashes to the same partition, so the per-partition result is exact and the merge is concatenation rather than a second reduction.

Follow-up

• The payload is a patch rather than a snapshot, so applying only the highest version loses the intermediate changes. What changes in your reduction?
• How do you detect that version 7 arrived while version 6 was never delivered, and what should the consumer do about the gap?

Stop tag and share joins from fanning out a page

Medium · join fan-out · semi-joins · many-to-many

resource_tag is (resource_id, tag_id) with PK (resource_id, tag_id); resource_share is (resource_id, shared_with_user_id, permission). The tagged-and-shared listing inner-joins resource to both, filters tenant_id, tag_id = ANY($2) and shared_with_user_id = $3, orders by updated_at DESC and takes 50. Pages come back with fewer than 50 distinct resources and the total in the header is far too high. Explain the row multiplication, rewrite both the page query and the count query so each is correct, and name the index each one needs. PostgreSQL 16.

Approach

1. Do the arithmetic against the predicates that are actually there. An inner join emits one row per matching child row, and both joins are filtered: tag_id = ANY($2) admits only the requested tags, shared_with_user_id = $3 admits one user's share rows. So a resource holding three of the requested tags and shared with $3 once yields three rows, not one — the multiplier is its count of matching tags times its share rows for that single user, and that second factor is 1 unless the table admits duplicate (resource_id, shared_with_user_id) pairs. LIMIT 50 then limits rows rather than resources, and COUNT(*) counts pairs — the header is the product, not the population.
2. Reject DISTINCT as the fix. It deduplicates after the product has been built, so the planner must materialise and sort the fanned-out set before the LIMIT can apply, and it leaves any SUM or AVG in the same select list wrong.
3. Rewrite both filters as semi-joins, keeping resource as the only row source: AND EXISTS (SELECT 1 FROM resource_tag rt WHERE rt.resource_id = r.resource_id AND rt.tag_id = ANY($2)) and the same shape against resource_share. A semi-join stops at the first match per resource and preserves the driving index order, so ORDER BY updated_at DESC, resource_id DESC LIMIT 50 still stops after 50 rows.
4. Count with the same predicates and no join at all: SELECT count(*) FROM resource r WHERE r.tenant_id = $1 AND r.status = 'active' AND EXISTS (...) AND EXISTS (...). Nothing multiplies a resource, so the number is the population.

Follow-up

• The filter changes from 'any of these tags' to 'all of these tags'. Rewrite it and state what it costs relative to the ANY form.
• A resource can be shared with the same user twice under different permissions. Does your count change, and should it?

Hold a per-tenant active cap against concurrent creates

Hard · write skew · isolation levels · constraints

A tenant on the standard plan may hold at most 50 resources with status='active'. The create handler runs SELECT count(*) FROM resource WHERE tenant_id = $1 AND status = 'active', compares to 50, then inserts. Two creates arrive 3 ms apart on different instances and the tenant lands at 51. Name the anomaly, say whether PostgreSQL 16 READ COMMITTED or REPEATABLE READ prevents it and why, then give an implementation that holds the cap at READ COMMITTED with the exact statements. Finally, say what changes when the cap is 'at most one running export per tenant' on job_run.

Approach

1. Name it: write skew. The two transactions read an overlapping set and write disjoint rows, so there is no row-level conflict for the engine to detect and each commit is individually legal.
2. Rule out the levels precisely. READ COMMITTED takes a fresh snapshot per statement and takes no lock on the counted rows, so both see 49. PostgreSQL's REPEATABLE READ is snapshot isolation: it removes non-repeatable reads and phantoms within the snapshot but still admits write skew, because the anomaly is not a re-read of a changed row, it is a read of a set that a concurrent transaction invalidates. Only SERIALIZABLE closes it, by tracking the read dependency and aborting one transaction with SQLSTATE 40001 — a guarantee that exists only if the application re-runs the whole transaction from the read.
3. Convert the set predicate into a single-row conflict: keep tenant.active_resource_count and run UPDATE tenant SET active_resource_count = active_resource_count + 1 WHERE tenant_id = $1 AND active_resource_count < 50 in the same transaction as the INSERT. Zero affected rows is the cap, returned as 409. The row lock serialises the decision at any isolation level, and contention is bounded to one tenant's row — which is also the fair-scheduling unit, unlike a global counter that would convoy every tenant behind one row.
4. State the cost you just took on: a counter is a second source of truth that can drift, so every path that changes status must adjust it inside the same transaction, and a periodic reconciliation has to exist, with resource_revision as the authority for what the count should have been.

Follow-up

• A resource moves from archived back to active. Which statements change, and what breaks if the counter update and the status change land in different transactions?
• The cap becomes plan-dependent and a plan can change mid-month. Where does the number 50 live, and who reads it?

What are the primary differences between CSS grid and flexbox, and when would you choose one over the other?

Medium · Technical & Domain Knowledge

Approach

1. Flexbox is one-dimensional: items flow along one main axis (row or column) and are sized from their content through flex-grow, flex-shrink and flex-basis. Grid is two-dimensional: the container defines rows and columns and items are placed into that structure.
2. With flex-wrap, each wrapped line is laid out on its own, so items in different lines do not line up as columns. When rows and columns both have to align, as in a card gallery or a page shell, I use grid.
3. Grid tools I would name: grid-template-columns with fr units, minmax(), repeat(auto-fit, minmax(240px, 1fr)) for a responsive gallery with no media queries, grid-template-areas for readable page layouts, and placing two items in the same area to overlap them.
4. I pick flexbox for component-level layouts where the content decides the size: nav bars, toolbars, button groups, centering, or spreading out an unknown number of items. Most real pages combine the two, with grid for the page and flex inside each cell.
5. Edge cases: flex items default to min-width: auto, so long text or a wide child overflows unless I set min-width: 0. Reordering with order or grid placement changes only the visual order, not the DOM order that keyboard and screen-reader users follow. gap works in both layouts, and subgrid aligns content inside nested cards.

Follow-up

• What is the difference between auto-fill and auto-fit in repeat(), and when can you actually see it?
• A flex child with a long URL is overflowing its container. Why does this happen and how do you fix it?
• How would you line up the titles and footers of cards in the same row when their content heights differ?

How do you optimize web performance for high-traffic applications?

Medium · Technical & Domain Knowledge

Approach

1. I start by measuring, not guessing. I collect field data (real-user Core Web Vitals: LCP, INP, CLS) separately from lab runs, and I split server time (TTFB) from client time so I know which side to work on.
2. Delivery: serve static assets from a CDN with content-hashed filenames and long-lived immutable Cache-Control, compress with Brotli or gzip, use HTTP/2 or HTTP/3, and preload or preconnect only the resources the first render actually needs.
3. Rendering and JavaScript: server-render or statically generate pages for a fast first paint, code-split by route, tree-shake, and defer or lazy-load non-critical scripts. Images get srcset/sizes, modern formats and explicit width and height to prevent layout shift, and below-the-fold images get loading="lazy". The LCP image must not be lazy-loaded.
4. Under heavy traffic, most of the gain comes from caching layers: edge caching with stale-while-revalidate, an application cache in front of hot reads, fewer and batched API calls instead of N+1 request chains, pagination, and stateless servers that can scale horizontally.
5. On the main thread, any task over 50 ms counts as a long task and hurts responsiveness. I break up heavy work, debounce input handlers, virtualize long lists and avoid layout thrashing by batching DOM reads before writes. A bundle-size and vitals budget enforced in CI stops regressions.

Follow-up

• LCP got worse after a release and nothing in the diff looks related. How do you find the cause?
• How do you cache a page that is mostly shared but contains a personalised section?
• How would you stop the JavaScript bundle from slowly growing release after release?

Describe your process for ensuring cross-browser compatibility and responsiveness.

Medium · Technical & Domain Knowledge

Approach

1. First I define a support matrix from real usage analytics and write it down as a browserslist config. The same config drives Autoprefixer and the transpiler or polyfill targets, so tooling and testing work from one list.
2. For layout I write mobile-first CSS: base styles, then min-width media queries, fluid sizing with rem, percentages and clamp(), the viewport meta tag, and responsive images. I use container queries for components whose layout depends on their container rather than on the viewport.
3. I use feature detection, not user-agent sniffing: @supports and progressive enhancement, so an older browser still gets a usable baseline. Before I use a newer feature, I check its compatibility data on MDN or caniuse.
4. For testing I run automated end-to-end tests across the Chromium, Firefox and WebKit engines (Playwright supports all three) and visual regression screenshots at each breakpoint, and I spot-check on real devices, especially iOS Safari, where every iOS browser uses WebKit.
5. Known traps: 100vh on mobile Safari ignores the dynamic toolbar, so I use dvh or svh. Hover-only interactions fail on touch, so I gate them with @media (hover: hover). Default form-control and date-input styling differs between browsers. Touch targets have to be large enough at small widths.

Follow-up

• A layout breaks only on iOS Safari and you are on a Windows machine. How do you reproduce and debug it?
• When would you choose a container query over a media query for a component?
• How do you decide that an older browser version can be dropped from the support matrix?

How do you manage state in a large-scale web application?

Medium · Technical & Domain Knowledge

Approach

1. I start by classifying state, because each kind needs a different tool: server data cached from APIs, global client state (signed-in user, theme, locale), local component state, URL state (filters, sort, pagination, which should survive a refresh and be shareable) and form state.
2. For server data I use a query-cache layer (TanStack Query, SWR or RTK Query in a React stack). It handles caching, request deduplication, invalidation, background refetch and optimistic updates, so API responses are not copied by hand into a global store where they go stale.
3. I keep global client state small. Context works for values that rarely change, but every consumer re-renders when the context value changes, so frequently updated state goes in a store with selector subscriptions (Redux Toolkit, Zustand or the framework's equivalent) so components re-render only for the slice they read.
4. Rules I apply: one source of truth per piece of data, entities normalised by id, derived values computed with memoised selectors instead of being stored twice, immutable updates, and state kept as close as possible to the components that use it.
5. Edge cases: responses arriving out of order (cancel with AbortController or ignore stale responses), rolling back an optimistic update when the request fails, keeping tabs in sync (storage event or BroadcastChannel) and avoiding hydration mismatches when state is initialised on the server.

Follow-up

• When would you decide not to add a global store at all?
• An optimistic update succeeded in the UI but the server rejected it. Walk through what the user sees and what the code does.
• A context provider at the root re-renders the whole tree on every keystroke. How do you fix it?

Explain your approach to debugging complex UI issues in production.

Medium · Technical & Domain Knowledge

Approach

1. First I scope the problem before forming any theory. From error monitoring, session replays and real-user metrics I find which browsers, devices, locales, user segments and release versions are affected, and when the issue started. Then I line that start time up against deploys, feature-flag changes and third-party script updates.
2. If users are actively affected, I mitigate before finding the root cause: roll back the release or turn the feature flag off, then investigate without time pressure.
3. I reproduce under matching conditions: the same browser version and viewport, network and CPU throttling, the same account data, and a production build. Dev builds differ in minification, timing and strict-mode double invocation, so a bug can disappear there.
4. To narrow it down I bisect between the last good and first bad release (git bisect, or toggling flags) and use DevTools: computed styles and layout for visual bugs, the Performance panel for jank, the Network panel for failed or slow requests, and DOM-mutation or XHR breakpoints for state that changes unexpectedly.
5. Common causes to rule out: race conditions that only appear on slow networks, SSR hydration mismatches, interference from browser extensions or third-party scripts, and stale cached HTML pointing at deleted JS chunks after a deploy. I close the issue with a regression test that reproduces the bug.

Follow-up

• The bug affects a small share of users and you cannot reproduce it. What do you add to the code to learn more?
• How do you get readable stack traces from minified production code without serving your source maps publicly?
• Users report blank screens right after each deploy. What is a likely cause, and how do you fix it?

Suggested practice checklist

The plan follows the lifecycle of a front-end feature that the five reported questions trace (layout, compatibility, performance, state, production debugging), then covers the advanced topics and your project stories, and ends with a spoken mock. Because no round sequence is reported, each day produces something you can use in any format.

Day 1 — Layout with CSS grid and flexbox

• Build the same page twice: a page frame with a sidebar and a card gallery using grid, and a navigation bar with a wrapping tag list using flexbox
• Rebuild the card gallery with minmax and auto-fit so it needs no media query, then add one nested case where a flex row sits inside a grid cell
• Write your decision rule for choosing between the two and rehearse the answer aloud with these examples

Deliverable: Two working layouts (page frame plus gallery, and navigation bar plus tag list) and a written decision rule with the examples that support it.

Day 2 — Cross-browser compatibility and responsiveness

• Write a supported-browser list for an imaginary product and set it up as a build configuration (for example a browserslist file)
• Make one component mobile-first, then test it at in-between widths and fix what breaks
• Add a feature-query fallback for one newer CSS feature and note how it behaves where unsupported
• Write your cross-browser and responsive process as a numbered answer you can say in a couple of minutes

Deliverable: A supported-browser configuration, one responsive component with a feature-query fallback, and a numbered process answer.

Day 3 — Web performance under heavy traffic

• Run a Lighthouse or similar audit on a page you built and list the three largest costs with evidence from the waterfall
• Apply one fix for each cost (for example code splitting, responsive images, caching headers) and re-measure
• Write a performance budget with thresholds for the main metrics and describe where it would run in CI

Deliverable: A before-and-after measurement table for three fixes, a written budget, and a spoken answer that starts from measurement.

Day 4 — State management and framework internals

• Take a medium app idea (list, filters, detail view, form) and label each piece of state as server data, URL, form or local UI
• Implement one feature with local state and again with a shared store or context in your preferred framework, and compare re-renders
• Write a short explanation of your framework's render and update cycle, including when a component re-renders and how you would avoid needless work

Deliverable: A state inventory table for the app, two implementations of one feature with a comparison note, and a half-page explanation of the render cycle.

Day 5 — Debugging UI issues in production

• Create a small page with a deliberate bug that appears only in one browser or only after a data-dependent path, then diagnose it using devtools and source maps
• Write a debugging runbook: reproduce, segment by browser and release, check flags and deploys, form a hypothesis, mitigate, fix, prevent
• Practise telling one real production incident from your career in that order, naming what you measured

Deliverable: A diagnosed bug write-up, a one-page runbook, and a spoken incident story that follows the runbook.

Day 6 — Advanced topics and project stories

• Audit one page for accessibility with only the keyboard and a screen reader, and list five WCAG-related fixes
• Write a half-page on front-end security (escaping untrusted content, a content security policy, safe handling of tokens in the browser) and an outline of a CI/CD pipeline for a web deployment
• Write three project stories in situation, task, action, result form, each with a front-end decision, the trade-off you accepted and the outcome

Deliverable: An accessibility fix list, a security and CI/CD summary, and three written project stories with trade-offs.

Day 7 — Spoken mock for the Apeiron Global loop

• Answer all five reported questions aloud in a row, then record yourself and mark every answer that lacks an example or a measurement
• Redo the two weakest answers and add one real project example to each
• Write the questions you want to ask the team, such as current technical debt, how releases are tested and what the first project would be, and send the recruiter your format questions

Deliverable: A recorded mock of five answers, two revised answers, and a list of team questions with the format questions sent.

Project stories for a front-end loop

Reports list no specific behavioral questions for this role. They do advise discussing past projects in detail, using the STAR structure, explaining technical ideas to non-technical stakeholders and working closely with designers and backend engineers. Prepare stories where you made front-end decisions and can give the outcome.

1. Walk through a front-end project you owned from design handoff to production deployment and monitoring: the decisions you made, the trade-offs you accepted and what you would change.
2. Describe a time a design could not be built exactly as specified in the browser. What did you tell the designer, what options did you offer and what shipped?
3. Tell the story of a performance or UI problem you found after release: how you detected it, how you limited the damage, how you proved the cause and what stopped it happening again.
4. Describe a time you explained a technical constraint to a non-technical stakeholder. How did you frame the trade-off and what did they decide?
5. Describe a code review where you disagreed with a teammate's approach to components, state or styling. What evidence did you bring and how was it resolved?

Argue against a design, lose, and commit anyway

Medium · disagreement · service boundaries · decision records

Describe a design you argued against and lost. State the failure you predicted as a named mechanism, not a feeling about complexity: two services that would need one transaction, a projection with no rebuild path, a write path with no idempotency key. Say what evidence you brought, what the decision maker weighed instead, and what you did after the decision was made: what you instrumented, what you wrote down, and whether the prediction came true. Five minutes.

Approach

1. State the prediction in falsifiable form up front: the mechanism, the condition that triggers it, and the observable outcome. A prediction that cannot be checked also cannot be credited to you later.
2. Show the evidence you had at the time and label each piece honestly as measured, analogous, or intuition. Keeping the intuition is fine; disguising it as data is the thing that erodes your standing in the next argument.
3. Represent the opposing case at full strength, including the constraint you did not control: a fixed date, a team boundary, or the fact that the decision was cheap to reverse and yours was not.
4. Make disagree-and-commit concrete. Name the artefact you left behind so the prediction could be settled without you: the alert and its threshold, the counter on the dashboard, the decision note that recorded the trade-off and the condition that would revisit it.

Follow-up

• What threshold on that alert would have proved you right, and did anyone ever look at it?
• If the same proposal arrived tomorrow with the same deadline, would you argue it the same way?

Reverse your own decision and price the reversal

Medium · reversibility · measurement · migrations

Describe a technical decision you made and later reversed. Pick one that cost something: a service you split and merged back, a cache you added and removed, an index you created that pushed the planner onto a worse plan, a projection you rebuilt from scratch. State what you believed when you decided, the measurement that changed your mind, how long the wrong version ran in production, and what the reversal cost in migrations, dual writes, and a deprecation window for callers you did not own.

Approach

1. State the original rationale without irony, in the version you would still defend given what was known then. If it is not defensible, the story is about carelessness rather than judgement, and a different example serves you better.
2. Give the measurement that moved with a before and after: the p99 that did not improve, the cache hit rate that sat at 40%, the plan that flipped to a sequential scan once the table passed a size you can name.
3. Cost the reversal in steps, not adjectives: expand-and-contract deploys, the dual-write window, the callers who had to be notified, the rows already written in the wrong shape that had to be backfilled or abandoned.
4. Distinguish reversal from rewrite by naming what you kept. Most good reversals preserve the schema or the interface and undo one decision inside it, which is also why they were affordable.

Follow-up

• What in that decision was irreversible, and did you know it was irreversible when you made it?
• How did you tell the people who had already built on top of the original decision?

Narrate an outage you owned from page to postmortem

Hard · incident response · blast radius · postmortems

Pick an incident you personally drove, ideally one where writes were affected rather than reads. In six to eight minutes: state the symptom as it first appeared on a dashboard, the blast radius you established before you knew the cause, the mitigation you applied and when, the mechanism you eventually proved, and the follow-up that would prevent a repeat. Bring numbers: error rate, tenants affected, minutes to mitigate, minutes to resolve. If you cannot name what you measured, choose a different incident.

Approach

1. Open on the signal rather than the cause: which metric at which percentile moved, on which service, at what time, so the listener follows the same evidence you had rather than a conclusion you already reached.
2. Separate mitigation from diagnosis out loud. State what you did to stop the bleeding (flag off, shed traffic, drain a lease, roll back a deploy) and say plainly that you did it before the mechanism was known, because those are two jobs with different deadlines.
3. Establish blast radius in countable terms: how many tenants, how many writes, and crucially whether the effect was loss or only delay. An append-only revision table or a pending outbox row means the change survived and the projection was merely behind, which is a repair rather than a data-loss incident.
4. Prove the mechanism instead of asserting it. Name the trace span that grew, the plan that flipped to a sequential scan, the lease that expired, plus one alternative you ruled out and the signal that stayed flat while you ruled it out.

Follow-up

• What would you do differently in the first five minutes, given the same dashboard and no more information?
• Which follow-up action did you deliberately not take, and why was dropping it the right call?