feat: Migrate Angular Hacker News Application to React

[devin-ai-integration]

feat: Migrate Angular Hacker News app to React (Vite + TypeScript)

Summary

Adds a complete React rewrite of the Angular 9 Hacker News client in a new react-app/ directory. The existing Angular source is left untouched.

Stack: React 18 + TypeScript + Vite + React Router v6 + SCSS + vite-plugin-pwa

Key conversions:

• HackerNewsAPIService (RxJS Observables) → plain async/await fetch functions
• SettingsService (Angular injectable) → React Context (SettingsProvider / useSettings)
• Angular route data + ActivatedRoute → React Router useParams + component props
• @Input() decorators → React props
• Angular pipes (comment) → utility function (formatComment)
• Lazy-loaded modules (ItemDetailsModule, UserModule) → React.lazy() + Suspense
• All three themes (default, night, AMOLED black) preserved via the same SCSS theme mixin engine
• PWA support via vite-plugin-pwa with matching manifest config

The TypeScript build (tsc -b) and production build (vite build) both pass.

Updates since last revision

• Fixed user profile API: The Heroku API (node-hnapi.herokuapp.com/user/) returns 404 for all user requests (likely due to Heroku free tier removal). Switched fetchUser to use the official Firebase HN API (hacker-news.firebaseio.com/v0/user/) with manual timestamp-to-date conversion.
• Local testing completed: All features verified in browser — feed navigation, pagination, item details with nested comments, comment collapse/expand, user profiles, theme switching (default/night/AMOLED black), and settings panel.

Screenshots

News Feed:

Item Details with Comments:

User Profile:

Review & Testing Checklist for Human

• Verify the mixed API sources: Feed data comes from node-hnapi.herokuapp.com, but user profiles come from hacker-news.firebaseio.com. Confirm both are returning consistent data and the user profile date formatting looks correct.
• Check dangerouslySetInnerHTML usage in Comment.tsx, ItemDetails.tsx, and User.tsx. This mirrors the Angular [innerHTML] binding but is an XSS surface if API data is untrusted.
• Verify useEffect cleanup — fetch calls in Feed.tsx, ItemDetails.tsx, and User.tsx do not use AbortController, so rapid navigation could trigger state updates on unmounted components (React warning). The original Angular app handled this via Observable unsubscription.
• Test navigation & pagination across all feed types (/news, /newest, /show, /ask, /jobs), item detail pages (/item/:id), and user profiles (/user/:id).

Suggested test plan: Run cd react-app && npm install && npm run dev, then navigate through each feed type, click "More" for pagination, open a story with comments and test collapse/expand, click a username to view a profile, and toggle between all three themes in settings.

Notes

• The original Angular source is not removed — only new files are added under react-app/.
• Sass deprecation warnings appear during build (@import rules and darken()) — these are functional today but will break in Dart Sass 3.0.0.
• No eslint.config.js was created, so npm run lint may not work as expected.

Link to Devin run: https://app.devin.ai/sessions/d00d7e29933a47f09b922ef6df57c0c2
Requested by: @eashansinha

[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 and CI monitoring