frontend

Application Documentation

Introduction

• This is a Next.js React web application, written in TypeScript.
• U.S. Web Design System provides themeable styling and a set of common components.
• React-USWDS provides React components already with USWDS theming out of the box. For a reference point starting out, see react-uswds-hello.tsx which includes examples of react-uswds component usage.
• Storybook is included as a frontend workshop.

Directory structure

├── .storybook        # Storybook configuration
├── public            # Static assets
│   └── locales       # Internationalized content
├── src               # Source code
│   ├── components    # Reusable UI components
│   ├── app           # Page routes and data fetching
│   │   └── api       # API routes (optional)
│   └── styles        # Sass & design system settings
├── stories           # Storybook pages
└── tests             # Unit and E2E tests

💻 Local Development

Next.js provides the React framework for building the web application. Pages are defined in the app/ directory. Pages are automatically routed based on the file name. For example, pages/[locale]/page.tsx is the home page.

Learn more about developing Next.js applications ↗️

Running the app locally

From the /frontend directory:

1. Install dependencies

   npm ci

2. Optionally, disable telemetry data collection

   npx next telemetry disable

3. Create local environment file

   cp .env.development .env.local

4. Run the local development server

   npm run dev

5. Navigate to localhost:3000 to view the application

Other scripts

• npm run build - Builds the production Next.js bundle
• npm start - Runs the Next.js server, after building the production bundle

Testing and feature development

See development.md for full installation and development instructions.

Technical information

• Architecture diagram
• Authentication overview
• Authentication local setup
• Testing
• Type checking, linting, and formatting
• Search and opportunity page local setup