Spaces:
Running
Running
| # 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 | |