Add React frontend for Sentiment Analysis API

Features:
- Real-time sentiment analysis with visual feedback
- Confidence score progress bars
- Analysis history with filtering
- Cache performance dashboard
- Responsive design (mobile-first)
- GitHub Pages deployment workflow

Tech stack:
- React 19 + TypeScript
- Vite build tool
- Tailwind CSS 4
- Axios for API calls
- Lucide React icons

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

.github/workflows/deploy-frontend.yml

@@ -0,0 +1,67 @@
+# GitHub Actions Workflow for Frontend Deployment to GitHub Pages
+# Automatically deploys the React frontend when changes are pushed to main
+
+name: Deploy Frontend to GitHub Pages
+
+on:
+  push:
+    branches: [main]
+    paths:
+      - 'frontend/**'
+      - '.github/workflows/deploy-frontend.yml'
+  workflow_dispatch: # Allow manual deployment
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow only one concurrent deployment
+concurrency:
+  group: 'pages'
+  cancel-in-progress: true
+
+jobs:
+  build:
+    name: Build Frontend
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'npm'
+          cache-dependency-path: frontend/package-lock.json
+
+      - name: Install dependencies
+        working-directory: frontend
+        run: npm ci
+
+      - name: Build project
+        working-directory: frontend
+        run: npm run build
+        env:
+          VITE_API_BASE_URL: ${{ vars.VITE_API_BASE_URL || 'http://localhost:8000' }}
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: frontend/dist
+
+  deploy:
+    name: Deploy to GitHub Pages
+    needs: build
+    runs-on: ubuntu-latest
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

docs/Sentiment-Analysis-Frontend-PRD.md

