agridata.ch Frontend

This is the frontend of agridata.ch. The frontend is built with Angular and Typescript.

Installation

Requirements

• Node.js (>= 24.0.0)
• npm (>= 11.0.0)

Installation

1. Clone the repository

git clone https://github.com/agridata-ch/frontend.git
cd frontend

2. Set Env Variables First make sure to set the font awesome token in your .env file:

FONTAWESOME_PACKAGE_TOKEN={{your_token_here}}

If you get an authentication error then the preinstall script does not correctly fetch the token from your .env file so then past the token directly in to the .npmrc but don't check in this change!

If you are on windows npm may not be able to use the .env file directly. In this case you can set the environment variable manually in powershell:

$env:FONTAWESOME_PACKAGE_TOKEN="{{your_token_here}}"

3. Install dependencies

npm install

4. Start the development server

npm run start

Commit message convention

In this project we use the Conventional Commits specification for commit messages. This means that each commit message should start with a type, followed by an optional scope and a description. The type can be one of the following:

• feat: A new feature
• fix: A bug fix

When merging a pull request, the commit message must follow one of these formats; otherwise, the build will fail.

Deployment

We use semantic-release to automatically version and to generate the release notes. After a merge into the develop branch, the version is automatically increased and a new pre-release is created. After a merge into the main branch, the version is automatically increased and a new release is created. Also the main branch is automatically merged back into develop. The release notes are generated automatically based on the commit messages. The release notes are generated in the CHANGELOG.md file.

API-Client Generation

We use openapi-generator to generate the API client. The API client is generated from the OpenAPI specification file located in the src/assets/openapi folder. The OpenAPI specification file is generated from the backend using swagger-ui. The API client is generated using the following command:

npm run api:generate

The generated API client is located in the src/app/shared/services and the models are located in the src/app/shared/models folder. You can then import the API client in your component-services and use it to make API calls.

Translation

Transloco

We use transloco for translations. The translation files are located in the src/assets/i18n folder. The translation files are in JSON format and can be edited directly.

I18nService | I18nPipe

We have our custom I18n Service and Pipe to use the translations in the application. The I18nService is a wrapper around the Transloco service and provides a simple interface to get the translations. The I18nPipe is a wrapper around the Transloco pipe and can be used in the templates to get the translations. You can use the I18nPipe in your templates like this:

<p>{{ 'hello' | i18n }}</p>

in the json file:

{
  "hello": "Hello World"
}

or use it with a prefix

<ng-container *transloco="let t; prefix: 'agridata'">
  <p>{{ t('title') }}</p>
</ng-container>

this is useful if don't want to add the namespace to every translation key. In the json file this will then be like this:

{
  "agridata": {
    "title": "Agridata Title"
  }
}

POEditor Translation Sync

This script syncs translations from POEditor with your Angular project.

Setup

1. Configure your POEditor credentials in .env file at the project root:

POEDITOR_API_TOKEN=your_api_token
POEDITOR_PROJECT_ID=your_project_id

You can refer to .env.example for the required format.

2. Make sure you have the right language codes set up in POEditor, matching the ones you use in your project.

Usage

Run the sync command:

npm run i18n:sync

Powershell

npm run i18n:sync:windows

This will:

1. Fetch all available languages from your POEditor project
2. Download the translations for each language
3. Save them to your src/assets/i18n directory

Getting POEditor API Token

1. Log in to your POEditor account
2. Go to your account settings
3. Navigate to the API Access section
4. Generate a new readonly API token or use an existing one

Getting POEditor Project ID

The project ID can be found in the URL when you're viewing a project: https://poeditor.com/projects/view?id=YOUR_PROJECT_ID

Font Awesome add new icon

We use a custom font awesome kit that only contains the icons that we need. To add a new icon, follow these steps:

1. Go to your Font Awesome account
2. Open the agridata-pro-regular kit
3. go to icons, select classic regular
4. Search for the icon you want to add
5. Save subset and wait for the new package to be built
6. install the new package:

npm install --save '@awesome.me/kit-0b6d1ed528@latest'

Storybook

We use Storybook for our UI components. You can run Storybook with the following command:

npm run storybook

AI

We use Claude for AI assistance. You can access it via the Claude website. Also you can use the Claude API to integrate it into your workflow. You can find the API documentation here.

CodeSight

We use CodeSight for context generation and therefore cost optimization. You can find more information about it on its GitHub repository. To use CodeSight, you need to install the CodeSight CLI and run it in your project directory. Just install it via npx:

npx codesight

Then you can run the following command to analyze your code:

npx codesight --wiki                       # Generate wiki knowledge base (.codesight/wiki/)
npx codesight --init                       # Generate CLAUDE.md, .cursorrules, codex.md, AGENTS.md
npx codesight --open                       # Open interactive HTML report in browser
npx codesight --mcp                        # Start as MCP server (14 tools) for Claude Code / Cursor
npx codesight --blast src/lib/db.ts        # Show blast radius for a file
npx codesight --profile claude-code        # Generate optimized config for a specific AI tool
npx codesight --benchmark                  # Show detailed token savings breakdown
npx codesight --native-ast                 # Opt-in: AST plugins for more languages (see docs/wasm-plugins.md)
npx codesight --mode knowledge             # Map knowledge base (.md notes → KNOWLEDGE.md)
npx codesight --mode knowledge ~/vault     # Map Obsidian vault, ADRs, meeting notes, retros

Ponytail

We use the plugin Ponytail for measured claude sessions, which allows us to track the usage of Claude and optimize the cost. You can find more information about it on its GitHub repository.

install in claude via:

/plugin marketplace add DietrichGebert/ponytail

/plugin install ponytail@ponytail

Main Commands (see more in the Ponytail documentation)

Command	What it does
/ponytail [lite, full , ultra , off]	Set the intensity, or turn it off. No argument reports the current level.
/ponytail-review	Review the current diff for over-engineering, hands back a delete-list.
/ponytail-audit	Audit the whole repo for over-engineering, not just the diff.