Migrate Angular 9 Hacker News client to React with TypeScript

[devin-ai-integration]

Migrate Angular 9 Hacker News client to React with TypeScript

Summary

This PR completely migrates the Hacker News PWA client from Angular 9 to React 18 with TypeScript. The migration includes:

• Build tooling: Replaced Angular CLI with Vite for faster development and builds
• State management: Converted RxJS Observables to React hooks (useFeed, useItemDetails, useUser)
• Routing: Migrated from Angular Router to React Router v6 with lazy loading for ItemDetails and User pages
• Settings: Converted Angular service to React Context (SettingsContext) with localStorage persistence
• PWA: Replaced @angular/service-worker with vite-plugin-pwa and Workbox
• Styling: Kept SCSS with CSS variables for theming (default, night, amoledblack)

All original features are preserved: 5 feed types, pagination, nested comments, user profiles, theme switching, and offline support.

Updates since last revision

• Fixed logo positioning bug where the HN logo was appearing at the bottom left of the page instead of in the header

Review & Testing Checklist for Human

This is a complete framework rewrite with no automated tests. Manual verification is critical.

• Test all feed types: Navigate to /news/1, /newest/1, /show/1, /ask/1, /jobs/1 and verify items load correctly
• Test pagination: Click "More" to go to page 2, verify "Prev" appears and works
• Test item details: Click on a story with comments, verify comments render with proper nesting and collapse/expand works
• Test user profiles: Click on a username, verify profile loads with karma and creation date
• Test settings persistence: Open settings, change theme/font size/spacing, refresh page, verify settings persist
• Test theme switching: Verify all 3 themes (default, night, black) apply correctly
• Test responsive design: Verify mobile layout works (header fixed, navigation visible)
• Test PWA: Build for production (npm run build), serve with npm run preview, verify service worker registers and app is installable

Recommended Test Plan

1. Run npm install && npm run dev to start development server
2. Open http://localhost:5173 in browser
3. Walk through each feed type and verify data loads
4. Test a story with many comments to verify nested comment rendering
5. Test settings panel and verify localStorage persistence across refreshes
6. Build production (npm run build) and test PWA functionality with npm run preview

Screenshots

News feed with logo correctly positioned in header:

Item details page:

Notes

• The external API (https://node-hnapi.herokuapp.com) must be accessible for the app to work
• Old Angular e2e tests were removed; no new tests were added
• SCSS uses deprecated @import syntax (warnings during build) but functions correctly
• Google Analytics integration preserved from original app

Link to Devin run: https://app.devin.ai/sessions/90e4725ba54243f7b24026ae5d035268
Requested by: Eashan Sinha (@eashansinha-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