@@ -0,0 +1,883 @@
+# Product Requirements Document (PRD)
+# Sentiment Analysis Frontend Application
+
+**Version:** 1.0  
+**Date:** December 11, 2025  
+**Author:** Syed Arfan Hussain  
+**Status:** Draft → Approved
+
+---
+
+## 1. Executive Summary
+
+### 1.1 Product Overview
+A modern, responsive web frontend that provides an intuitive interface for the Sentiment Analysis API. The application will feature real-time sentiment analysis with visual feedback, analysis history, and cache statistics monitoring.
+
+### 1.2 Goals
+- **Primary Goal**: Create a production-ready, user-friendly interface that showcases the Sentiment API's capabilities
+- **Secondary Goals**: 
+  - Demonstrate frontend development skills (React, TypeScript, modern CSS)
+  - Provide real-time visual feedback for sentiment analysis
+  - Display cache performance metrics in an engaging way
+  - Serve as a portfolio piece with professional UX/UI design
+
+### 1.3 Success Metrics
+- Page load time < 2 seconds
+- Sentiment analysis response time < 100ms (cached) / < 2s (uncached)
+- Mobile-responsive on all devices (320px+)
+- Accessibility score (Lighthouse) > 90
+- Zero console errors in production
+
+---
+
+## 2. Target Audience
+
+### 2.1 Primary Users
+- **Technical Recruiters**: Evaluating full-stack capabilities
+- **Potential Employers**: Assessing frontend skills and design sensibility
+- **Fellow Developers**: Reviewing code quality and architecture
+- **End Users**: Testing sentiment analysis for personal/business text
+
+### 2.2 User Personas
+
+**Persona 1: Sarah - Technical Recruiter**
+- Needs: Quick understanding of capabilities, professional appearance
+- Goals: Assess technical skills within 2 minutes
+- Pain Points: Poorly designed demos that don't work on mobile
+
+**Persona 2: Mike - Product Manager**
+- Needs: Test sentiment analysis with real business text
+- Goals: Evaluate accuracy and speed for potential use case
+- Pain Points: Unclear confidence scores, no historical data
+
+**Persona 3: Alex - Fellow Developer**
+- Needs: Inspect code quality, architecture decisions
+- Goals: Learn from implementation patterns
+- Pain Points: Overly complex or poorly documented code
+
+---
+
+## 3. Product Features
+
+### 3.1 Feature Priority Matrix
+
+| Feature | Priority | Complexity | Value | Version |
+|---------|----------|------------|-------|---------|
+| Sentiment Analysis Input | P0 | Low | High | MVP |
+| Real-time Results Display | P0 | Medium | High | MVP |
+| Visual Sentiment Indicator | P0 | Medium | High | MVP |
+| Analysis History View | P0 | Medium | High | MVP |
+| Cache Statistics Dashboard | P1 | Medium | Medium | MVP |
+| Dark/Light Mode Toggle | P1 | Low | Medium | V1.1 |
+| Export Analysis Data | P2 | Medium | Low | V1.2 |
+| Batch Analysis Upload | P2 | High | Medium | V2.0 |
+
+---
+
+## 4. Feature Specifications
+
+### 4.1 Sentiment Analysis Input (P0)
+
+**Description**: Primary interface for users to input text for sentiment analysis.
+
+**Requirements**:
+- **Text Input Field**:
+  - Multi-line textarea (min height: 120px, auto-expand to 400px)
+  - Character counter (0/5000 characters)
+  - Real-time validation with visual feedback
+  - Placeholder text: "Type or paste your text here to analyze sentiment..."
+  
+- **Validation Rules**:
+  - Minimum: 3 characters
+  - Maximum: 5000 characters
+  - Error messages: Clear, inline, non-blocking
+  
+- **Sample Text Buttons**:
+  - "Try Positive Example" → Pre-fills positive text
+  - "Try Negative Example" → Pre-fills negative text
+  - "Clear" → Resets input field
+
+- **Analyze Button**:
+  - Primary action button (prominent, colorful)
+  - Disabled state when input is invalid
+  - Loading state with spinner during API call
+  - Keyboard shortcut: Ctrl/Cmd + Enter
+
+**User Flow**:
+```
+User lands → Sees input field → Types/pastes text → 
+Character count updates → Button becomes active → 
+Clicks "Analyze" → Loading spinner → Results appear
+```
+
+**Edge Cases**:
+- Empty input: Button disabled, gentle prompt shown
+- Network error: Error message with retry button
+- API timeout: "Taking longer than usual" message after 3s
+- Very long text: Auto-scroll to results after submission
+
+---
+
+### 4.2 Real-time Results Display (P0)
+
+**Description**: Displays sentiment analysis results with confidence scores and metadata.
+
+**Requirements**:
+- **Result Card Layout**:
+  - Large sentiment badge (POSITIVE/NEGATIVE)
+  - Confidence score (percentage with progress bar)
+  - Processing time (with cache hit/miss indicator)
+  - Timestamp of analysis
+  - Original text snippet (first 100 chars)
+
+- **Visual Design**:
+  - POSITIVE: Green color scheme (#81c784)
+  - NEGATIVE: Red color scheme (#e57373)
+  - Card shadow and subtle animation on appearance
+  - Responsive: stacks on mobile, side-by-side on desktop
+
+- **Confidence Visualization**:
+  - Progress bar (0-100%)
+  - Color gradient based on confidence level
+  - Numerical percentage displayed
+  - "High confidence" / "Medium confidence" label
+
+- **Performance Metrics**:
+  - Processing time in milliseconds
+  - Cache status: "⚡ Cached" (green) or "🔄 Processed" (blue)
+  - Cache hit: Show time savings vs. uncached
+
+**API Response Handling**:
+```typescript
+interface SentimentResult {
+  text: string;
+  sentiment: 'POSITIVE' | 'NEGATIVE';
+  confidence: number;  // 0.0 - 1.0
+  processing_time_ms: number;
+  cached: boolean;
+  created_at: string;
+}
+```
+
+**Animation**:
+- Fade-in animation (300ms)
+- Confidence bar fills from 0 to actual value
+- Smooth scroll to results after analysis
+
+---
+
+### 4.3 Visual Sentiment Indicator (P0)
+
+**Description**: Large, eye-catching visual representation of sentiment result.
+
+**Requirements**:
+- **Design Options** (choose one):
+  - **Option A**: Emoji + Badge
+    - 😊 for POSITIVE (green background)
+    - 😞 for NEGATIVE (red background)
+    - Large size (80px) with subtle bounce animation
+  
+  - **Option B**: Gradient Card
+    - Full-width card with gradient background
+    - Green gradient for POSITIVE
+    - Red gradient for NEGATIVE
+    - White text overlaid
+  
+  - **Option C**: Meter/Gauge
+    - Semi-circular gauge showing confidence
+    - Needle points to POSITIVE or NEGATIVE
+    - More sophisticated, dashboard-style
+
+**Recommendation**: Start with Option A (emoji + badge) for MVP, add Option C in V1.1
+
+**Accessibility**:
+- Color is not the only indicator (text + icon)
+- ARIA labels for screen readers
+- High contrast ratios (WCAG AA compliant)
+
+---
+
+### 4.4 Analysis History View (P0)
+
+**Description**: Display recent sentiment analyses with search and filter capabilities.
+
+**Requirements**:
+- **History List**:
+  - Most recent 10 analyses displayed by default
+  - Each item shows:
+    - Text snippet (first 50 characters + "...")
+    - Sentiment badge
+    - Confidence percentage
+    - Timestamp (relative: "2 mins ago")
+  - Click to expand full details
+
+- **Features**:
+  - "Load More" button (pagination, 10 per page)
+  - Filter by sentiment (All / Positive / Negative)
+  - Sort by: Newest / Oldest / Highest Confidence
+  - Search by text content (client-side)
+  - "Clear History" button (with confirmation)
+
+- **Empty State**:
+  - Message: "No analysis history yet"
+  - Call-to-action: "Analyze your first text above!"
+  - Illustration or icon
+
+- **Data Management**:
+  - Fetch from `/history?limit=10` endpoint
+  - Auto-refresh after new analysis
+  - Cache in browser localStorage (optional, for performance)
+
+**User Flow**:
+```
+User scrolls down → Sees history section → 
+Can filter/search → Clicks item → Expands details → 
+Can re-analyze same text
+```
+
+---
+
+### 4.5 Cache Statistics Dashboard (P1)
+
+**Description**: Real-time visualization of Redis cache performance metrics.
+
+**Requirements**:
+- **Metrics Display**:
+  - **Total Analyses**: Count with icon
+  - **Cache Hit Rate**: Percentage with progress ring
+  - **Avg Response Time**: Milliseconds comparison (cached vs uncached)
+  - **Memory Used**: MB with gauge
+
+- **Visual Components**:
+  - Card-based layout (4 cards in grid)
+  - Icons for each metric (using icon library)
+  - Color coding:
+    - Green: Good performance (hit rate > 80%)
+    - Yellow: Medium (hit rate 50-80%)
+    - Red: Poor (hit rate < 50%)
+
+- **Data Source**:
+  - Fetch from `/cache/stats` endpoint
+  - Auto-refresh every 30 seconds
+  - Manual refresh button
+
+- **Charts** (V1.1 enhancement):
+  - Line chart: Hit rate over time
+  - Bar chart: Response time comparison
+  - Pie chart: Cache hits vs misses
+
+**Layout**:
+```
+┌─────────────┬─────────────┐
+│ Total       │ Cache Hit   │
+│ Analyses    │ Rate        │
+│             │             │
+│ 1,234       │ 87%         │
+└─────────────┴─────────────┘
+┌─────────────┬─────────────┐
+│ Avg Response│ Memory      │
+│ Time        │ Used        │
+│             │             │
+│ 2ms (cached)│ 12.5 MB     │
+└─────────────┴─────────────┘
+```
+
+---
+
+## 5. Technical Specifications
+
+### 5.1 Technology Stack
+
+**Frontend Framework**: React 18 with TypeScript
+- Modern, component-based architecture
+- Strong typing for better code quality
+- Large ecosystem and community support
+
+**Styling**: 
+- **Primary**: Tailwind CSS (utility-first, rapid development)
+- **Alternative**: Styled Components (if component-scoped styles preferred)
+- **Icons**: Lucide React or Heroicons
+
+**State Management**: 
+- React Context API (for simple global state)
+- React Query (for API data fetching and caching)
+
+**Build Tool**: Vite
+- Fast dev server and HMR
+- Optimized production builds
+- Better DX than Create React App
+
+**API Client**: Axios
+- Interceptors for error handling
+- Request/response transformers
+- Better error handling than fetch
+
+### 5.2 Project Structure
+
+```
+sentiment-frontend/
+├── public/
+│   ���── favicon.ico
+├── src/
+│   ├── components/
+│   │   ├── SentimentAnalyzer.tsx      # Main analysis input/results
+│   │   ├── ResultCard.tsx             # Individual result display
+│   │   ├── HistoryList.tsx            # Analysis history
+│   │   ├── CacheStats.tsx             # Cache dashboard
+│   │   ├── Header.tsx                 # App header/nav
+│   │   └── Footer.tsx                 # App footer
+│   ├── hooks/
+│   │   ├── useSentimentAnalysis.ts    # API call hook
+│   │   ├── useHistory.ts              # History fetching
+│   │   └── useCacheStats.ts           # Cache stats
+│   ├── services/
+│   │   └── api.ts                     # Axios instance & endpoints
+│   ├── types/
+│   │   └── index.ts                   # TypeScript interfaces
+│   ├── utils/
+│   │   ├── formatters.ts              # Date/number formatting
+│   │   └── validators.ts              # Input validation
+│   ├── App.tsx                        # Root component
+│   ├── main.tsx                       # Entry point
+│   └── index.css                      # Global styles
+├── .env.example
+├── .gitignore
+├── package.json
+├── tsconfig.json
+├── vite.config.ts
+└── README.md
+```
+
+### 5.3 API Integration
+
+**Base URL**: 
+- Development: `http://localhost:8000`
+- Production: `http://localhost` (nginx proxy)
+
+**Endpoints**:
+
+```typescript
+// POST /analyze
+interface AnalyzeRequest {
+  text: string;
+}
+
+interface AnalyzeResponse {
+  text: string;
+  sentiment: 'POSITIVE' | 'NEGATIVE';
+  confidence: number;
+  processing_time_ms: number;
+  cached: boolean;
+}
+
+// GET /history?limit=10
+interface HistoryResponse {
+  total: number;
+  analyses: Analysis[];
+}
+
+// GET /cache/stats
+interface CacheStatsResponse {
+  status: string;
+  total_keys: number;
+  memory_used_mb: number;
+  hits: number;
+  misses: number;
+  hit_rate: number;
+}
+```
+
+**Error Handling**:
+- Network errors: Retry with exponential backoff
+- 4xx errors: Display user-friendly message
+- 5xx errors: "Service temporarily unavailable"
+- Timeout: After 10 seconds
+
+---
+
+## 6. Design Specifications
+
+### 6.1 Color Palette
+
+**Primary Colors**:
+- Blue: `#4fc3f7` (Client, primary actions)
+- Green: `#81c784` (Positive sentiment, success)
+- Red: `#e57373` (Negative sentiment, errors)
+- Orange: `#ffb74d` (Warnings, info)
+- Purple: `#ba68c8` (Accents, secondary)
+
+**Neutral Colors**:
+- Background: `#f5f5f5` (light mode), `#1a1a1a` (dark mode)
+- Card Background: `#ffffff` (light), `#2d2d2d` (dark)
+- Text Primary: `#212121` (light), `#e0e0e0` (dark)
+- Text Secondary: `#757575` (light), `#9e9e9e` (dark)
+- Border: `#e0e0e0` (light), `#424242` (dark)
+
+### 6.2 Typography
+
+**Font Family**: 
+- Primary: `Inter, system-ui, sans-serif`
+- Monospace: `'Fira Code', 'Courier New', monospace` (for code/metrics)
+
+**Font Sizes** (Tailwind scale):
+- Heading 1: `text-4xl` (36px) - Page title
+- Heading 2: `text-2xl` (24px) - Section headers
+- Heading 3: `text-xl` (20px) - Card titles
+- Body: `text-base` (16px) - Default text
+- Small: `text-sm` (14px) - Metadata, labels
+- Tiny: `text-xs` (12px) - Timestamps, footnotes
+
+**Font Weights**:
+- Regular: 400
+- Medium: 500
+- Semi-bold: 600
+- Bold: 700
+
+### 6.3 Spacing & Layout
+
+**Container**:
+- Max width: `1280px` (xl breakpoint)
+- Padding: `px-4` (mobile), `px-6` (tablet), `px-8` (desktop)
+
+**Component Spacing**:
+- Section gaps: `gap-8` (32px)
+- Card padding: `p-6` (24px)
+- Button padding: `px-6 py-3` (24px x 12px)
+- Input padding: `px-4 py-3` (16px x 12px)
+
+**Border Radius**:
+- Small: `rounded-md` (6px) - Buttons, inputs
+- Medium: `rounded-lg` (8px) - Cards
+- Large: `rounded-xl` (12px) - Modal dialogs
+
+### 6.4 Responsive Breakpoints
+
+| Breakpoint | Min Width | Description |
+|------------|-----------|-------------|
+| sm | 640px | Small tablets |
+| md | 768px | Tablets |
+| lg | 1024px | Small desktops |
+| xl | 1280px | Large desktops |
+
+**Mobile-First Approach**:
+- Design for mobile (320px) first
+- Progressively enhance for larger screens
+- Test on: iPhone SE, iPad, Desktop 1920x1080
+
+---
+
+## 7. User Experience Flow
+
+### 7.1 Primary User Journey
+
+```mermaid
+graph TD
+    A[User Lands on Page] --> B{Has Text to Analyze?}
+    B -->|No| C[Clicks Sample Text]
+    B -->|Yes| D[Pastes/Types Text]
+    C --> D
+    D --> E[Sees Character Count]
+    E --> F{Valid Input?}
+    F -->|No| G[See Validation Error]
+    G --> D
+    F -->|Yes| H[Click Analyze Button]
+    H --> I[Loading State]
+    I --> J[Results Appear]
+    J --> K{Satisfied?}
+    K -->|No| L[Try Different Text]
+    K -->|Yes| M[View History/Stats]
+    L --> D
+    M --> N[Share/Export]
+```
+
+### 7.2 Page Layout (Wireframe)
+
+```
+┌───────────────────────────────────────┐
+│  🎯 Sentiment Analysis                │  <- Header
+│  [About] [API Docs] [GitHub]          │
+└───────────────────────────────────────┘
+
+┌───────────────────────────────────────┐
+│  Analyze Text Sentiment in Real-Time │  <- Hero Section
+│  Powered by DistilBERT & Redis Cache │
+└───────────────────────────────────────┘
+
+┌───────────────────────────────────────┐
+│  Type or paste your text here...     │  <- Input Section
+│  ┌─────────────────────────────────┐ │
+│  │                                 │ │
+│  │  [Textarea - Multi-line]        │ │
+│  │                                 │ │
+│  └─────────────────────────────────┘ │
+│  Characters: 0 / 5000               │
+│  [Try Positive] [Try Negative] [Clear]│
+│  [🔍 Analyze Sentiment]   ← Primary CTA│
+└───────────────────────────────────────┘
+
+┌───────────────────────────────────────┐
+│  📊 Result                            │  <- Results Section
+│  ┌─────────────────────────────────┐ │  (Appears after analysis)
+│  │  😊 POSITIVE                     │ │
+│  │  Confidence: 99.8%               │ │
+│  │  ████████████████████░ 99.8%    │ │
+│  │  ⚡ Cached (2ms)                 │ │
+│  └─────────────────────────────────┘ │
+└───────────────────────────────────────┘
+
+┌───────────────────────────────────────┐
+│  📜 Recent Analyses                   │  <- History Section
+│  ┌─────────────────────────────────┐ │
+│  │ "I love this product..." POSITIVE│ │
+│  │ 99.9% • 2 mins ago              │ │
+│  ├─────────────────────────────────┤ │
+│  │ "This is terrible..." NEGATIVE  │ │
+│  │ 98.5% • 5 mins ago              │ │
+│  └─────────────────────────────────┘ │
+│  [Load More]                         │
+└───────────────────────────────────────┘
+
+┌───────────────────────────────────────┐
+│  📈 Cache Performance                 │  <- Stats Section
+│  ┌─────────┬─────────┬──────────────┐│
+│  │ Total   │ Hit Rate│ Avg Response ││
+│  │ 1,234   │ 87%     │ 2ms          ││
+│  └─────────┴─────────┴──────────────┘│
+└───────────────────────────────────────┘
+
+┌───────────────────────────────────────┐
+│  Built with ❤️ by Syed Arfan         │  <- Footer
+│  [GitHub] [LinkedIn] [API Docs]       │
+└───────────────────────────────────────┘
+```
+
+---
+
+## 8. Development Phases
+
+### Phase 1: MVP (Week 1)
+**Goal**: Core functionality working
+
+**Tasks**:
+- ✅ Set up Vite + React + TypeScript project
+- ✅ Create basic layout structure
+- ✅ Implement sentiment input component
+- ✅ Connect to `/analyze` API endpoint
+- ✅ Display results with basic styling
+- ✅ Add history list (basic version)
+- ✅ Responsive design (mobile + desktop)
+- ✅ Basic error handling
+- ✅ Deploy to GitHub Pages / Vercel
+
+**Deliverable**: Working demo URL
+
+### Phase 2: Polish (Week 2)
+**Goal**: Professional UX/UI
+
+**Tasks**:
+- ⬜ Add animations and transitions
+- ⬜ Implement cache stats dashboard
+- ⬜ Add loading skeletons
+- ⬜ Improve error messages
+- ⬜ Add sample text buttons
+- ⬜ Implement search/filter in history
+- ⬜ Add accessibility features (ARIA labels, keyboard nav)
+- ⬜ Performance optimization (code splitting, lazy loading)
+
+**Deliverable**: Production-ready application
+
+### Phase 3: Enhancements (Future)
+**Goal**: Advanced features
+
+**Tasks**:
+- ⬜ Dark mode toggle
+- ⬜ Export analysis data (CSV/JSON)
+- ⬜ Charts for cache performance
+- ⬜ Batch analysis (upload CSV)
+- ⬜ User authentication (optional)
+- ⬜ Personal dashboard with saved analyses
+
+---
+
+## 9. Non-Functional Requirements
+
+### 9.1 Performance
+- **Page Load**: < 2 seconds (first contentful paint)
+- **Time to Interactive**: < 3 seconds
+- **API Response**: < 100ms (cached), < 2s (uncached)
+- **Bundle Size**: < 500KB (gzipped)
+
+### 9.2 Accessibility
+- WCAG 2.1 Level AA compliance
+- Keyboard navigation support
+- Screen reader compatible
+- High contrast mode support
+- Focus indicators visible
+
+### 9.3 Browser Support
+- Chrome 90+ (primary)
+- Firefox 88+
+- Safari 14+
+- Edge 90+
+- Mobile Safari (iOS 14+)
+- Chrome Mobile (Android 10+)
+
+### 9.4 Security
+- Input sanitization (prevent XSS)
+- HTTPS only in production
+- CORS headers configured
+- Rate limiting on API (handled by backend)
+- No sensitive data in localStorage
+
+### 9.5 SEO
+- Semantic HTML5 markup
+- Meta tags (title, description, OG tags)
+- Proper heading hierarchy (H1 → H6)
+- Alt text on all images
+- Sitemap.xml (if multi-page)
+
+---
+
+## 10. Testing Strategy
+
+### 10.1 Unit Tests
+- Component rendering tests (React Testing Library)
+- Hook logic tests (custom hooks)
+- Utility function tests (formatters, validators)
+- Target: 80%+ code coverage
+
+### 10.2 Integration Tests
+- API integration tests (mock API responses)
+- Form submission flows
+- Error handling scenarios
+- Cache stats refresh
+
+### 10.3 E2E Tests (Optional)
+- Complete user flow (Cypress/Playwright)
+- Cross-browser testing
+- Mobile device testing
+
+### 10.4 Manual Testing
+- Accessibility audit (Lighthouse, axe DevTools)
+- Cross-browser testing (BrowserStack)
+- Mobile device testing (real devices)
+- Performance profiling (Chrome DevTools)
+
+---
+
+## 11. Deployment & DevOps
+
+### 11.1 Development Environment
+```bash
+# Local development
+npm run dev            # Start Vite dev server (localhost:5173)
+npm run build          # Production build
+npm run preview        # Preview production build
+npm run test           # Run tests
+npm run lint           # ESLint
+```
+
+### 11.2 Deployment Options
+
+**Option 1: Vercel (Recommended)**
+- Zero-config deployment
+- Automatic HTTPS
+- CDN distribution
+- Environment variables support
+- Free tier available
+
+**Option 2: GitHub Pages**
+- Free hosting
+- Automatic deployment from main branch
+- Custom domain support
+- Good for static sites
+
+**Option 3: Netlify**
+- Similar to Vercel
+- Form handling built-in
+- Function support
+- Generous free tier
+
+### 11.3 CI/CD Pipeline
+
+```yaml
+# .github/workflows/deploy.yml
+name: Deploy Frontend
+on:
+  push:
+    branches: [main]
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - Checkout code
+      - Install dependencies
+      - Run tests
+      - Build production bundle
+      - Deploy to Vercel/Netlify
+```
+
+### 11.4 Environment Variables
+
+```bash
+# .env.development
+VITE_API_BASE_URL=http://localhost:8000
+
+# .env.production
+VITE_API_BASE_URL=http://localhost  # nginx proxy
+```
+
+---
+
+## 12. Documentation Requirements
+
+### 12.1 README.md
+- Project overview and features
+- Live demo link
+- Screenshots/GIF demos
+- Installation instructions
+- Development setup
+- Tech stack details
+- API integration details
+- Contributing guidelines
+
+### 12.2 Code Comments
+- JSDoc comments for complex functions
+- Component props documentation
+- API service documentation
+- Type definitions documented
+
+### 12.3 User Guide (Optional)
+- How to use the application
+- Tips for best results
+- Troubleshooting common issues
+
+---
+
+## 13. Success Criteria
+
+### 13.1 Definition of Done
+- ✅ All P0 features implemented and tested
+- ✅ Responsive on mobile, tablet, desktop
+- ✅ Lighthouse score > 90 (all categories)
+- ✅ Zero console errors/warnings
+- ✅ API integration working (all endpoints)
+- ✅ Deployed to production URL
+- ✅ README documentation complete
+- ✅ Code reviewed and refactored
+
+### 13.2 Launch Checklist
+- [ ] All features working on production
+- [ ] Performance optimized (bundle size, lazy loading)
+- [ ] Accessibility tested and passing
+- [ ] Cross-browser tested
+- [ ] Mobile tested on real devices
+- [ ] Error handling comprehensive
+- [ ] Analytics integrated (optional)
+- [ ] Social media preview cards working
+- [ ] README and documentation complete
+- [ ] GitHub repository organized
+
+---
+
+## 14. Risks & Mitigation
+
+| Risk | Impact | Probability | Mitigation |
+|------|--------|-------------|------------|
+| API downtime | High | Low | Add offline mode with mock data |
+| Slow API response | Medium | Medium | Loading states, timeout handling |
+| Browser compatibility | Medium | Low | Polyfills, transpilation, testing |
+| Over-engineering | Low | High | Stick to MVP scope, iterate later |
+| Poor mobile UX | High | Medium | Mobile-first design, real device testing |
+
+---
+
+## 15. Future Enhancements (Post-MVP)
+
+### V1.1 Features
+- Dark mode toggle with system preference detection
+- Advanced charts for cache performance over time
+- Keyboard shortcuts panel
+- Confidence threshold slider (filter results)
+
+### V1.2 Features
+- Export analysis history (CSV/JSON/PDF)
+- Share result via URL/social media
+- API key management (if backend adds auth)
+- Custom themes/color schemes
+
+### V2.0 Features
+- Batch analysis (upload CSV with multiple texts)
+- User accounts and saved analyses
+- Comparison view (compare two texts)
+- Advanced analytics dashboard
+- Sentiment trends over time
+- API playground/Postman-like interface
+
+---
+
+## 16. Appendix
+
+### 16.1 Sample Texts for Testing
+
+**Positive Examples**:
+- "I absolutely love this product! It exceeded all my expectations and the customer service was fantastic."
+- "This is the best experience I've ever had. Highly recommend to everyone!"
+- "Amazing quality, fast delivery, and great value for money. Will definitely buy again!"
+
+**Negative Examples**:
+- "This is terrible. I'm extremely disappointed with the quality and service."
+- "Worst purchase ever. Complete waste of money and time. Do not buy!"
+- "Poor quality, slow delivery, and unhelpful customer support. Very frustrated."
+
+**Edge Cases**:
+- Empty string: ""
+- Very short: "Bad"
+- Maximum length: 5000 character text
+- Special characters: "I ❤️ this! 🎉🎊"
+- Mixed sentiment: "The product is great but the delivery was slow"
+
+### 16.2 API Response Examples
+
+```json
+// Positive cached response
+{
+  "text": "I love this!",
+  "sentiment": "POSITIVE",
+  "confidence": 0.9998,
+  "processing_time_ms": 2,
+  "cached": true
+}
+
+// Negative uncached response
+{
+  "text": "This is terrible",
+  "sentiment": "NEGATIVE",
+  "confidence": 0.9875,
+  "processing_time_ms": 98,
+  "cached": false
+}
+
+// Error response
+{
+  "detail": "Text must be between 1 and 5000 characters"
+}
+```
+
+---
+
+## 17. Approval & Sign-off
+
+**Prepared by**: Syed Arfan Hussain  
+**Date**: December 11, 2025  
+**Status**: Ready for Implementation  
+
+**Next Steps**:
+1. Review and approve PRD ✅
+2. Set up React + TypeScript project
+3. Begin Phase 1 (MVP) implementation
+4. Daily progress updates
+
+---
+
+**End of PRD**

frontend/.env.example

@@ -0,0 +1,6 @@
+# API Base URL
+# For local development with Docker:
+VITE_API_BASE_URL=http://localhost:8000
+
+# For production with hosted backend:
+# VITE_API_BASE_URL=https://your-api-domain.com

frontend/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

frontend/README.md

@@ -0,0 +1,111 @@
+# 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

frontend/eslint.config.js

@@ -0,0 +1,23 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+  },
+])

