Skip to content

Migrate Angular 2 HN application to React #141

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
devin-ai-integration wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Migrate Angular 2 HN application to React #141

devin-ai-integration wants to merge 1 commit into from

Conversation

@devin-ai-integration
Copy link

@devin-ai-integration devin-ai-integration bot commented Dec 16, 2025 •
edited
Loading

Migrate Angular 2 HN application to React

Summary

This PR performs a complete framework migration of the Hacker News client from Angular 9 to React 18. The migration includes:

  • Build System: Replaced Angular CLI with Vite for faster development and builds
  • Routing: Migrated from Angular Router to React Router v6 with lazy loading via React.lazy()
  • State Management: Converted Angular services to React patterns:
    • HackerNewsAPIService → useHackerNewsAPI custom hook
    • SettingsService → useSettings hook with Context API
  • Components: Rewrote all Angular components as React functional components (Header, Footer, Settings, Feed, Item, ItemDetails, Comment, User, Loader, ErrorMessage)
  • PWA Features: Preserved service worker and manifest using vite-plugin-pwa with Workbox
  • Styling: Maintained SCSS with theme support (default, night, amoledblack) and responsive design

The API endpoint (https://node-hnapi.herokuapp.com) and all business logic remain unchanged.

Local Testing Performed

The app was tested locally with the following results:

  • Main news feed loads correctly at /news/1
  • Navigation between feed types works (tested newest feed)
  • Settings panel opens correctly
  • Theme switching works (tested Night theme)
  • Item details page with comments loads and displays nested comments
  • Comment collapse/expand buttons are present and functional

Potential Issue Found: User profile page showed error "Could not load user gregsadetsky" during testing. This may be an API issue or a bug in the User component - please verify.

Local testing recording

View original video (rec-d4d95a8ecfec4fffb1fb2ad87a1fe578-edited.mp4)

Review & Testing Checklist for Human

This is a high-risk PR due to the complete framework rewrite. Please verify:

  • Test user profiles - click on a username to view their profile (error was observed during local testing)
  • Test settings persistence - change settings, refresh the page, and verify they persist
  • Test all feed types - verify news, newest, show, ask, and jobs feeds all load with pagination
  • Test PWA features - verify the app can be installed and works offline for previously visited pages
  • Test responsive design - verify mobile and desktop layouts render correctly

Recommended Test Plan

  1. Run npm install && npm start to start the dev server
  2. Navigate through all feed types and verify data loads
  3. Click on a username to test user profile (verify if the error I saw is reproducible)
  4. Open an item with comments and test comment collapse/expand
  5. Toggle all settings and refresh to verify persistence
  6. Test on mobile viewport sizes using browser dev tools

Notes

  • Build passes (npm run build) and CI checks (Snyk security/license) have passed
  • All Angular-specific files (angular.json, e2e tests, karma config, etc.) have been removed
  • SCSS deprecation warnings appear during build (using @import instead of @use) but do not affect functionality
  • User profile error observed during testing needs investigation

Link to Devin run: https://app.devin.ai/sessions/3a7bf1880bde4b67b287d3259821330c
Requested by: Eashan Sinha (eashan.sinha@cognition.ai) / @eashansinha-cog

@devin-ai-integration @eashansinha-cog
Migrate Angular 2 HN application to React
657fee3 
- Replace Angular with React 18 and React Router v6
- Use Vite as build system instead of Angular CLI
- Convert Angular services to React custom hooks:
  - HackerNewsAPIService -> useHackerNewsAPI hook
  - SettingsService -> useSettings hook with Context API
- Convert all Angular components to React functional components:
  - Header, Footer, Settings (core)
  - Feed, Item (feeds)
  - ItemDetails, Comment (item-details)
  - User (user)
  - Loader, ErrorMessage (shared)
- Implement lazy loading with React.lazy() for code-splitting
- Preserve PWA features with vite-plugin-pwa and Workbox
- Maintain all theme support (default, night, amoledblack)
- Keep responsive design with SCSS media queries
- Preserve localStorage persistence for settings

Co-Authored-By: Eashan Sinha <eashan.sinha@cognition.ai>
@devin-ai-integration
Copy link
Author

devin-ai-integration bot commented Dec 16, 2025

🤖 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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant