Phase 1: Angular to React Migration - React Project Structure Setup

[devin-ai-integration]

Phase 1: Angular to React Migration - React Project Structure Setup

Summary

This PR implements Phase 1 of the Angular to React migration by creating a new React project structure that maintains compatibility with the existing Angular build and deployment processes. The React project is set up as a parallel implementation using Vite + TypeScript, with routing structure that matches the Angular version.

Key Changes:

• Created new React project using Vite with TypeScript template
• Replaced Angular dependencies with React equivalents (React Router, etc.)
• Configured build output to match Angular path (dist/angular-hnpwa)
• Set up basic routing structure matching Angular routes
• Added comprehensive documentation for the migration process

Important: This is Phase 1 only - actual Angular components have NOT been migrated yet. This PR establishes the foundation for future component migration phases.

Review & Testing Checklist for Human

• Build output verification: Run npm run build in react-hnpwa/ and verify output goes to dist/angular-hnpwa/
• Development server: Run npm start in react-hnpwa/ and verify it runs on port 4200 with working navigation
• Routing compatibility: Verify the React routes match the Angular routes exactly (check src/App.tsx vs src/app/app.routes.ts)
• Package.json scripts: Test that all scripts work correctly (start, build, lint, preview)
• Project structure: Review folder structure in react-hnpwa/src/components/ to ensure it's suitable for future component migration

Recommended Test Plan:

1. Navigate to react-hnpwa/ directory
2. Run npm install and npm start
3. Test navigation between different routes (news, newest, show, ask, jobs)
4. Run npm run build and verify build artifacts in ../dist/angular-hnpwa/
5. Compare routing structure with original Angular implementation

---

Diagram

%%{ init : { "theme" : "default" }}%%
graph TB
    subgraph "Angular Project (Original)"
        A1["src/app/app.routes.ts"]:::context
        A2["angular.json<br/>(build config)"]:::context
        A3["package.json<br/>(Angular deps)"]:::context
    end
    
    subgraph "React Project (New)"
        R1["react-hnpwa/src/App.tsx<br/>(React routing)"]:::major-edit
        R2["react-hnpwa/vite.config.ts<br/>(build config)"]:::major-edit
        R3["react-hnpwa/package.json<br/>(React deps)"]:::major-edit
        R4["react-hnpwa/src/main.tsx<br/>(React entry)"]:::major-edit
        R5["react-hnpwa/README.md<br/>(documentation)"]:::major-edit
    end
    
    subgraph "Build Output"
        B1["dist/angular-hnpwa/"]:::context
    end
    
    A1 -.->|"route structure<br/>compatibility"| R1
    A2 -.->|"same output path"| R2
    R2 -->|"builds to"| B1
    A2 -->|"builds to"| B1
    
    subgraph Legend
        L1[Major Edit]:::major-edit
        L2[Minor Edit]:::minor-edit
        L3[Context/No Edit]:::context
    end
    
    classDef major-edit fill:#90EE90
    classDef minor-edit fill:#87CEEB
    classDef context fill:#FFFFFF

Loading

Notes

• This PR was created by Devin AI as requested by piyush@cognition.ai
• Link to Devin run: https://app.devin.ai/sessions/3f98afee450543c1be30187d74bb64f4
• The React project maintains the same development port (4200) and build output path for deployment compatibility
• Future phases will involve migrating actual Angular components, services, and PWA features
• The project structure is designed to accommodate the existing Angular component organization (feeds, item-details, user, core, shared)

[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