feature: React + TypeScript port of the Angular RealWorld app (react-app/)

[devin-ai-integration]

Summary

Adds a full, visually- and functionally-equivalent React 18 + TypeScript (Vite) port of the Angular RealWorld "Conduit" app in a new top-level react-app/ folder. The Angular app is left completely untouched for side-by-side comparison.

The port mirrors the Angular architecture 1:1 and talks to the same https://api.realworld.show/api backend with identical request/response shapes:

• Angular services → API modules (src/api/*.ts): articles, comments, tags, profiles, plus a client.ts that reproduces the three Angular HTTP interceptors:

  • apiInterceptor → API root prefix
  • tokenInterceptor → Authorization: Token <jwt> header
  • errorInterceptor → global 401-logout (for non-/user endpoints) + error normalization

• UserService (RxJS) → AuthContext (src/auth/AuthContext.tsx): reproduces the auth state machine (loading → authenticated | unauthenticated | unavailable), including the key 4XX-vs-5XX behavior on GET /user:

  4XX  -> purge token (logout)
  5XX/network -> keep token, state='unavailable', retry with exponential backoff (2,4,8,16s cap)
  

  It also re-exposes the window.__conduit_debug__ interface (getToken/getAuthState/getCurrentUser) used by the e2e debug helpers.

• Angular pipes → utils (src/utils/format.ts): DefaultImagePipe, DatePipe('longDate'), MarkdownPipe.

• Angular guards → route wrappers (RequireAuth / RedirectIfAuth).

• Routing: React Router mirrors the Angular routes exactly, with lazy-loaded pages and the same nested profile children:

  Path	Page
  / and /tag/:tag	Home (global/your feed + tag filter, popular tags sidebar)
  /login, /register	Auth (shared component, mode by path)
  /settings	Settings (auth-guarded)
  /editor, /editor/:slug	Editor (auth-guarded, create/edit)
  /article/:slug	Article (markdown body, comments, favorite/follow)
  /profile/:username	Profile → index = My Posts
  /profile/:username/favorites	Profile → Favorited Posts

• Styling: reuses the shared RealWorld theme (realworld/assets/theme/styles.css) verbatim. The theme scopes its sticky-footer flex rules to the Angular app-root host; src/app-shell.css re-applies the identical rules to React's #root so footer placement matches pixel-for-pixel.

Component map (Angular → React)

HeaderComponent→Header, FooterComponent→Footer, ListErrorsComponent→ListErrors, ArticleListComponent→ArticleList, ArticlePreviewComponent→ArticlePreview, ArticleMetaComponent→ArticleMeta, FavoriteButtonComponent→FavoriteButton, FollowButtonComponent→FollowButton, comment card→ArticleComment, plus the page components above.

Visual parity

Captured with Playwright/Chromium at a fixed 1280×900 viewport against both running apps (Angular :4200, React :4300). Active-nav colors and the sticky-footer position were verified to match exactly via computed styles.

Route	Angular	React
Home (/)
Article (/article/:slug)
Profile (/profile/:username)
Sign in (/login)
Settings (/settings)
Editor (/editor)

How to run

cd react-app
bun install
bun run dev      # http://localhost:4300
bun run lint     # eslint + prettier --check  (passes)
bun run build    # tsc -b + vite build         (passes)

Notes / known differences

• The React app uses its own copy of the theme CSS under react-app/src/styles.css (the Angular build pipeline consumes the submodule copy directly; Vite needs a local import). They are identical apart from the documented #root shell rules.
• Lint and production build both pass for the new app. No Angular files were modified.

Link to Devin session: https://app.devin.ai/sessions/95c531d8544047ebab71cb87f3eea49a
Requested by: @lburgers

---

Devin Review

Status	Commit
⚪ Not started	—

Run Devin Review

[devin-ai-integration]

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

• Address comments on this PR. Add '(aside)' to your comment to have me ignore it.
• Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

• Disable automatic comment, CI, and merge conflict monitoring