Skip to content

ADR-005: Use React with TypeScript for the Frontend

Field Value
Date 2026-03-21
Status Accepted
Deciders Project owner
Supersedes —
Superseded by —

Context and Problem Statement

The Task Manager requires a web-based user interface that allows users to list, create, edit, and delete tasks. A frontend framework and language must be chosen that balances developer productivity, type safety, and ecosystem maturity.

The project specification (Agentic SDLC Fundamentals Task, Accenture 2026) explicitly lists React.js with TypeScript as the preferred frontend stack.

Decision Drivers

  • Type safety: field names and API response shapes must be caught at compile time, not at runtime.
  • Developer productivity: a well-understood component model and rich ecosystem are required.
  • Build tooling: a fast, modern build tool with hot module replacement is needed for a good developer experience.
  • Project specification alignment: the task description lists React with TypeScript as the preferred choice.

Considered Options

  1. React with TypeScript (using Vite as build tool)
  2. React with JavaScript (using Vite)
  3. Angular (TypeScript-first)

Decision Outcome

Chosen option: React with TypeScript (option 1), because it satisfies the project specification, provides compile-time type safety for API contracts, and Vite delivers a fast dev-server with near-instant hot module replacement.

Positive Consequences

  • TypeScript catches mismatches between API response shapes and UI components at build time.
  • React's component model is well-suited to a CRUD task list with a form and a table.
  • Vite starts in milliseconds and bundles for production with tree-shaking out of the box.
  • A large ecosystem of libraries (e.g., TailwindCSS for styling, React Query for data fetching) is available without lock-in.

Negative Consequences / Risks

  • TypeScript adds a compilation step and requires type definitions for third-party libraries.
  • React does not enforce a project structure; discipline is required to keep components organized.

Pros and Cons of the Options

Option 1 — React with TypeScript (Vite)

  • Pro: Type-safe API contracts; errors caught at compile time.
  • Pro: Fast Vite dev-server; excellent developer experience.
  • Pro: Aligned with project specification.
  • Con: Requires TypeScript configuration and type definitions.

Option 2 — React with JavaScript (Vite)

  • Pro: Lower initial setup; no TypeScript configuration required.
  • Con: No compile-time type safety; API shape mismatches surface as runtime errors.
  • Con: Not the preferred option in the project specification.

Option 3 — Angular (TypeScript-first)

  • Pro: Opinionated structure; TypeScript is first-class.
  • Con: Significantly larger framework; steeper learning curve for developers unfamiliar with Angular.
  • Con: Not listed in the project specification.