Frontend (React + TypeScript)

React app bootstrapped with Create React App, using MUI and Axios. Points to the backend API for data.

Tech Stack

• React 18, TypeScript
• CRA (react-scripts)
• MUI (@mui/material)
• Axios
• ESLint

Requirements

• Node.js 18+
• npm 9+

Getting Started

1. Install dependencies:

   npm ci

2. Start the dev server:

   npm start

   Runs on http://localhost:3000. A development proxy is configured to http://localhost:3001 in package.json.

Project Structure

High-level overview of principal files/directories:

frontend/
├─ src/
│  ├─ index.tsx            # App bootstrap
│  ├─ App.tsx              # Root component
│  ├─ pages/               # Route pages
│  ├─ components/          # UI components
│  ├─ services/            # API client and services
│  └─ types/               # Shared TS types
├─ public/                 # Static assets and index.html template
├─ build/                  # Production build output
├─ .env.example            # Environment variables template
└─ tsconfig.json

Scripts

• npm start: Start dev server
• npm run build: Production build to build/
• npm test: Run tests (interactive)
• npm run lint: Lint
• npm run lint:fix: Lint and fix

API Base URL

The API base URL defaults to http://localhost:3001/api in src/services/api.ts:

export const API_BASE_URL = "http://localhost:3001/api";

For production deployments, update this to your backend URL (e.g. https://api.example.com/api) or refactor it to read from an environment variable at build time.

Example using CRA runtime via env at build (needs code change):

• Add REACT_APP_API_BASE_URL=https://api.example.com/api to your build environment
• Read it in code: process.env.REACT_APP_API_BASE_URL

Environment Example

Create a .env file (or .env.production for builds) using this template:

# Frontend environment variables (Create React App)
# NOTE: Variables must be prefixed with REACT_APP_

# Base URL of the backend API including the /api prefix
REACT_APP_API_BASE_URL=http://localhost:3001/api

# Example: build-time environment indicator (optional)
REACT_APP_ENV=development

Build

npm run build

Outputs optimized static assets to build/.

Deployment Guidelines

Option A: S3 (manual upload)

1. Build the app locally:

   npm run build

2. Create an S3 bucket with static website hosting enabled.
3. Upload the contents of the build/ folder to the bucket (drag-and-drop or AWS CLI).
4. Set bucket policy/public access appropriately or serve via CloudFront for HTTPS and caching.
5. Ensure your backend CORS allows the S3/CloudFront domain.

Option B: Serve Behind Node/NGINX

• Any static server can serve the build/ directory
• Example with serve (for quick checks only):

  npx serve -s build -l 3000

• With NGINX, point a server block to the build/ directory and route API requests to the backend domain

CORS and Backend

• Backend must set CORS_ORIGIN to the deployed frontend origin
• Frontend must call the correct API URL (update API_BASE_URL or env)

Troubleshooting

• API calls fail in production → Check API_BASE_URL and CORS on backend
• Dev works but prod fails → Confirm env vars are available at build time and the built JS contains the correct URL
• SPA 404 on refresh → Ensure host rewrites all routes to index.html