Skip to content

Conversation

@devin-ai-integration
Copy link

feat: Add Phase 1 React infrastructure for Angular to React migration

Summary

This PR adds the complete React + TypeScript project infrastructure for Phase 1 of the Angular to React migration. The new React project is located in the react-migration/ subdirectory and includes:

  • React 18.3 + TypeScript + Vite 6.4 - Modern build tooling with fast HMR
  • React Router v6 - All 7 routes from the Angular app (5 feed routes + 2 lazy-loaded routes)
  • PWA Support - Vite PWA plugin with Workbox for offline capabilities and service worker
  • Environment Configuration - .env.development and .env.production files matching Angular's pattern
  • Build Scripts - npm scripts matching Angular's patterns (start, build:dev, build:prod)
  • Placeholder Components - Feed, ItemDetails, and UserProfile components showing route info (no real functionality yet)
  • UI Library - Pre-configured with Tailwind CSS and 65+ shadcn/ui components
  • Comprehensive README - Full documentation of the setup and Phase 1 deliverables

The React project runs alongside the existing Angular app during the migration process. No Angular code was modified - this only adds new files in the react-migration/ directory.

Review & Testing Checklist for Human

This PR adds ~16k lines of code (mostly pre-configured UI components). The routing setup is critical and needs thorough testing:

  • Install dependencies and run dev server - cd react-migration && npm install && npm run dev - Verify the app starts without errors
  • Test all feed routes - Navigate to /news/1, /newest/1, /show/1, /ask/1, /jobs/1 and verify each route renders correctly
  • Test lazy loading - Navigate to /item/123 and /user/testuser and verify these routes load (check DevTools Network tab for separate chunks)
  • Build for production - Run npm run build and verify:
    • TypeScript compilation succeeds
    • Service worker files are generated (dist/sw.js, dist/workbox-*.js)
    • Lazy-loaded chunks are created (check dist/assets/ for separate item/user JS files)
  • Verify environment config - Check that the app shows "Development Mode" in the navbar when running npm run dev and would show "Production Mode" after npm run build
  • Consider directory location - Is react-migration/ the right place for this? Should it be at the repo root or elsewhere?

Notes

What's NOT included (expected for Phase 2):

  • No Hacker News API integration yet
  • No real data fetching or state management
  • Components are placeholders that just display route parameters
  • No tests yet (test script is a placeholder)

Dependencies:

  • The project includes 65+ shadcn/ui components, but only basic ones are used currently
  • All dependencies were installed without vulnerabilities
  • Total project size without node_modules: ~121KB

Session Info:

- Initialize React + TypeScript project with Vite build tool
- Configure React Router v6 with all routes from Angular app
  - Feed routes: /news/:page, /newest/:page, /show/:page, /ask/:page, /jobs/:page
  - Lazy-loaded routes: /item/:id, /user/:id
- Set up PWA support with Vite PWA plugin and Workbox
- Configure environment files (.env.development, .env.production)
- Match Angular build script patterns (start, build:dev, build:prod)
- Create placeholder page components ready for component migration
- Add comprehensive README with project structure and Phase 1 checklist

This establishes the foundation for Phase 2 component migration.
The React project is in react-migration/ subdirectory to run alongside
the existing Angular app during the migration process.

Co-Authored-By: Gabe Smith <[email protected]>
@devin-ai-integration
Copy link
Author

🤖 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

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant