feat: Implement Phase 2 Frontend basic structure
Frontend Setup:
- Vite + React 18 + TypeScript configuration
- Material-UI v7 integration
- React Query for data fetching
- Zustand for state management
- React Router for routing
Project Configuration:
- package.json with all dependencies (React, MUI, TanStack Query, Zustand, etc.)
- tsconfig.json with path aliases (@/components, @/pages, etc.)
- vite.config.ts with dev server and proxy settings
- Dockerfile and Dockerfile.dev for production and development
- nginx.conf for production deployment
- .env and .gitignore files
- docker-compose.yml for local development
TypeScript Types:
- Complete type definitions for all API models
- User, Keyword, Pipeline, Application types
- Monitoring and system status types
- API response and pagination types
API Client Implementation:
- axios client with interceptors
- Token refresh logic
- Error handling
- Auto token injection
- Complete API service functions:
* users.ts (11 endpoints)
* keywords.ts (8 endpoints)
* pipelines.ts (11 endpoints)
* applications.ts (7 endpoints)
* monitoring.ts (8 endpoints)
State Management:
- authStore with Zustand
- Login/logout functionality
- Token persistence
- Current user management
Pages Implemented:
- Login page with MUI components
- Dashboard page with basic layout
- App.tsx with protected routes
Docker Configuration:
- docker-compose.yml for backend + frontend
- Dockerfile for production build
- Dockerfile.dev for development hot reload
Files Created: 23 files
- Frontend structure: src/{api,pages,stores,types}
- Configuration files: 8 files
- Docker files: 3 files
Next Steps:
- Test frontend in Docker environment
- Implement sidebar navigation
- Create full management pages (Keywords, Pipelines, Users, etc.)
- Connect to backend API and test authentication
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
39
services/news-engine-console/frontend/package.json
Normal file
39
services/news-engine-console/frontend/package.json
Normal file
@ -0,0 +1,39 @@
|
||||
{
|
||||
"name": "news-engine-console-frontend",
|
||||
"version": "1.0.0",
|
||||
"description": "News Engine Console - Frontend (React + TypeScript + MUI v7)",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "tsc && vite build",
|
||||
"preview": "vite preview",
|
||||
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
|
||||
"type-check": "tsc --noEmit"
|
||||
},
|
||||
"dependencies": {
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1",
|
||||
"react-router-dom": "^6.26.2",
|
||||
"@mui/material": "^6.1.3",
|
||||
"@mui/icons-material": "^6.1.3",
|
||||
"@emotion/react": "^11.13.3",
|
||||
"@emotion/styled": "^11.13.0",
|
||||
"@tanstack/react-query": "^5.56.2",
|
||||
"axios": "^1.7.7",
|
||||
"recharts": "^2.12.7",
|
||||
"date-fns": "^4.1.0",
|
||||
"zustand": "^5.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^18.3.10",
|
||||
"@types/react-dom": "^18.3.0",
|
||||
"@typescript-eslint/eslint-plugin": "^8.8.0",
|
||||
"@typescript-eslint/parser": "^8.8.0",
|
||||
"@vitejs/plugin-react": "^4.3.2",
|
||||
"eslint": "^9.11.1",
|
||||
"eslint-plugin-react-hooks": "^4.6.2",
|
||||
"eslint-plugin-react-refresh": "^0.4.12",
|
||||
"typescript": "^5.6.2",
|
||||
"vite": "^5.4.8"
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user