feat: Initialize React Infrastructure (Phase 1 Migration)

react-app/.eslintrc.json

@@ -0,0 +1,27 @@
+{
+    "extends": [
+        "eslint:recommended",
+        "plugin:@typescript-eslint/recommended",
+        "plugin:react/recommended",
+        "plugin:react-hooks/recommended"
+    ],
+    "parser": "@typescript-eslint/parser",
+    "parserOptions": {
+        "ecmaVersion": 2020,
+        "sourceType": "module",
+        "ecmaFeatures": {
+            "jsx": true
+        }
+    },
+    "settings": {
+        "react": {
+            "version": "detect"
+        }
+    },
+    "rules": {
+        "quotes": ["error", "single"],
+        "max-len": ["warn", { "code": 120 }],
+        "@typescript-eslint/no-unused-vars": ["error", { "argsIgnorePattern": "^_" }],
+        "react/react-in-jsx-scope": "off"
+    }
+}

react-app/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

react-app/README.md

@@ -0,0 +1,116 @@
+# React HN - Phase 1 Infrastructure
+
+This is the React version of the Angular2-HN application, currently in Phase 1 of migration.
+
+## Overview
+
+Phase 1 focuses on setting up the infrastructure:
+- ✅ Vite + React + TypeScript
+- ✅ React Router v6 with route structure matching Angular
+- ✅ PWA support with vite-plugin-pwa (using Workbox)
+- ✅ TypeScript configuration
+- ✅ ESLint and Prettier setup
+- ✅ Build and development scripts
+
+## Project Structure
+
+```
+react-app/
+├── public/           # Static assets (manifest, icons, favicon)
+├── src/
+│   ├── components/   # Reusable components
+│   │   └── Layout.tsx
+│   ├── pages/        # Page components
+│   │   ├── FeedPage.tsx
+│   │   ├── ItemPage.tsx
+│   │   └── UserPage.tsx
+│   ├── routes/       # Routing configuration
+│   │   └── index.tsx
+│   ├── main.tsx      # Application entry point
+│   └── index.css     # Global styles
+├── package.json
+├── tsconfig.json     # TypeScript configuration
+├── vite.config.ts    # Vite and PWA configuration
+└── README.md
+```
+
+## Routes
+
+The application includes the following routes matching the Angular version:
+
+- `/` → redirects to `/news/1`
+- `/news/:page` - News feed
+- `/newest/:page` - Newest stories
+- `/show/:page` - Show HN stories
+- `/ask/:page` - Ask HN stories
+- `/jobs/:page` - Job listings
+- `/item/:id` - Item details (lazy loaded)
+- `/user/:id` - User profile (lazy loaded)
+
+## Development
+
+### Install Dependencies
+```bash
+npm install
+```
+
+### Run Development Server
+```bash
+npm run dev
+```
+The app will be available at `http://localhost:5173`
+
+### Build for Production
+```bash
+npm run build
+```
+
+### Preview Production Build
+```bash
+npm run preview
+```
+
+### Linting
+```bash
+npm run lint
+```
+
+### Format Code
+```bash
+npm run format
+```
+
+## PWA Features
+
+The application is configured as a Progressive Web App with:
+- Service Worker for offline support
+- Web App Manifest for installability
+- Asset caching strategies (prefetch for app files, runtime caching for API calls)
+- Theme color: #b92b27
+- Standalone display mode
+
+## Technology Stack
+
+- **React 18**: UI library
+- **TypeScript**: Type safety
+- **Vite**: Build tool and dev server
+- **React Router v6**: Routing
+- **vite-plugin-pwa**: PWA support with Workbox
+- **ESLint & Prettier**: Code quality
+
+## Next Phases
+
+- **Phase 1 (Current)**: Infrastructure setup ✅
+- **Phase 2**: Component migration (FeedComponent, ItemComponent, etc.)
+- **Phase 3**: Service integration (HackerNewsAPIService)
+- **Phase 4**: Styling and themes
+- **Phase 5**: Testing and optimization
+- **Phase 6**: Final migration and deployment
+
+## Notes
+
+- This React app runs in parallel with the existing Angular app
+- The Angular app continues to work and is located in the parent directory
+- Components are currently placeholders and will be implemented in subsequent phases
+- Route structure matches Angular's app.routes.ts configuration
+- PWA configuration mirrors Angular's ngsw-config.json settings

react-app/index.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <meta name="description" content="A Hacker News client built with React, TypeScript, and Vite" />
+
+        <meta name="theme-color" content="#b92b27" />
+        <meta name="apple-mobile-web-app-capable" content="yes" />
+        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+
+        <link rel="apple-touch-icon" sizes="180x180" href="/assets/icons/apple-touch-icon.png" />
+
+        <title>React HN</title>
+    </head>
+    <body>
+        <div id="root"></div>
+        <script type="module" src="/src/main.tsx"></script>
+    </body>
+</html>