README.md

SmartEM Frontend

A React-based web application for visualising and analysing electron microscopy data from the SmartEM system. Built with React 19, React Router 7, TanStack Query, and Material-UI.

Features

• Real-time visualisation of acquisition data, grids, and grid squares
• Interactive atlas views with quality predictions
• Foil hole analysis and quality metrics
• Type-safe API client auto-generated from OpenAPI specification

Prerequisites

• Node.js 20 or later
• npm or compatible package manager
• SmartEM backend API running. The Vite dev server proxies /api to http://localhost:8000 by default — set VITE_API_PROXY_TARGET (e.g. in apps/smartem/.env.local) to override, for example http://localhost:30080 when running the dev k3s stack from smartem-devtools.

Quick Start

# Install dependencies
npm install

# Start development server
npm run dev

# Run with mock API (no backend required)
npm run dev:mock

Your application will be available at http://localhost:5173.

Technology Stack

React 19, React Router 7, TanStack Query, Material-UI, Orval, TypeScript, Vite, Tailwind CSS, Biome, Prettier, Lefthook

Documentation

Full documentation: https://DiamondLightSource.github.io/smartem-devtools

Contributing

When adding new API endpoints or modifying existing ones:

1. Change the backend API in smartem-decisions — it regenerates and publishes the canonical OpenAPI spec
2. Run npm run api:update to refresh packages/api/src/openapi.json from the canonical backend spec and regenerate the @smartem/api client
3. Update components to use the new hooks
4. Run npm run typecheck to verify type safety

Licence

Copyright Diamond Light Source