feat: Migrate Angular 2 Hacker News client to React

[devin-ai-integration]

feat: Migrate Angular 2 Hacker News client to React

Summary

This PR creates a new React application that replicates the functionality of the existing Angular 9 Hacker News PWA client. The React app is located in the react-app/ directory alongside the original Angular app.

Key changes include:

• New React app with TypeScript and Vite as the build tool
• React Router for routing (news, newest, show, ask, jobs, item details, user profiles)
• Custom React hooks (useFeed, useItem, useUser) replacing the Angular HackerNewsAPIService
• React Context (SettingsContext) replacing the Angular SettingsService with localStorage persistence
• All components migrated: Feed, Item, ItemDetails, Comment (with recursive rendering), UserProfile, Header, Footer, Settings, Loader, ErrorMessage
• SCSS styles and theme system (default, night, amoledblack) migrated
• PWA features configured via vite-plugin-pwa with Workbox for service worker and caching

Updates since last revision

• Fixed build error: Removed unfetch dependency and switched to native browser fetch API (the unfetch package had ESM compatibility issues with Vite)
• Local testing completed: Verified the app works locally with visual testing:
  • Feed list displays correctly with numbered items, titles, points, usernames, and comment counts
  • Item details page renders nested/recursive comments correctly
  • Theme switching works (tested Default and Night themes)

View original video (rec-4b0c32007a484194a356af378bd823bf-edited.mp4)

Review & Testing Checklist for Human

• Run the React app locally (cd react-app && npm install && npm run dev) and verify it loads without errors
• Test all feed types (news, newest, show, ask, jobs) - verify pagination works
• Test item details page - verify comments render correctly including nested/recursive comments
• Test user profile page - verify user data displays correctly
• Test theme switching in settings - verify all three themes (default, night, amoledblack) apply correctly
• Test settings persistence - change settings, refresh page, verify they persist
• Verify API calls - the app uses https://node-hnapi.herokuapp.com which may have availability issues
• Test responsive design - verify mobile layout works correctly
• Compare with original Angular app - run both apps side by side to verify feature parity

Recommended test plan: Run both the Angular app (npm start in root) and React app (npm run dev in react-app/) simultaneously and compare functionality across all pages.

Notes

• The React app is a separate application in the react-app/ directory - the original Angular app remains unchanged
• TypeScript is configured with strict mode enabled
• SCSS shows deprecation warnings for @import rules (will be removed in Dart Sass 3.0.0) - these are warnings only and do not affect functionality
• PWA installation should be tested in production build (npm run build && npm run preview)
• The package-lock.json may still reference unfetch from initial install, but it's no longer used in the code

Link to Devin run: https://app.devin.ai/sessions/628f8c3e14a64aae82d61be7ff63ea6f
Requested by: Eashan Sinha (eashan.sinha@cognition.ai) / @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