frontend/index.html

@@ -0,0 +1,37 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🧠</text></svg>" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+    <!-- SEO Meta Tags -->
+    <title>Sentiment Analysis - AI-Powered Text Analysis</title>
+    <meta name="description" content="Analyze text sentiment in real-time using DistilBERT transformer model. Experience 99%+ accuracy with lightning-fast Redis caching." />
+    <meta name="keywords" content="sentiment analysis, NLP, machine learning, DistilBERT, text analysis, AI" />
+    <meta name="author" content="Syed Arfan Hussain" />
+
+    <!-- Open Graph / Social Media -->
+    <meta property="og:type" content="website" />
+    <meta property="og:title" content="Sentiment Analysis - AI-Powered Text Analysis" />
+    <meta property="og:description" content="Analyze text sentiment in real-time using DistilBERT transformer model with 99%+ accuracy." />
+    <meta property="og:url" content="https://simplyarfan.github.io/Sentiment-API/" />
+
+    <!-- Twitter Card -->
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:title" content="Sentiment Analysis - AI-Powered Text Analysis" />
+    <meta name="twitter:description" content="Analyze text sentiment in real-time using DistilBERT transformer model with 99%+ accuracy." />
+
+    <!-- Theme Color -->
+    <meta name="theme-color" content="#4fc3f7" />
+
+    <!-- Fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Fira+Code:wght@400;500&display=swap" rel="stylesheet">
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

