### Running Application and Storybook Locally

Source: https://github.com/adrianghub/abax-recruitment-challenges/blob/main/train-ticket-machine-frontend/README.md

This command starts both the main application and Storybook simultaneously for local development. The main application will be accessible at http://localhost:5173, and Storybook will be redirected from http://localhost:5173/storybook to http://localhost:6006.

```bash
npm run dev:all
```

--------------------------------

### Running Storybook Separately

Source: https://github.com/adrianghub/abax-recruitment-challenges/blob/main/train-ticket-machine-frontend/README.md

This command starts Storybook directly on port 6006, making it accessible at http://localhost:6006. This option is useful when only Storybook components need to be developed or viewed.

```bash
npm run storybook
```

--------------------------------

### Adding React-Specific ESLint Plugins in JavaScript

Source: https://github.com/adrianghub/abax-recruitment-challenges/blob/main/train-ticket-machine-frontend/README.md

This configuration snippet shows how to integrate `eslint-plugin-react-x` and `eslint-plugin-react-dom` into your ESLint setup. It defines these plugins and enables their recommended TypeScript rules to enforce React-specific linting best practices.

```JavaScript
// eslint.config.js
import reactX from 'eslint-plugin-react-x'
import reactDom from 'eslint-plugin-react-dom'

export default tseslint.config({
  plugins: {
    // Add the react-x and react-dom plugins
    'react-x': reactX,
    'react-dom': reactDom,
  },
  rules: {
    // other rules...
    // Enable its recommended typescript rules
    ...reactX.configs['recommended-typescript'].rules,
    ...reactDom.configs.recommended.rules,
  },
})
```

--------------------------------

### System Architecture Flowchart (Mermaid)

Source: https://github.com/adrianghub/abax-recruitment-challenges/blob/main/train-ticket-machine-frontend/docs/flowchart-diagram.md

This Mermaid flowchart visualizes the overall system architecture, including user interaction, data flow, caching mechanisms, observability tools, and the continuous integration/continuous deployment (CI/CD) pipeline. It shows how different components and services interact.

```Mermaid
flowchart LR
  %% User Interaction Subgraph
  subgraph UI[User Interaction]
    A[User types in search box] --> B[Search Component]
    B --> C["Inline suggestion (Ghost Text)"]
    B --> D[Filter station list]
    D --> E[Result List Component]
    E --> F[Highlight next character in result]
    E --> G[Next character suggestions header]
    G --> H["Display available next characters"]
    H --> I{Suggestion Variant}
    I -- "Clickable (Variant A)" --> J[Append tapped character to Input]
    I -- "Non-clickable (Variant B)" --> K[Show informational suggestion]
    B --> N["Store recent searches (Web API - localStorage)"]
  end

  %% Data and Caching Subgraph
  subgraph DC[Data & Caching]
    L["Preloaded 'Stations Data' (~10,000 records)"]
    L --> M["Result cache (React Query)"]
  end

  %% Observability Subgraph
  subgraph OB[Observability]
    O["Error Tracking & Session Replay (Sentry)"]
    P["User Interaction & Usage Metrics (Google Analytics)"]
  end

  %% Components Documentation Subgraph (positioned underneath UI)
  subgraph CD[Components Documentation]
    spacer[" "]
    U[Storybook]
  end
  style spacer fill:transparent,stroke:transparent,stroke-width:0px,height:0px

    %% CI/CD and Deployment Subgraph
  subgraph CICD[CI/CD]
    direction LR
    GIT[Git Repository] --> CI_SERVER["CI Server (GitHub Actions)"]
    CI_SERVER -- Build --> BUILD_ARTIFACTS["Build Artifacts (Static Files)"]
    BUILD_ARTIFACTS --> S3[AWS S3 Bucket]
    S3 --> CF[AWS CloudFront]
    CF --> USER_BROWSER[User Browser]
  end

  %% Main Flow Connections
  A --> B
  B --> D
  D --> E

  %% Connect UI to Data & Caching
  E --> L

  %% Connect Data & Caching to Observability
  M --> O
  O --> P

  %% Components Documentation connections (dotted arrows)
  B -.-> U
  D -.-> U
  E -.-> U

  %% Connect Build artifacts to Deployment to show flow
  BUILD_ARTIFACTS --> S3
```

--------------------------------

### Configuring Sentry Auth Token for Source Maps

Source: https://github.com/adrianghub/abax-recruitment-challenges/blob/main/train-ticket-machine-frontend/README.md

This snippet shows how to set the `SENTRY_AUTH_TOKEN` in a `.env.sentry-build-plugin` file. This token is essential for the Sentry Vite plugin to upload source maps during the build process, enabling readable stack traces in Sentry.

```Plaintext
SENTRY_AUTH_TOKEN=your-sentry-auth-token
```

--------------------------------

### Configuring Type-Aware ESLint Rules in JavaScript

Source: https://github.com/adrianghub/abax-recruitment-challenges/blob/main/train-ticket-machine-frontend/README.md

This snippet demonstrates how to extend the ESLint configuration to include type-aware linting rules using `tseslint.configs`. It shows options for recommended, strict, and stylistic type-checked rules, and specifies `parserOptions` for project-specific TypeScript configurations.

```JavaScript
export default tseslint.config({
  extends: [
    // Remove ...tseslint.configs.recommended and replace with this
    ...tseslint.configs.recommendedTypeChecked,
    // Alternatively, use this for stricter rules
    ...tseslint.configs.strictTypeChecked,
    // Optionally, add this for stylistic rules
    ...tseslint.configs.stylisticTypeChecked,
  ],
  languageOptions: {
    // other options...
    parserOptions: {
      project: ['./tsconfig.node.json', './tsconfig.app.json'],
      tsconfigRootDir: import.meta.dirname,
    },
  },
})
```

--------------------------------

### Updating Sentry Vite Plugin Configuration in JavaScript

Source: https://github.com/adrianghub/abax-recruitment-challenges/blob/main/train-ticket-machine-frontend/README.md

This JavaScript snippet illustrates how to configure the `sentryVitePlugin` within `vite.config.ts`. It highlights the `org` and `project` parameters, which must be updated with your specific Sentry organization and project names for proper integration and data routing.

```JavaScript
sentryVitePlugin({
     org: "yourorgname", // Replace with your Sentry org name
     project: "train-ticket-machine-frontend", // Your Sentry project name
     // ...
   })
```

--------------------------------

### Setting Sentry DSN Environment Variable

Source: https://github.com/adrianghub/abax-recruitment-challenges/blob/main/train-ticket-machine-frontend/README.md

This snippet provides the format for defining the Sentry DSN in a `.env.local` file. The `VITE_SENTRY_DSN` variable is crucial for connecting your application to Sentry for error tracking in development and production.

```Plaintext
VITE_SENTRY_DSN="your-sentry-dsn"
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.