Spaces:
Sleeping
Sleeping
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
cd frontend
npm install
Development
# 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:
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:
# 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 |