Skip to content

chore(angular-react): Migrate Conduit to React + TypeScript + Vite (parallel rewrite)#40

Open
devin-ai-integration[bot] wants to merge 4 commits into
mainfrom
devin/angular-to-react-conduit-4815
Open

chore(angular-react): Migrate Conduit to React + TypeScript + Vite (parallel rewrite)#40
devin-ai-integration[bot] wants to merge 4 commits into
mainfrom
devin/angular-to-react-conduit-4815

Conversation

@devin-ai-integration

@devin-ai-integration devin-ai-integration Bot commented Jun 22, 2026

Copy link
Copy Markdown

Summary

Parallel React + TypeScript + Vite rewrite of the Angular Conduit app, living entirely in a new react-app/ subdirectory. The Angular source under src/ is untouched — this adds a second, independent frontend that talks to the same RealWorld API (https://api.realworld.show/api) with identical data contracts, routes/URLs, and styling.

Why: groundwork to evaluate/move off Angular without disrupting the existing app or its e2e/CI.

What was ported (1:1, no behavior changes)

  • Core / auth — Angular interceptors + UserService collapse into a small fetch wrapper + an AuthProvider context:
    • apiClient prepends the API root, injects Authorization: Token <jwt> (token in localStorage['jwtToken']), and globally purges auth on a 401 for any endpoint except /user (the old errorInterceptor).
    • AuthContext reproduces the auth state machine loading → authenticated | unauthenticated | unavailable, including the startup getCurrentUser() initializer, 4XX→logout vs 5XX→retry distinction, and exponential backoff (2,4,8,16,16s).
    • window.__conduit_debug__ is re-exposed for the e2e debug helpers.
  • Services / modelsarticles, comments, tags, profile, user and all interfaces (User, Profile, Article, Comment, ArticleListConfig, ...).
  • Routing — same URLs via React Router (/, /tag/:tag, /login, /register, /settings, /profile/:username (+ /favorites nested), /editor, /editor/:slug, /article/:slug), with ?feed=following / ?page=N query params and route guards.
  • Components / pages — Header, Footer, ListErrors, ArticleList (pagination), ArticlePreview, ArticleMeta, FollowButton, FavoriteButton, ArticleComment; Home, Auth, Article, Editor, Profile (+ Articles/Favorites), Settings.
  • Pipes → utilsMarkdownPipemarked + DOMPurify; DefaultImagePipedefaultImage(); Angular date pipes → Intl.DateTimeFormat.
  • Styling/assets — copied RealWorld styles.css, conduit-logo.svg, default-avatar.svg into react-app/. (Original app is not a PWA — nothing to port there.)

Lifecycle mapping, e.g. the ArticleList query:

ngOnInit + @Input changes  ->  useEffect([JSON.stringify(config), page, limit])
@Output pageChange         ->  props.onPageChange(page)

Repo-level change

  • Added a root .prettierignore (react-app/dist, react-app/package-lock.json, node_modules) so the existing format:check CI job ignores generated React output. All committed react-app sources are Prettier-clean.

Verification

  • cd react-app && npm run build0 TypeScript errors; npm run lint → 0 errors (1 non-blocking react-refresh warning); repo bun run format:check passes.
  • Manually exercised against the live API on localhost:4200: register/login/logout, create article (markdown + tags), comment, favorite (count updates), follow, tag filter, profile tabs, settings prefill + update + error display.

Home
Article with rendered markdown
Walkthrough

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


Devin Review

Status Commit
⚪ Not started

Run Devin Review

Open in Devin Review (Staging)

devin-ai-integration Bot and others added 4 commits June 22, 2026 09:44
Co-Authored-By: Lukas Burger <lukaskburger@gmail.com>
Co-Authored-By: Lukas Burger <lukaskburger@gmail.com>
Co-Authored-By: Lukas Burger <lukaskburger@gmail.com>
Co-Authored-By: Lukas Burger <lukaskburger@gmail.com>
@devin-ai-integration

Copy link
Copy Markdown
Author

🤖 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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

0 participants