Phase 1: Initialize React Migration - Setup and Infrastructure

[devin-ai-integration]

Phase 1: Initialize React Migration - Setup and Infrastructure

Summary

This PR initializes Phase 1 of the Angular-to-React migration for the Hacker News client. It creates a complete new React + TypeScript project in the react-app/ subdirectory with Vite, React Router, and PWA support using Workbox. The Angular app remains untouched - this sets up the foundation for future component migration.

Key Changes:

• React + Vite + TypeScript project initialized in react-app/
• React Router v6 configured with 7 routes matching Angular's routing structure (5 feed routes + 2 lazy-loaded routes)
• PWA functionality via vite-plugin-pwa with Workbox (service worker, manifest, offline support)
• Project structure created: models, services, contexts, routes, components (placeholder page components only)
• TypeScript models ported: Story, Settings, User interfaces
• Settings Context with localStorage persistence and dark mode detection
• All PWA assets copied from Angular app (icons, manifest, meta tags)

Not Included (Future Phases):

• Actual component implementation (placeholder components only)
• Styling/theming
• Tests
• Full API integration (stub service only)

Review & Testing Checklist for Human

Critical items to verify (5):

• Build and test locally: Run cd react-app && npm install && npm run build && npm run preview, open http://localhost:4173, verify service worker registers in DevTools (Application > Service Workers)
• Test all routes: Verify / redirects to /news/1, test /news/1, /newest/1, /show/1, /ask/1, /jobs/1, /item/123, /user/test all load with correct parameters
• Verify PWA manifest: Navigate to http://localhost:4173/manifest.webmanifest, check all 4 icon sizes are referenced, verify theme color is #b92b27
• Test installability: Check for PWA install prompt in Chrome (should appear if manifest + service worker work correctly)
• Review Workbox config: Compare react-app/vite.config.ts (lines 42-56) with Angular's ngsw-config.json to ensure caching strategies match

Recommended test plan:

cd react-app
npm install
npm start                # Dev server on localhost:4200
# Test routes in browser, verify they work
npm run build           # Production build
npm run preview         # Preview production build on localhost:4173
# Open DevTools > Application > Service Workers to verify registration
# Open DevTools > Application > Manifest to verify PWA manifest
# Check for install prompt or test "Install App" in Chrome menu

Notes

• ESLint rule disabled: Disabled react-refresh/only-export-components in .eslintrc.cjs because exporting hooks with their providers from the same file is a common React pattern. If this is problematic, I can split the useSettings hook into a separate file.
• TypeScript version warning: ESLint shows a warning about TypeScript 5.9.3 being newer than officially supported (<5.4.0), but it works fine. This is just a dev dependency compatibility notice.
• Placeholder components only: The routes work but display placeholder content (e.g., "News Feed - Page: 1 - This component will be implemented in Phase 2"). This is expected for Phase 1.
• Browser support: Matches Angular's .browserslistrc (> 0.5%, last 2 versions, Firefox ESR, not IE 9-11)

Link to Devin run: https://app.devin.ai/sessions/c70dbf7d06bf4ec299c2eb20a5e62be0
Requested by: Gabe Smith

Screenshots from local testing:

[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