Spaces:
Sleeping
Sleeping
File size: 1,933 Bytes
0c591a7 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 | # Instant SWOT Agent - React Frontend
## Overview
React-based frontend for Instant SWOT Agent, providing a modern UI for SWOT analysis with real-time workflow visualization.
## Tech Stack
- **React 18** with TypeScript
- **Vite** build system
- **Tailwind CSS** + shadcn/ui components
- **TanStack Query** for data fetching
- **React Router** for routing
## Core Components
| Component | Purpose |
|-----------|---------|
| `App.tsx` | Main layout, workflow orchestration, state management |
| `ProcessFlow.tsx` | SVG-based visual workflow diagram |
| `StockSearch.tsx` | Autocomplete search with keyboard navigation |
| `ActivityLog.tsx` | Real-time log viewer with auto-scroll |
## Installation
```bash
cd frontend
npm install
```
## Development
```bash
# Start dev server (port 5173)
npm run dev
# Run tests
npm test
# Type check
npx tsc --noEmit
# Build for production
npm run build
```
## API Integration
The frontend connects to the FastAPI backend. API endpoints:
| Endpoint | Method | Purpose |
|----------|--------|---------|
| `/api/stocks/search` | GET | Stock autocomplete |
| `/analyze` | POST | Start analysis workflow |
| `/workflow/{id}/status` | GET | Workflow status polling |
| `/workflow/{id}/result` | GET | Get final results |
### Environment Variables
Create `.env` for local development:
```bash
VITE_API_URL=http://localhost:8002
```
Production builds auto-detect the API URL.
## Production Deployment
The frontend is pre-built and served from `/static/` by the FastAPI backend:
```bash
# Build production bundle
npm run build
# Copy to static directory
cp -r dist/* ../static/
```
The Dockerfile uses pre-built static files for HuggingFace Spaces deployment.
## Troubleshooting
| Issue | Solution |
|-------|----------|
| Dependencies fail | `rm -rf node_modules && npm install` |
| TypeScript errors | `npx tsc --noEmit` to check |
| Port in use | `npm run dev -- --port 3000` |
|