frontend/README.md

Frontend React Application

This directory contains the React/TypeScript frontend for the Polymer Aging ML application.

Architecture

The frontend is a modern React application with TypeScript:

frontend/
├── src/
│   ├── components/          # React components
│   │   ├── Header.tsx
│   │   ├── SpectrumChart.tsx
│   │   ├── ResultsDisplay.tsx
│   │   └── ...
│   ├── apiClient.ts         # Centralized API client
│   ├── types/
│   │   ├── api.ts          # Auto-generated API types
│   │   └── index.ts        # Custom types
│   ├── App.tsx             # Main application component
│   └── index.tsx           # Application entry point
├── public/                 # Static assets
├── package.json           # Dependencies and scripts
└── tsconfig.json          # TypeScript configuration

Key Features

• Type Safety: Full TypeScript integration with OpenAPI-generated types
• Centralized API Client: Single source for all backend communication
• Component Architecture: Modular, reusable React components
• Responsive Design: Works across desktop and mobile devices
• Error Handling: Graceful error handling with user feedback

Setup and Development

Prerequisites

• Node.js 16+ and npm 8+
• Backend API server running (for development)

Installation

# Install dependencies
npm install --legacy-peer-deps

# Verify TypeScript types are up to date
npm run typegen:file

Development Server

# Start development server with hot reload
npm start

# Opens http://localhost:3000

Build for Production

# Create production build
npm run build

# Build files output to build/ directory

API Integration

Centralized API Client

All backend communication goes through src/apiClient.ts:

import { ApiClient } from './apiClient';

const api = new ApiClient('http://localhost:8000');

// Example usage
const result = await api.analyzeSpectrum({
  spectrum: spectrumData,
  model_name: 'resnet',
  modality: 'raman'
});

Type Generation

API types are automatically generated from the OpenAPI schema:

# Generate types from running backend
npm run typegen

# Generate types from schema file
npm run typegen:file

Scripts

Available npm scripts:

npm start          # Development server
npm run build      # Production build
npm test           # Run tests
npm run lint       # ESLint checking
npm run format     # Prettier formatting
npm run typegen    # Generate API types

API Contract Adherence

The frontend strictly adheres to the OpenAPI contract:

• All requests/responses validated by TypeScript types
• Automatic type generation ensures contract compliance
• No direct backend imports or cross-boundary dependencies