Migrate Conduit from Angular to React (Vite + React + react-router)

[milind-cognition]

Summary

This PR migrates the Conduit RealWorld app from Angular 21 to React, while keeping it a drop-in RealWorld implementation. The migration was driven by the framework-agnostic Playwright e2e suite in e2e/ — that suite is the contract and passes unchanged.

Stack

• Vite + React 19 + TypeScript
• react-router-dom for routing (same routes, nested profile routes)
• fetch-based src/api/apiClient.ts — replicates the 3 Angular HTTP interceptors (API base URL, Authorization: Token header, error normalization + global 401 logout)
• src/auth/AuthContext.tsx — replaces UserService, including the exact loading / authenticated / unauthenticated / unavailable states, 4XX→logout vs 5XX→retry semantics, and exponential backoff
• marked + DOMPurify for sanitized markdown (XSS contract)
• bun package manager + Playwright e2e (unchanged), vitest + Testing Library unit tests

What was preserved (the e2e contract)

• All CSS classes, input name attributes, button/heading text, and routes from e2e/SELECTORS.md
• localStorage key jwtToken
• window.__conduit_debug__ debug interface (src/auth/debug.ts)
• Theme CSS + SVG assets still come from the realworld git submodule (copied to /assets by vite-plugin-static-copy)
• The entire e2e/, Playwright configs, .prettierrc, .editorconfig are untouched

Source → target mapping

Angular	React
app.config initAuth / UserService	src/auth/AuthContext.tsx
HTTP interceptors	src/api/apiClient.ts
JwtService	src/auth/jwt.ts
route guards	src/auth/guards.tsx
services (articles/comments/tags/profile)	src/services/*
pipes (defaultImage/markdown), list-errors	src/shared/*
article/profile components	src/components/*
layout header/footer	src/layout/*
pages (home/auth/editor/article/settings/profile)	src/pages/*

Notable behavioral fixes

• Settings update omits an empty password field (the live API returns 422 for a blank password).
• RequireAuth is point-in-time (like Angular's canActivate): once you're on a protected page, a mid-session 401 shows an error instead of redirecting you away.

Tooling / CI

• index.html moved to project root; public/ holds favicon.ico + _redirects.
• Dev server pinned to port 4200 (matches Playwright baseURL).
• deploy.yml zip path updated for the new dist/ output.
• README.md / CLAUDE.md updated for React.

Test evidence

• E2E (full suite, bun run test:e2e): 121 passed, 1 flaky — the single flaky is the existing articles › should view article from home feed, a live-demo-backend timing issue that passes on retry.
• E2E security (bun run test:e2e:security): 16 passed (XSS image/markdown/description sanitization).
• Unit (bun run test): 25 passed (jwt, apiClient, articles service, defaultImage, ListErrors).
• bun run build and bun run format:check pass.

Screenshots

Home (global feed, tags, avatars, favorite counts):

Home page

Article detail (meta + Follow/Favorite, sanitized markdown body, tags):

Article page

Login page:

Login page

Notes for reviewers

• The work was structured into parallelizable waves (foundation → shared components → pages) with non-overlapping file ownership, so individual components/pages can be reviewed in isolation.
• No Angular / RxJS / zone.js dependencies remain.

_{To show artifacts inline, enable in settings.}

  

---

Devin Review

Status	Commit
⚪ Not started	—

Run Devin Review

💡 Connect your GitHub account to enable automatic code reviews.