frontend/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "sentiment-analysis-frontend",
+  "private": true,
+  "version": "1.0.0",
+  "description": "React frontend for Sentiment Analysis API",
+  "author": "Syed Arfan Hussain",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "axios": "^1.13.2",
+    "lucide-react": "^0.559.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@tailwindcss/vite": "^4.1.17",
+    "@types/node": "^24.10.1",
+    "@types/react": "^19.2.5",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.1",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "tailwindcss": "^4.1.17",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.46.4",
+    "vite": "^7.2.4"
+  }
+}

frontend/src/App.tsx

@@ -0,0 +1,39 @@
+import { useState, useCallback } from 'react';
+import Header from './components/Header';
+import Footer from './components/Footer';
+import SentimentAnalyzer from './components/SentimentAnalyzer';
+import HistoryList from './components/HistoryList';
+import CacheStats from './components/CacheStats';
+
+function App() {
+  const [refreshTrigger, setRefreshTrigger] = useState(0);
+
+  const handleAnalysisComplete = useCallback(() => {
+    setRefreshTrigger(prev => prev + 1);
+  }, []);
+
+  return (
+    <div className="min-h-screen flex flex-col bg-gray-50">
+      <Header />
+
+      <main className="flex-1 py-8 px-4 sm:px-6 lg:px-8">
+        <div className="max-w-6xl mx-auto space-y-12">
+          {/* Sentiment Analyzer Section */}
+          <section>
+            <SentimentAnalyzer onAnalysisComplete={handleAnalysisComplete} />
+          </section>
+
+          {/* History and Stats Section */}
+          <section className="grid lg:grid-cols-2 gap-8">
+            <HistoryList refreshTrigger={refreshTrigger} />
+            <CacheStats />
+          </section>
+        </div>
+      </main>
+
+      <Footer />
+    </div>
+  );
+}
+
+export default App;

frontend/src/components/CacheStats.tsx

