Engineering case study · Frontend

CareerAI

A browser-only career planning MVP with rule-based matching, learning roadmaps, CV editing and interview practice.

Frontend MVPSource inspected · Independent project
Repository (opens in a new tab)Explore demo (opens in a new tab)
CareerAI landing page with career assessment actions and a connected career compass.
Actual frontend demo capture. The prototype uses deterministic guidance and does not call an AI API.

The problem

Early-career learners need a connected way to explore roles, identify learning gaps and prepare application materials.

The implementation

A typed frontend connects profile assessment, explainable matching, career details, roadmap progress and a CV builder. Guidance comes from deterministic rules and local content.

System structure

Architecture in practice.

  1. Next.js App Router pages compose typed UI components and locally defined career content.

  2. Small domain modules calculate career matches, CV suggestions, interview practice feedback and progress.

  3. A shared frontend state layer persists the current browser workspace in localStorage.

  4. Restored data is validated and bounded, with recovery behavior for unreadable or unavailable storage.

Engineering decisions

  • Separate content, calculations and presentation so the rules can be inspected and edited.
  • Explain match reasons instead of presenting an unexplained score as a validated prediction.
  • Use browser persistence for a no-account MVP and disclose its device/origin limits.
  • Prebuild career-detail routes for static deployment.

Challenges & tradeoffs

  • Several user journeys need to remain consistent with one selected career and one browser workspace.
  • Malformed saved state should not prevent a visitor from continuing.
  • Prototype job listings and readiness indicators need clear demonstration labels.

What the project teaches

  • Connected state and recovery behavior are as important as individual screens.
  • Typed rule engines can make a frontend prototype useful before adding external services.
  • Local-first persistence simplifies an MVP while introducing clear portability limits.

Current scope & limits

  • No generative AI API, backend endpoints, authentication or database.
  • Career matches and interview feedback are exploration aids, not scientifically validated assessments.
  • Jobs are fictional examples; applications are not sent to employers and browser progress does not sync across devices.
  • External project checks were documented in its repository but not rerun by this audit.

Contribution & source evidence

Independent frontend MVP published by Zahid Hasan, with source and documentation commits recorded in the repository history.

The case study reflects inspected source. External project test suites and business outcomes were not independently evaluated.

Let's talk about practical engineering.

Contact Zahid