Skip to main content

​
Frontend overview

The frontend is a React application bootstrapped with Create React App (CRA), using React 19.2.0 and modern React patterns including hooks and functional components.

​
Project structure

The React application is located in the client/ directory: 
client/
├── public/              # Static assets
├── src/
│   ├── App.js          # Main application component
│   ├── App.css         # Application styles
│   ├── index.js        # React entry point
│   ├── index.css       # Global styles
│   ├── App.test.js     # Component tests
│   └── setupTests.js   # Test configuration
└── package.json        # Dependencies and scripts

​
Dependencies

The frontend uses the following key dependencies from client/package.json:

​
Core libraries

{
  "react": "^19.2.0",
  "react-dom": "^19.2.0",
  "react-scripts": "5.0.1",
  "web-vitals": "^2.1.4"
}
  • react - Core React library for building user interfaces
  • react-dom - DOM-specific methods for React
  • react-scripts - Build and development scripts from Create React App
  • web-vitals - Performance monitoring utilities

​
Testing libraries

{
  "@testing-library/dom": "^10.4.1",
  "@testing-library/jest-dom": "^6.9.1",
  "@testing-library/react": "^16.3.0",
  "@testing-library/user-event": "^13.5.0"
}
These libraries enable comprehensive component testing with Jest and React Testing Library.

​
Application entry point

The application initializes in client/src/index.js: 
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

reportWebVitals();
This code:
  • Creates a React root using the modern createRoot API (React 18+)
  • Renders the App component inside React.StrictMode for additional development checks
  • Initializes web vitals for performance monitoring

​
Main application component

The App.js component is the main entry point for the UI: 
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;
Key features:
  • Functional component using modern React syntax
  • Imports and displays the React logo
  • Provides a basic template for starting development
  • Includes proper accessibility attributes (alt, rel)
This is the default Create React App template. In a real application, you would replace this with your own components and routing logic.

​
Build process

The frontend build process is defined in the package.json scripts: 
{
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }
}

​
Available scripts

Runs the app in development mode with hot reloading on http://localhost:3000
Creates an optimized production build in the build/ directory with:
  • Minified JavaScript and CSS
  • Bundled and tree-shaken code
  • Optimized asset hashing for cache busting
Launches the test runner in interactive watch mode
Ejects from Create React App (one-way operation) to customize build configuration

​
Production build in Docker

During the Docker build process, the frontend is compiled in the first stage: 
# Stage 1: Build Frontend
FROM node:18-alpine AS frontend-build

WORKDIR /app

# Install frontend dependencies
COPY client/package*.json ./client/
RUN cd client && npm install

# Build frontend
COPY client ./client
RUN cd client && npm run build
This process:
  1. Installs all dependencies including build tools
  2. Runs npm run build to create production-optimized files
  3. Outputs static files to client/build/

​
Serving in production

In the production container, the built frontend is served by the Express backend: 
# Copy built frontend from frontend-build stage
COPY --from=frontend-build /app/client/build ./server/client/build
The static files are copied to server/client/build/, where the Express server can serve them alongside API endpoints.
The Express server in this project does not currently include static file serving middleware. To serve the React app, you would need to add express.static() middleware in server/index.js.

​
Browser support

The application targets modern browsers based on the browserslist configuration: Production: 
[
  ">0.2%",
  "not dead",
  "not op_mini all"
]
Development: 
[
  "last 1 chrome version",
  "last 1 firefox version",
  "last 1 safari version"
]
This ensures the build is optimized for browsers with >0.2% market share while excluding unsupported browsers.

​
Key features

Modern React

Uses React 19.2.0 with hooks and functional components

Built-in testing

Includes React Testing Library for component testing

Performance monitoring

Web Vitals integration for measuring user experience

Optimized builds

Create React App provides zero-config optimization

​
Next steps

Backend architecture

Learn how the Express backend serves the application

Build docs developers (and LLMs) love

Get started for freeTalk to us