AI systems4 min read

iPrep

An interactive engineering learning playground, with visual experiments, real code and interview practice

Built with Next.js, React, TypeScript, Web Workers, SwiftUI, Prisma, PostgreSQL

iPrep screenshot

From interview answers to engineering understanding

I started iPrep as a place to practise interview answers aloud. The next problem was deeper: choosing a useful topic, recognising a pattern, translating an idea into JavaScript and remembering it when the next session arrived.

The Learning Playground connects visual experimentation, problem solving and hands-on code. A Daily Mix chooses varied activities across JavaScript, algorithms, developer terminology, design systems, accessibility, architecture, AI product engineering and engineering decisions. Quick Five and Deep Dive give the same habit different amounts of room.

Open the Learning Playground.

A learning sequence you can operate

The progression is Visualise → Experiment → Implement → Apply. Start with a model you can change. Predict what happens, see the result, then implement the behaviour and try unfamiliar inputs. Progressive hints and immediate feedback help you continue when the translation into code becomes difficult.

Pattern recognition and contextual terminology sit alongside coding. They address different parts of learning: seeing the relationship between problems, finding the language for an idea and turning it into a working implementation.

A feature you can break and rebuild

The feature studio begins with an email-preferences interface that mishandles a user's intent. You can change the checkbox, start a save, edit again and decide when the response arrives. Draft, submitted and saved values become visible parts of the product problem.

The workspace includes an editable TypeScript model, a real React component and CSS. Strict TypeScript checks the provided contract; behaviour checks exercise the state model, component events and hooks. Changed requirements introduce unfamiliar request identities, initial state and server messages. A private explanation records the alternatives and trade-offs after the code works.

TypeScript and React run inside an isolated worker against an in-memory DOM. A trusted frame draws the markup and relays control events. This keeps learner JavaScript away from the host app's account and storage. The laboratory supports a bounded set of component behaviour; it does not provide every browser layout API or arbitrary package.

Connected engineering missions

Four longer missions connect a brief, experiment, real JavaScript, changed requirements and an explanation:

  • Search ownership: out-of-order callbacks, React state snapshots and a request that can settle once.
  • AI retrieval evidence: permissions, freshness, ranking, context budget and when to abstain.
  • Accessible components: focus and selection, keyboard behaviour, disabled items and component ownership.
  • Reliable orders: partial writes, an atomic outbox, retries and deduplicated consumption.

Each mission makes an engineering decision visible, then asks for an implementation and a reasoned explanation. Passing the checked cases is evidence about that implementation; explanation quality and retained understanding still need review and repeated use.

Preserve the interview practice

The spoken practice experience remains alongside learning: question banks, recorded answers, transcripts and feedback on structure and delivery. The released SwiftUI app continues to provide that existing experience. The newer native Learning Playground, including the feature studio, is being tested internally through TestFlight on iPad and iPhone.

The web workspace is the desktop route for hands-on coding. Native learning content is bundled for offline use. Generic educational content stays separate from personal application context, interview transcripts and private rehearsal notes.

Progress and the next product step

Mission code, decisions and feature attempts save within the current browser or device. Shared Mac and iPad workspace sync is still in development. Broader substantial projects, role-specific preparation and independent follow-up assessment are also ongoing work.

The product direction is a place where engineers want to return: investigate something surprising, build a mental model, make it work and use it in a new setting. The Learning Playground is already playable; learning and retention are outcomes to observe through use.