feat: Begin Angular to React Migration (Steps 1-3)

[devin-ai-integration]

feat: Begin Angular to React Migration (Steps 1-3)

Summary

This PR implements the first three steps of migrating the Angular 2 Hacker News client to React:

Step 1 - Architecture Documentation: Added comprehensive documentation (docs/ARCHITECTURE.md) mapping out the existing Angular app structure including components, services, routing, and data models.

Step 2 - React Project Setup: Created a new React + TypeScript project in react-app/ using Vite with React Router and React Query installed.

Step 3 - Data Layer Migration:

• Converted HackerNewsAPIService from RxJS Observables to Promises (react-app/src/services/api.ts)
• Created React Query hooks for data fetching (react-app/src/hooks/useHackerNews.ts)
• Migrated TypeScript interfaces from Angular classes to React-friendly interfaces (react-app/src/types/index.ts)

The React app includes placeholder components with routing structure matching the original Angular routes. UI component implementation will follow in subsequent migration steps.

Review & Testing Checklist for Human

• Verify API service works: Test that fetchFeed, fetchItemContent, and fetchUser successfully call https://node-hnapi.herokuapp.com and return expected data
• Review poll fetching logic: The fetchItemContent function calculates poll option IDs as story.id + i + 1 - verify this matches the original Angular behavior
• Test React app locally: Run cd react-app && npm install && npm run dev to verify the app builds and runs
• Verify TypeScript types match API: The types were copied from Angular - confirm they accurately represent the API response structure

Recommended test plan:

1. cd react-app && npm install && npm run dev
2. Open browser console and test API calls manually:

   fetch('https://node-hnapi.herokuapp.com/news?page=1').then(r => r.json()).then(console.log)

3. Verify the response structure matches the Story interface

Notes

• The crated_time typo in the User interface is intentional - preserved from the original API/Angular code
• UI components are placeholders only - full component migration is planned for subsequent steps
• Using React 19, React Router 7, and React Query 5 (latest versions)

Link to Devin run: https://app.devin.ai/sessions/dbe96ce8e425463d91b2d37d8eb06cf4
Requested by: piyush@cognition.ai

[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