frontend/README.md

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

# 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):

# API Base URL
VITE_API_BASE_URL=http://localhost:8000

Building for Production

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