feat: Set up React project and migrate ItemComponent from Angular

[devin-ai-integration]

feat: Set up React project and migrate ItemComponent from Angular

Summary

Initializes a new React + TypeScript + Vite project in react-hn/ alongside the existing Angular app, as Phase 1 of the Angular-to-React migration. Key additions:

• Project scaffold: Vite + React 19 + TypeScript with strict settings, ESLint, and react-router-dom v6
• Router: Mirrors all Angular routes (/news/:page, /newest/:page, /show/:page, /ask/:page, /jobs/:page, /item/:id, /user/:id) with lazy loading via React.lazy/Suspense for item details and user routes
• Settings Context: React Context + useSettings hook replacing Angular's SettingsService, with localStorage persistence for openLinkInNewTab, theme, titleFontSize, listSpacing, and system dark-mode detection
• API service layer: fetchFeed, fetchItemContent, fetchUser using fetch/async-await (replacing RxJS Observables), pointed at https://node-hnapi.herokuapp.com
• Item component: Migrated from Angular's ItemComponent — conditional external/internal links, dynamic font-size/spacing from settings, target="_blank" toggle, mobile (.subtext-palm) and desktop (.subtext-laptop) layouts, formatComment utility replacing the Angular pipe
• Feed component: Basic feed list using useReducer for state, rendering Item components with data from the API

TypeScript (tsc -b) and ESLint both pass. Vite production build succeeds.

Local Testing

App verified locally at http://localhost:5173/news/1. The feed loads and renders Item components with live data from the HN API.

News feed (/news/1):

Item details placeholder (/item/:id):

Review & Testing Checklist for Human

• API endpoint liveness: The base URL https://node-hnapi.herokuapp.com was carried over from the Angular app. Heroku discontinued free dynos — verify this endpoint is still reachable or replace it with a working HN API before testing
• Global CSS leakage in Item.css: Bare selectors like p and a will apply globally, not scoped to the Item component. Consider whether CSS Modules or a scoping strategy is needed before more components are added
• Vite boilerplate cleanup: index.css, App.css, public/vite.svg, src/assets/react.svg, and the default README.md are all scaffold leftovers that may conflict with or clutter the actual app
• Run locally (cd react-hn && npm run dev) and verify the news feed renders correctly in the browser at http://localhost:5173/news/1
• Confirm the ItemDetails and User placeholder routes lazy-load without errors

Notes

• The Story TypeScript interface is intentionally a subset of the Angular model (omits comments, poll, poll_votes_count, deleted, dead) since those fields aren't needed by the Item component. They'll be added in future migration phases.
• The Settings context was split across SettingsContext.tsx (provider component) and settingsContextDef.ts (context + types) to satisfy the react-refresh/only-export-components ESLint rule.
• fetchUser has no explicit return type since the User interface hasn't been defined yet.

Link to Devin run: https://app.devin.ai/sessions/89678be280b041c5afaff1f26985312d
Requested by: @matthewguerra-cog

[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

[matthewguerra-cog]

Add a comment explaining what this is

[devin-ai-integration]

Added an explanatory comment at the top of Feed.tsx describing the component's purpose, accepted props, and its Angular origin. See commit ea17f9d.