Migrate Angular 9 Hacker News PWA to React 18 with Vite #142
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Phase 1: Project Setup & Build System - Initialize React 18 project with Vite build system - Configure ESLint for React with recommended rules - Set up Vite PWA plugin for service worker support - Update package.json with React dependencies Phase 2: Core Services Migration - Convert HackerNewsAPIService to useHackerNewsAPI hook - Convert SettingsService to React Context (SettingsContext) - Implement localStorage persistence for settings - Add system dark mode detection Phase 3: Simple Components Migration - Convert Header, Footer, Item, Comment, Loader, ErrorMessage components - Implement React functional components with hooks Phase 4: Routing System Migration - Replace Angular Router with React Router v6 - Implement lazy loading for ItemDetails and User components - Configure all routes: news, newest, show, ask, jobs, item, user Phase 5: Complex Components Migration - Convert Feed, ItemDetails, User, Settings components - Implement pagination, poll support, and comment threading Styling: - Migrate all SCSS files with theme support (default, night, amoledblack) - Implement responsive design for mobile and desktop - Move assets to public folder for Vite Co-Authored-By: Satwik Bebortha <satwik.bebortha@cognition.ai>
Author
🤖 Devin AI EngineerI'll be helping with this pull request! Here's what you should know: ✅ I will automatically:
Note: I can only respond to comments from users who have write access to this repository. ⚙️ Control Options:
|
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Migrate Angular 9 Hacker News PWA to React 18 with Vite
Summary
This PR completes a full migration of the Hacker News PWA from Angular 9 to React 18, replacing the entire build system and application architecture:
Build System: Replaced Angular CLI with Vite, including Vite PWA plugin for service worker generation.
Services → Hooks/Context:
HackerNewsAPIService→useHackerNewsAPIhook (async/await instead of RxJS Observables)SettingsService→SettingsContextwith React Context APIRouting: Replaced Angular Router with React Router v6, including lazy loading for ItemDetails and User components.
Components: All Angular components converted to React functional components with hooks (Header, Footer, Feed, Item, ItemDetails, Comment, User, Settings, Loader, ErrorMessage).
Styling: Migrated all SCSS files with three theme support (default, night, amoledblack) and responsive design.
Review & Testing Checklist for Human
This is a complete framework rewrite with no automated tests, so thorough manual testing is essential:
/news/1,/newest/1,/show/1,/ask/1,/jobs/1and verify items load correctly with pagination/item/:id- verify comments render with proper nesting and collapse/expand works/user/:id- verify user info displays correctlyRecommended test plan: Run
npm run devlocally, then systematically test each route and feature listed above. Pay special attention to edge cases like empty feeds, deleted comments, and items without URLs.Notes
https://node-hnapi.herokuapp.comis unchanged from the original Angular appLink to Devin run: https://app.devin.ai/sessions/768b36f82fee44c3846712b2c04559b1
Requested by: Satwik Bebortha (satwik.bebortha@cognition.ai) / @satwik-cog