@@ -0,0 +1,142 @@
+import { BarChart3, Zap, Database, HardDrive, RefreshCw, TrendingUp } from 'lucide-react';
+import { useCacheStats } from '../hooks/useCacheStats';
+import { formatMemory } from '../utils/formatters';
+
+const CacheStats = () => {
+  const { stats, isLoading, error, refresh } = useCacheStats(30000);
+
+  if (error) {
+    return (
+      <div className="bg-white rounded-xl border border-gray-200 p-6">
+        <div className="text-center py-4">
+          <p className="text-red-500 text-sm mb-2">{error}</p>
+          <button
+            onClick={refresh}
+            className="text-sm text-blue-600 hover:underline"
+          >
+            Retry
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  const hitRate = stats?.hit_rate ?? 0;
+  const hitRateColor = hitRate >= 80 ? 'text-green-600' : hitRate >= 50 ? 'text-yellow-600' : 'text-red-600';
+  const hitRateBg = hitRate >= 80 ? 'bg-green-500' : hitRate >= 50 ? 'bg-yellow-500' : 'bg-red-500';
+
+  return (
+    <div className="bg-white rounded-xl border border-gray-200 overflow-hidden">
+      {/* Header */}
+      <div className="flex items-center justify-between p-4 border-b border-gray-100">
+        <div className="flex items-center gap-2">
+          <BarChart3 className="w-5 h-5 text-gray-500" />
+          <h3 className="font-semibold text-gray-900">Cache Performance</h3>
+        </div>
+        <button
+          onClick={refresh}
+          disabled={isLoading}
+          className="p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-lg transition-colors disabled:opacity-50"
+          aria-label="Refresh stats"
+        >
+          <RefreshCw className={`w-4 h-4 ${isLoading ? 'animate-spin' : ''}`} />
+        </button>
+      </div>
+
+      {/* Stats Grid */}
+      <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 p-4">
+        {/* Total Analyses */}
+        <StatCard
+          icon={<Database className="w-5 h-5 text-blue-500" />}
+          label="Total Keys"
+          value={stats?.total_keys?.toLocaleString() ?? '-'}
+          isLoading={isLoading}
+        />
+
+        {/* Cache Hit Rate */}
+        <StatCard
+          icon={<Zap className="w-5 h-5 text-yellow-500" />}
+          label="Hit Rate"
+          value={stats ? `${hitRate.toFixed(1)}%` : '-'}
+          valueClass={hitRateColor}
+          isLoading={isLoading}
+        >
+          {stats && (
+            <div className="mt-2 h-1.5 bg-gray-200 rounded-full overflow-hidden">
+              <div
+                className={`h-full rounded-full transition-all duration-500 ${hitRateBg}`}
+                style={{ width: `${hitRate}%` }}
+              />
+            </div>
+          )}
+        </StatCard>
+
+        {/* Hits vs Misses */}
+        <StatCard
+          icon={<TrendingUp className="w-5 h-5 text-green-500" />}
+          label="Hits / Misses"
+          value={stats ? `${stats.hits} / ${stats.misses}` : '-'}
+          isLoading={isLoading}
+        />
+
+        {/* Memory Used */}
+        <StatCard
+          icon={<HardDrive className="w-5 h-5 text-purple-500" />}
+          label="Memory Used"
+          value={stats ? formatMemory(stats.memory_used_mb) : '-'}
+          isLoading={isLoading}
+        />
+      </div>
+
+      {/* Status Indicator */}
+      {stats && (
+        <div className="px-4 pb-4">
+          <div className="flex items-center gap-2 text-xs text-gray-500">
+            <span
+              className={`w-2 h-2 rounded-full ${
+                stats.status === 'connected' ? 'bg-green-500' : 'bg-red-500'
+              }`}
+            />
+            <span>
+              Redis {stats.status === 'connected' ? 'Connected' : 'Disconnected'}
+            </span>
+            <span className="text-gray-300">•</span>
+            <span>Auto-refreshes every 30s</span>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+interface StatCardProps {
+  icon: React.ReactNode;
+  label: string;
+  value: string;
+  valueClass?: string;
+  isLoading?: boolean;
+  children?: React.ReactNode;
+}
+
+const StatCard = ({ icon, label, value, valueClass = '', isLoading, children }: StatCardProps) => {
+  return (
+    <div className="p-4 bg-gray-50 rounded-lg">
+      <div className="flex items-center gap-2 mb-2">
+        {icon}
+        <span className="text-sm text-gray-600">{label}</span>
+      </div>
+      {isLoading ? (
+        <div className="h-8 bg-gray-200 rounded animate-pulse" />
+      ) : (
+        <>
+          <p className={`text-2xl font-bold font-mono ${valueClass || 'text-gray-900'}`}>
+            {value}
+          </p>
+          {children}
+        </>
+      )}
+    </div>
+  );
+};
+
+export default CacheStats;

frontend/src/components/Footer.tsx

@@ -0,0 +1,55 @@
+import { Github, Linkedin, Heart } from 'lucide-react';
+
+const Footer = () => {
+  return (
+    <footer className="bg-white border-t border-gray-200 mt-auto">
+      <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        <div className="flex flex-col sm:flex-row items-center justify-between gap-4">
+          {/* Credits */}
+          <div className="flex items-center gap-1 text-sm text-gray-600">
+            <span>Built with</span>
+            <Heart className="w-4 h-4 text-red-500 fill-red-500" />
+            <span>by</span>
+            <a
+              href="https://github.com/simplyarfan"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="font-medium text-gray-900 hover:text-blue-600 transition-colors"
+            >
+              Syed Arfan Hussain
+            </a>
+          </div>
+
+          {/* Social Links */}
+          <div className="flex items-center gap-4">
+            <a
+              href="https://github.com/simplyarfan"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="p-2 text-gray-500 hover:text-gray-900 hover:bg-gray-100 rounded-lg transition-colors"
+              aria-label="GitHub"
+            >
+              <Github className="w-5 h-5" />
+            </a>
+            <a
+              href="https://www.linkedin.com/in/syed-arfan-hussain-7a3a95160/"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="p-2 text-gray-500 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition-colors"
+              aria-label="LinkedIn"
+            >
+              <Linkedin className="w-5 h-5" />
+            </a>
+          </div>
+
+          {/* Tech Stack */}
+          <div className="text-xs text-gray-500">
+            React + FastAPI + Redis + PostgreSQL
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+};
+
+export default Footer;

frontend/src/components/Header.tsx

@@ -0,0 +1,46 @@
+import { Brain, Github, FileText } from 'lucide-react';
+
+const Header = () => {
+  return (
+    <header className="bg-white border-b border-gray-200 sticky top-0 z-50">
+      <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="flex items-center justify-between h-16">
+          {/* Logo and Title */}
+          <div className="flex items-center gap-3">
+            <div className="p-2 bg-gradient-to-br from-blue-500 to-purple-600 rounded-lg">
+              <Brain className="w-6 h-6 text-white" />
+            </div>
+            <div>
+              <h1 className="text-xl font-bold text-gray-900">Sentiment Analysis</h1>
+              <p className="text-xs text-gray-500 hidden sm:block">Powered by DistilBERT</p>
+            </div>
+          </div>
+
+          {/* Navigation Links */}
+          <nav className="flex items-center gap-2 sm:gap-4">
+            <a
+              href="https://github.com/simplyarfan/Sentiment-API"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="flex items-center gap-2 px-3 py-2 text-sm text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-lg transition-colors"
+            >
+              <Github className="w-4 h-4" />
+              <span className="hidden sm:inline">GitHub</span>
+            </a>
+            <a
+              href="https://github.com/simplyarfan/Sentiment-API#api-documentation"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="flex items-center gap-2 px-3 py-2 text-sm text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-lg transition-colors"
+            >
+              <FileText className="w-4 h-4" />
+              <span className="hidden sm:inline">API Docs</span>
+            </a>
+          </nav>
+        </div>
+      </div>
+    </header>
+  );
+};
+
+export default Header;

frontend/src/components/HistoryList.tsx

@@ -0,0 +1,180 @@
+import { useState, useEffect } from 'react';
+import { History, RefreshCw, ChevronDown, Smile, Frown, Filter } from 'lucide-react';
+import { useHistory } from '../hooks/useHistory';
+import type { HistoryItem } from '../types';
+import { formatConfidence, formatRelativeTime, truncateText } from '../utils/formatters';
+
+type SentimentFilter = 'all' | 'POSITIVE' | 'NEGATIVE';
+
+interface HistoryListProps {
+  refreshTrigger?: number;
+}
+
+const HistoryList = ({ refreshTrigger }: HistoryListProps) => {
+  const { history, total, isLoading, error, refresh, loadMore } = useHistory(10);
+  const [filter, setFilter] = useState<SentimentFilter>('all');
+  const [expandedId, setExpandedId] = useState<number | null>(null);
+
+  // Refresh when trigger changes
+  useEffect(() => {
+    if (refreshTrigger) {
+      refresh();
+    }
+  }, [refreshTrigger, refresh]);
+
+  const filteredHistory = filter === 'all'
+    ? history
+    : history.filter(item => item.sentiment === filter);
+
+  const handleItemClick = (id: number) => {
+    setExpandedId(expandedId === id ? null : id);
+  };
+
+  if (error) {
+    return (
+      <div className="bg-white rounded-xl border border-gray-200 p-6">
+        <div className="text-center py-8">
+          <p className="text-red-500 mb-4">{error}</p>
+          <button
+            onClick={refresh}
+            className="px-4 py-2 text-sm text-blue-600 hover:bg-blue-50 rounded-lg transition-colors"
+          >
+            Try Again
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="bg-white rounded-xl border border-gray-200 overflow-hidden">
+      {/* Header */}
+      <div className="flex items-center justify-between p-4 border-b border-gray-100">
+        <div className="flex items-center gap-2">
+          <History className="w-5 h-5 text-gray-500" />
+          <h3 className="font-semibold text-gray-900">Recent Analyses</h3>
+          {total > 0 && (
+            <span className="px-2 py-0.5 text-xs bg-gray-100 text-gray-600 rounded-full">
+              {total}
+            </span>
+          )}
+        </div>
+        <div className="flex items-center gap-2">
+          {/* Filter */}
+          <div className="relative">
+            <select
+              value={filter}
+              onChange={(e) => setFilter(e.target.value as SentimentFilter)}
+              className="appearance-none pl-8 pr-8 py-1.5 text-sm bg-gray-50 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-200"
+            >
+              <option value="all">All</option>
+              <option value="POSITIVE">Positive</option>
+              <option value="NEGATIVE">Negative</option>
+            </select>
+            <Filter className="absolute left-2 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
+          </div>
+          {/* Refresh Button */}
+          <button
+            onClick={refresh}
+            disabled={isLoading}
+            className="p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-lg transition-colors disabled:opacity-50"
+            aria-label="Refresh history"
+          >
+            <RefreshCw className={`w-4 h-4 ${isLoading ? 'animate-spin' : ''}`} />
+          </button>
+        </div>
+      </div>
+
+      {/* List */}
+      <div className="divide-y divide-gray-100">
+        {filteredHistory.length === 0 ? (
+          <div className="text-center py-12 px-4">
+            <History className="w-12 h-12 text-gray-300 mx-auto mb-4" />
+            <p className="text-gray-500 mb-2">No analysis history yet</p>
+            <p className="text-sm text-gray-400">
+              Analyze your first text above!
+            </p>
+          </div>
+        ) : (
+          filteredHistory.map((item: HistoryItem) => (
+            <HistoryItemRow
+              key={item.id}
+              item={item}
+              isExpanded={expandedId === item.id}
+              onClick={() => handleItemClick(item.id)}
+            />
+          ))
+        )}
+      </div>
+
+      {/* Load More */}
+      {history.length < total && (
+        <div className="p-4 border-t border-gray-100">
+          <button
+            onClick={loadMore}
+            disabled={isLoading}
+            className="w-full flex items-center justify-center gap-2 py-2 text-sm text-blue-600 hover:bg-blue-50 rounded-lg transition-colors disabled:opacity-50"
+          >
+            <ChevronDown className="w-4 h-4" />
+            Load More ({total - history.length} remaining)
+          </button>
+        </div>
+      )}
+    </div>
+  );
+};
+
+interface HistoryItemRowProps {
+  item: HistoryItem;
+  isExpanded: boolean;
+  onClick: () => void;
+}
+
+const HistoryItemRow = ({ item, isExpanded, onClick }: HistoryItemRowProps) => {
+  const isPositive = item.sentiment === 'POSITIVE';
+
+  return (
+    <div
+      className="p-4 hover:bg-gray-50 cursor-pointer transition-colors"
+      onClick={onClick}
+    >
+      <div className="flex items-start gap-3">
+        {/* Sentiment Icon */}
+        <div
+          className={`p-2 rounded-lg ${
+            isPositive ? 'bg-green-100' : 'bg-red-100'
+          }`}
+        >
+          {isPositive ? (
+            <Smile className="w-4 h-4 text-green-600" />
+          ) : (
+            <Frown className="w-4 h-4 text-red-600" />
+          )}
+        </div>
+
+        {/* Content */}
+        <div className="flex-1 min-w-0">
+          <p className="text-sm text-gray-900 mb-1">
+            {isExpanded ? item.text : truncateText(item.text, 60)}
+          </p>
+          <div className="flex flex-wrap items-center gap-2 text-xs text-gray-500">
+            <span
+              className={`px-2 py-0.5 rounded-full font-medium ${
+                isPositive
+                  ? 'bg-green-100 text-green-700'
+                  : 'bg-red-100 text-red-700'
+              }`}
+            >
+              {item.sentiment}
+            </span>
+            <span className="font-mono">{formatConfidence(item.confidence)}</span>
+            <span className="text-gray-400">•</span>
+            <span>{formatRelativeTime(item.created_at)}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default HistoryList;

frontend/src/components/ResultCard.tsx

@@ -0,0 +1,101 @@
+import { Smile, Frown, Zap, Clock, CheckCircle } from 'lucide-react';
+import type { SentimentResult } from '../types';
+import { formatConfidence, formatProcessingTime, getConfidenceLevel, truncateText } from '../utils/formatters';
+
+interface ResultCardProps {
+  result: SentimentResult;
+}
+
+const ResultCard = ({ result }: ResultCardProps) => {
+  const isPositive = result.sentiment === 'POSITIVE';
+  const confidencePercent = result.confidence * 100;
+
+  return (
+    <div className="animate-slide-up">
+      <div
+        className={`rounded-xl p-6 border-2 ${
+          isPositive
+            ? 'bg-gradient-to-br from-green-50 to-emerald-50 border-green-200'
+            : 'bg-gradient-to-br from-red-50 to-rose-50 border-red-200'
+        }`}
+      >
+        {/* Main Result */}
+        <div className="flex items-center gap-4 mb-6">
+          <div
+            className={`p-4 rounded-full animate-bounce-subtle ${
+              isPositive ? 'bg-green-100' : 'bg-red-100'
+            }`}
+          >
+            {isPositive ? (
+              <Smile className="w-12 h-12 text-green-600" />
+            ) : (
+              <Frown className="w-12 h-12 text-red-600" />
+            )}
+          </div>
+          <div>
+            <span
+              className={`inline-block px-4 py-2 rounded-full text-lg font-bold ${
+                isPositive
+                  ? 'bg-green-500 text-white'
+                  : 'bg-red-500 text-white'
+              }`}
+            >
+              {result.sentiment}
+            </span>
+            <p className="mt-2 text-sm text-gray-600">
+              {getConfidenceLevel(result.confidence)}
+            </p>
+          </div>
+        </div>
+
+        {/* Confidence Bar */}
+        <div className="mb-6">
+          <div className="flex justify-between items-center mb-2">
+            <span className="text-sm font-medium text-gray-700">Confidence</span>
+            <span className="text-lg font-bold font-mono">
+              {formatConfidence(result.confidence)}
+            </span>
+          </div>
+          <div className="h-3 bg-gray-200 rounded-full overflow-hidden">
+            <div
+              className={`h-full rounded-full animate-fill-bar ${
+                isPositive ? 'bg-green-500' : 'bg-red-500'
+              }`}
+              style={{ width: `${confidencePercent}%` }}
+            />
+          </div>
+        </div>
+
+        {/* Metadata */}
+        <div className="flex flex-wrap gap-4">
+          <div className="flex items-center gap-2">
+            {result.cached ? (
+              <Zap className="w-4 h-4 text-yellow-500" />
+            ) : (
+              <Clock className="w-4 h-4 text-blue-500" />
+            )}
+            <span className="text-sm text-gray-600">
+              {result.cached ? (
+                <span className="text-green-600 font-medium">
+                  Cached ({formatProcessingTime(result.processing_time_ms)})
+                </span>
+              ) : (
+                <span className="text-blue-600 font-medium">
+                  Processed ({formatProcessingTime(result.processing_time_ms)})
+                </span>
+              )}
+            </span>
+          </div>
+          <div className="flex items-center gap-2">
+            <CheckCircle className="w-4 h-4 text-gray-400" />
+            <span className="text-sm text-gray-500">
+              {truncateText(result.text, 50)}
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ResultCard;

frontend/src/components/SentimentAnalyzer.tsx

@@ -0,0 +1,204 @@
+import { useState, useCallback, useEffect } from 'react';
+import { Send, Loader2, Trash2, Sparkles } from 'lucide-react';
+import { useSentimentAnalysis } from '../hooks/useSentimentAnalysis';
+import { validateText, MAX_TEXT_LENGTH } from '../utils/validators';
+import ResultCard from './ResultCard';
+
+const SAMPLE_TEXTS = {
+  positive: "I absolutely love this product! It exceeded all my expectations and the customer service was fantastic. Highly recommend to everyone!",
+  negative: "This is terrible. I'm extremely disappointed with the quality and service. Complete waste of money and time. Do not buy!",
+};
+
+interface SentimentAnalyzerProps {
+  onAnalysisComplete?: () => void;
+}
+
+const SentimentAnalyzer = ({ onAnalysisComplete }: SentimentAnalyzerProps) => {
+  const [text, setText] = useState('');
+  const [validationError, setValidationError] = useState<string | null>(null);
+  const { result, isLoading, error, analyze, reset } = useSentimentAnalysis();
+
+  const handleTextChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const newText = e.target.value;
+    setText(newText);
+
+    if (newText.trim()) {
+      const validation = validateText(newText);
+      setValidationError(validation.error);
+    } else {
+      setValidationError(null);
+    }
+  };
+
+  const handleSubmit = useCallback(async (e?: React.FormEvent) => {
+    e?.preventDefault();
+
+    const validation = validateText(text);
+    if (!validation.isValid) {
+      setValidationError(validation.error);
+      return;
+    }
+
+    await analyze(text.trim());
+    onAnalysisComplete?.();
+  }, [text, analyze, onAnalysisComplete]);
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') {
+      handleSubmit();
+    }
+  };
+
+  const handleClear = () => {
+    setText('');
+    setValidationError(null);
+    reset();
+  };
+
+  const handleSampleText = (type: 'positive' | 'negative') => {
+    setText(SAMPLE_TEXTS[type]);
+    setValidationError(null);
+    reset();
+  };
+
+  // Scroll to result when analysis completes
+  useEffect(() => {
+    if (result) {
+      document.getElementById('result-section')?.scrollIntoView({ behavior: 'smooth' });
+    }
+  }, [result]);
+
+  const isValid = text.trim().length > 0 && !validationError;
+  const charCount = text.length;
+  const charCountClass = charCount > MAX_TEXT_LENGTH
+    ? 'text-red-500'
+    : charCount > MAX_TEXT_LENGTH * 0.9
+      ? 'text-yellow-500'
+      : 'text-gray-400';
+
+  return (
+    <div className="space-y-6">
+      {/* Hero Section */}
+      <div className="text-center mb-8">
+        <h2 className="text-3xl sm:text-4xl font-bold text-gray-900 mb-3">
+          Analyze Text Sentiment in Real-Time
+        </h2>
+        <p className="text-gray-600 max-w-2xl mx-auto">
+          Powered by DistilBERT transformer model with 99%+ accuracy.
+          Experience lightning-fast results with Redis caching.
+        </p>
+      </div>
+
+      {/* Input Section */}
+      <form onSubmit={handleSubmit} className="space-y-4">
+        <div className="relative">
+          <textarea
+            value={text}
+            onChange={handleTextChange}
+            onKeyDown={handleKeyDown}
+            placeholder="Type or paste your text here to analyze sentiment..."
+            className={`w-full min-h-[150px] max-h-[400px] p-4 text-gray-900 bg-white border-2 rounded-xl resize-y focus:outline-none focus:ring-2 transition-all ${
+              validationError
+                ? 'border-red-300 focus:ring-red-200 focus:border-red-400'
+                : 'border-gray-200 focus:ring-blue-200 focus:border-blue-400'
+            }`}
+            disabled={isLoading}
+            aria-label="Text input for sentiment analysis"
+            aria-invalid={!!validationError}
+            aria-describedby={validationError ? 'validation-error' : undefined}
+          />
+          <div className="absolute bottom-3 right-3 flex items-center gap-2">
+            <span className={`text-sm font-mono ${charCountClass}`}>
+              {charCount}/{MAX_TEXT_LENGTH}
+            </span>
+          </div>
+        </div>
+
+        {/* Validation Error */}
+        {validationError && (
+          <p id="validation-error" className="text-sm text-red-500 animate-fade-in">
+            {validationError}
+          </p>
+        )}
+
+        {/* API Error */}
+        {error && (
+          <div className="p-4 bg-red-50 border border-red-200 rounded-lg animate-fade-in">
+            <p className="text-sm text-red-600">{error}</p>
+          </div>
+        )}
+
+        {/* Sample Text Buttons */}
+        <div className="flex flex-wrap items-center gap-2">
+          <span className="text-sm text-gray-500">Try examples:</span>
+          <button
+            type="button"
+            onClick={() => handleSampleText('positive')}
+            className="flex items-center gap-1 px-3 py-1.5 text-sm text-green-700 bg-green-50 hover:bg-green-100 rounded-lg transition-colors"
+            disabled={isLoading}
+          >
+            <Sparkles className="w-3 h-3" />
+            Positive
+          </button>
+          <button
+            type="button"
+            onClick={() => handleSampleText('negative')}
+            className="flex items-center gap-1 px-3 py-1.5 text-sm text-red-700 bg-red-50 hover:bg-red-100 rounded-lg transition-colors"
+            disabled={isLoading}
+          >
+            <Sparkles className="w-3 h-3" />
+            Negative
+          </button>
+          {text && (
+            <button
+              type="button"
+              onClick={handleClear}
+              className="flex items-center gap-1 px-3 py-1.5 text-sm text-gray-600 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors"
+              disabled={isLoading}
+            >
+              <Trash2 className="w-3 h-3" />
+              Clear
+            </button>
+          )}
+        </div>
+
+        {/* Submit Button */}
+        <button
+          type="submit"
+          disabled={!isValid || isLoading}
+          className={`w-full flex items-center justify-center gap-2 px-6 py-4 text-lg font-semibold rounded-xl transition-all ${
+            isValid && !isLoading
+              ? 'bg-gradient-to-r from-blue-500 to-purple-600 text-white hover:from-blue-600 hover:to-purple-700 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5'
+              : 'bg-gray-200 text-gray-400 cursor-not-allowed'
+          }`}
+        >
+          {isLoading ? (
+            <>
+              <Loader2 className="w-5 h-5 animate-spin" />
+              Analyzing...
+            </>
+          ) : (
+            <>
+              <Send className="w-5 h-5" />
+              Analyze Sentiment
+            </>
+          )}
+        </button>
+
+        <p className="text-center text-xs text-gray-400">
+          Press <kbd className="px-1.5 py-0.5 bg-gray-100 rounded text-gray-600">Ctrl</kbd> + <kbd className="px-1.5 py-0.5 bg-gray-100 rounded text-gray-600">Enter</kbd> to analyze
+        </p>
+      </form>
+
+      {/* Result Section */}
+      {result && (
+        <div id="result-section" className="pt-4">
+          <h3 className="text-lg font-semibold text-gray-900 mb-4">Result</h3>
+          <ResultCard result={result} />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default SentimentAnalyzer;

frontend/src/hooks/useCacheStats.ts

@@ -0,0 +1,55 @@
+import { useState, useCallback, useEffect } from 'react';
+import { getCacheStats } from '../services/api';
+import type { CacheStats } from '../types';
+
+interface UseCacheStatsReturn {
+  stats: CacheStats | null;
+  isLoading: boolean;
+  error: string | null;
+  refresh: () => Promise<void>;
+}
+
+export const useCacheStats = (autoRefreshInterval: number = 30000): UseCacheStatsReturn => {
+  const [stats, setStats] = useState<CacheStats | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const fetchStats = useCallback(async () => {
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      const response = await getCacheStats();
+      setStats(response);
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : 'Failed to load cache stats';
+      setError(errorMessage);
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+
+  const refresh = useCallback(async () => {
+    await fetchStats();
+  }, [fetchStats]);
+
+  // Initial fetch
+  useEffect(() => {
+    fetchStats();
+  }, [fetchStats]);
+
+  // Auto-refresh
+  useEffect(() => {
+    if (autoRefreshInterval > 0) {
+      const interval = setInterval(fetchStats, autoRefreshInterval);
+      return () => clearInterval(interval);
+    }
+  }, [fetchStats, autoRefreshInterval]);
+
+  return {
+    stats,
+    isLoading,
+    error,
+    refresh,
+  };
+};

frontend/src/hooks/useHistory.ts

@@ -0,0 +1,59 @@
+import { useState, useCallback, useEffect } from 'react';
+import { getHistory } from '../services/api';
+import type { HistoryItem } from '../types';
+
+interface UseHistoryReturn {
+  history: HistoryItem[];
+  total: number;
+  isLoading: boolean;
+  error: string | null;
+  refresh: () => Promise<void>;
+  loadMore: () => Promise<void>;
+}
+
+export const useHistory = (initialLimit: number = 10): UseHistoryReturn => {
+  const [history, setHistory] = useState<HistoryItem[]>([]);
+  const [total, setTotal] = useState(0);
+  const [limit, setLimit] = useState(initialLimit);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const fetchHistory = useCallback(async (fetchLimit: number) => {
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      const response = await getHistory(fetchLimit);
+      setHistory(response.analyses);
+      setTotal(response.total);
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : 'Failed to load history';
+      setError(errorMessage);
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+
+  const refresh = useCallback(async () => {
+    await fetchHistory(limit);
+  }, [fetchHistory, limit]);
+
+  const loadMore = useCallback(async () => {
+    const newLimit = limit + 10;
+    setLimit(newLimit);
+    await fetchHistory(newLimit);
+  }, [fetchHistory, limit]);
+
+  useEffect(() => {
+    fetchHistory(initialLimit);
+  }, [fetchHistory, initialLimit]);
+
+  return {
+    history,
+    total,
+    isLoading,
+    error,
+    refresh,
+    loadMore,
+  };
+};

frontend/src/hooks/useSentimentAnalysis.ts

@@ -0,0 +1,47 @@
+import { useState, useCallback } from 'react';
+import { analyzeSentiment } from '../services/api';
+import type { SentimentResult } from '../types';
+
+interface UseSentimentAnalysisReturn {
+  result: SentimentResult | null;
+  isLoading: boolean;
+  error: string | null;
+  analyze: (text: string) => Promise<void>;
+  reset: () => void;
+}
+
+export const useSentimentAnalysis = (): UseSentimentAnalysisReturn => {
+  const [result, setResult] = useState<SentimentResult | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const analyze = useCallback(async (text: string) => {
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      const response = await analyzeSentiment(text);
+      setResult(response);
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : 'Analysis failed';
+      setError(errorMessage);
+      setResult(null);
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+
+  const reset = useCallback(() => {
+    setResult(null);
+    setError(null);
+    setIsLoading(false);
+  }, []);
+
+  return {
+    result,
+    isLoading,
+    error,
+    analyze,
+    reset,
+  };
+};

frontend/src/index.css

@@ -0,0 +1,58 @@
+@import "tailwindcss";
+
+/* Base styles */
+body {
+  font-family: 'Inter', system-ui, sans-serif;
+  @apply bg-gray-50 text-gray-900 antialiased;
+}
+
+/* Custom animations */
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(10px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes slideUp {
+  from { opacity: 0; transform: translateY(20px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes pulse-slow {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.7; }
+}
+
+@keyframes bounce-subtle {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-5px); }
+}
+
+.animate-fade-in {
+  animation: fadeIn 0.3s ease-out forwards;
+}
+
+.animate-slide-up {
+  animation: slideUp 0.4s ease-out forwards;
+}
+
+.animate-pulse-slow {
+  animation: pulse-slow 2s ease-in-out infinite;
+}
+
+.animate-bounce-subtle {
+  animation: bounce-subtle 1s ease-in-out;
+}
+
+/* Progress bar animation */
+@keyframes fillBar {
+  from { width: 0%; }
+}
+
+.animate-fill-bar {
+  animation: fillBar 0.8s ease-out forwards;
+}
+
+/* Monospace for metrics */
+.font-mono {
+  font-family: 'Fira Code', 'Courier New', monospace;
+}

frontend/src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

frontend/src/services/api.ts

@@ -0,0 +1,76 @@
+import axios, { type AxiosError } from 'axios';
+import type { SentimentResult, HistoryResponse, CacheStats, ApiError } from '../types';
+
+// API base URL - configurable via environment variable
+const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || 'http://localhost:8000';
+
+// Create axios instance with default config
+const api = axios.create({
+  baseURL: API_BASE_URL,
+  timeout: 10000,
+  headers: {
+    'Content-Type': 'application/json',
+  },
+});
+
+// Error handler
+const handleApiError = (error: AxiosError<ApiError>): never => {
+  if (error.response) {
+    // Server responded with error
+    const message = error.response.data?.detail || 'An error occurred';
+    throw new Error(message);
+  } else if (error.request) {
+    // Request made but no response
+    throw new Error('Unable to reach the server. Please check if the API is running.');
+  } else {
+    // Request setup error
+    throw new Error(error.message || 'An unexpected error occurred');
+  }
+};
+
+// API functions
+export const analyzeSentiment = async (text: string): Promise<SentimentResult> => {
+  try {
+    const response = await api.post<SentimentResult>('/analyze', { text });
+    return response.data;
+  } catch (error) {
+    return handleApiError(error as AxiosError<ApiError>);
+  }
+};
+
+export const getHistory = async (limit: number = 10): Promise<HistoryResponse> => {
+  try {
+    const response = await api.get<HistoryResponse>(`/history?limit=${limit}`);
+    return response.data;
+  } catch (error) {
+    return handleApiError(error as AxiosError<ApiError>);
+  }
+};
+
+export const getCacheStats = async (): Promise<CacheStats> => {
+  try {
+    const response = await api.get<CacheStats>('/cache/stats');
+    return response.data;
+  } catch (error) {
+    return handleApiError(error as AxiosError<ApiError>);
+  }
+};
+
+export const clearCache = async (): Promise<void> => {
+  try {
+    await api.delete('/cache/clear');
+  } catch (error) {
+    return handleApiError(error as AxiosError<ApiError>);
+  }
+};
+
+export const checkHealth = async (): Promise<boolean> => {
+  try {
+    await api.get('/health');
+    return true;
+  } catch {
+    return false;
+  }
+};
+
+export default api;

frontend/src/types/index.ts

@@ -0,0 +1,47 @@
+// API Response Types
+export interface SentimentResult {
+  text: string;
+  sentiment: 'POSITIVE' | 'NEGATIVE';
+  confidence: number;
+  processing_time_ms: number;
+  cached: boolean;
+  created_at?: string;
+}
+
+export interface HistoryItem {
+  id: number;
+  text: string;
+  sentiment: 'POSITIVE' | 'NEGATIVE';
+  confidence: number;
+  processing_time_ms: number;
+  created_at: string;
+}
+
+export interface HistoryResponse {
+  total: number;
+  analyses: HistoryItem[];
+}
+
+export interface CacheStats {
+  status: string;
+  total_keys: number;
+  sentiment_keys: number;
+  memory_used_mb: number;
+  hits: number;
+  misses: number;
+  hit_rate: number;
+}
+
+export interface ApiError {
+  detail: string;
+}
+
+// Component Props Types
+export interface ResultCardProps {
+  result: SentimentResult;
+}
+
+export interface HistoryItemProps {
+  item: HistoryItem;
+  onClick?: () => void;
+}

frontend/src/utils/formatters.ts

@@ -0,0 +1,63 @@
+// Format confidence as percentage
+export const formatConfidence = (confidence: number): string => {
+  return `${(confidence * 100).toFixed(1)}%`;
+};
+
+// Format processing time
+export const formatProcessingTime = (ms: number): string => {
+  if (ms < 1000) {
+    return `${ms}ms`;
+  }
+  return `${(ms / 1000).toFixed(2)}s`;
+};
+
+// Format relative time (e.g., "2 mins ago")
+export const formatRelativeTime = (dateString: string): string => {
+  const date = new Date(dateString);
+  const now = new Date();
+  const diffInSeconds = Math.floor((now.getTime() - date.getTime()) / 1000);
+
+  if (diffInSeconds < 60) {
+    return 'just now';
+  }
+
+  const diffInMinutes = Math.floor(diffInSeconds / 60);
+  if (diffInMinutes < 60) {
+    return `${diffInMinutes} min${diffInMinutes > 1 ? 's' : ''} ago`;
+  }
+
+  const diffInHours = Math.floor(diffInMinutes / 60);
+  if (diffInHours < 24) {
+    return `${diffInHours} hour${diffInHours > 1 ? 's' : ''} ago`;
+  }
+
+  const diffInDays = Math.floor(diffInHours / 24);
+  if (diffInDays < 7) {
+    return `${diffInDays} day${diffInDays > 1 ? 's' : ''} ago`;
+  }
+
+  return date.toLocaleDateString();
+};
+
+// Truncate text with ellipsis
+export const truncateText = (text: string, maxLength: number): string => {
+  if (text.length <= maxLength) {
+    return text;
+  }
+  return `${text.substring(0, maxLength)}...`;
+};
+
+// Format memory size
+export const formatMemory = (mb: number): string => {
+  if (mb < 1) {
+    return `${(mb * 1024).toFixed(0)} KB`;
+  }
+  return `${mb.toFixed(2)} MB`;
+};
+
+// Get confidence level label
+export const getConfidenceLevel = (confidence: number): string => {
+  if (confidence >= 0.9) return 'High confidence';
+  if (confidence >= 0.7) return 'Medium confidence';
+  return 'Low confidence';
+};

frontend/src/utils/validators.ts

@@ -0,0 +1,37 @@
+export const MIN_TEXT_LENGTH = 1;
+export const MAX_TEXT_LENGTH = 512;
+
+export interface ValidationResult {
+  isValid: boolean;
+  error: string | null;
+}
+
+export const validateText = (text: string): ValidationResult => {
+  const trimmedText = text.trim();
+
+  if (trimmedText.length === 0) {
+    return {
+      isValid: false,
+      error: 'Please enter some text to analyze',
+    };
+  }
+
+  if (trimmedText.length < MIN_TEXT_LENGTH) {
+    return {
+      isValid: false,
+      error: `Text must be at least ${MIN_TEXT_LENGTH} character`,
+    };
+  }
+
+  if (trimmedText.length > MAX_TEXT_LENGTH) {
+    return {
+      isValid: false,
+      error: `Text must be ${MAX_TEXT_LENGTH} characters or less`,
+    };
+  }
+
+  return {
+    isValid: true,
+    error: null,
+  };
+};

frontend/tsconfig.app.json

@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}

frontend/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

frontend/tsconfig.node.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

frontend/vite.config.ts

@@ -0,0 +1,9 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+  base: '/Sentiment-API/', // For GitHub Pages deployment
+})