Spaces:
Running
Running
File size: 2,993 Bytes
2857363 |
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 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 |
# Sentiment Analysis Frontend
A modern React frontend for the Sentiment Analysis API, featuring real-time sentiment analysis, history tracking, and cache performance monitoring.
## Features
- **Real-time Sentiment Analysis**: Analyze text sentiment instantly
- **Visual Feedback**: Beautiful emoji-based sentiment indicators
- **Confidence Scores**: Progress bars showing prediction confidence
- **Analysis History**: Browse and filter previous analyses
- **Cache Statistics**: Monitor Redis cache performance
- **Responsive Design**: Works on all devices (320px+)
- **Accessibility**: WCAG AA compliant
## Tech Stack
- **React 19** - UI library
- **TypeScript** - Type safety
- **Vite** - Build tool
- **Tailwind CSS 4** - Styling
- **Axios** - HTTP client
- **Lucide React** - Icons
## Getting Started
### Prerequisites
- Node.js 18+
- The Sentiment API backend running (see main README)
### Installation
```bash
# Install dependencies
npm install
# Start development server
npm run dev
```
The app will be available at `http://localhost:5173`
### Environment Variables
Create a `.env` file (copy from `.env.example`):
```bash
# API Base URL
VITE_API_BASE_URL=http://localhost:8000
```
### Building for Production
```bash
npm run build
```
The built files will be in the `dist/` directory.
## Project Structure
```
src/
├── components/ # React components
│ ├── Header.tsx # App header
│ ├── Footer.tsx # App footer
│ ├── SentimentAnalyzer.tsx # Main input/analysis
│ ├── ResultCard.tsx # Result display
│ ├── HistoryList.tsx # Analysis history
│ └── CacheStats.tsx # Cache dashboard
├── hooks/ # Custom React hooks
│ ├── useSentimentAnalysis.ts
│ ├── useHistory.ts
│ └── useCacheStats.ts
├── services/ # API services
│ └── api.ts # Axios instance & endpoints
├── types/ # TypeScript types
│ └── index.ts
├── utils/ # Utility functions
│ ├── formatters.ts # Date/number formatting
│ └── validators.ts # Input validation
├── App.tsx # Root component
├── main.tsx # Entry point
└── index.css # Global styles
```
## Deployment
### GitHub Pages
The frontend is configured for GitHub Pages deployment. Push to `main` branch and the GitHub Actions workflow will automatically build and deploy.
Live URL: `https://simplyarfan.github.io/Sentiment-API/`
### Other Platforms
- **Vercel**: Connect your GitHub repo
- **Netlify**: Connect your GitHub repo
- **Manual**: Run `npm run build` and upload `dist/` folder
## API Endpoints Used
| Endpoint | Method | Description |
|----------|--------|-------------|
| `/analyze` | POST | Analyze text sentiment |
| `/history` | GET | Get analysis history |
| `/cache/stats` | GET | Get cache statistics |
## License
MIT
|