# Overview

## Technology Stack

We have built our front ends primarily using [Node.js](https://nodejs.org/en), [React](https://react.dev/), and [Redux Toolkit](https://redux-toolkit.js.org/).

{% hint style="info" %}
We recommend getting familiar with the basics of each technology before contributing to one of our front ends.
{% endhint %}

## Code Repositories

Each service has a front end code repository in the [Ocado Technology](https://github.com/ocadotechnology) GitHub organisation which follows the naming convention:

```
codeforlife-{service}-frontend
```

[View](https://github.com/orgs/ocadotechnology/repositories?q=codeforlife-+-frontend) our front end repos on GitHub.

### Template

To speed up the process of creating a new front end repo, we created the template repo [codeforlife-template-frontend](https://github.com/ocadotechnology/codeforlife-template-frontend) which can be used to scaffold a new service's front end repo. Read [here](https://docs.github.com/en/repositories/creating-and-managing-repositories/creating-a-repository-from-a-template) on how to create a repo from a template.

{% hint style="success" %}
After creating a repo from the template, run a case-insensitive search across all files for **replace-me**. Replace these strings with the appropriate value; this will most likely be the service's name.
{% endhint %}

## CI/CD Pipelines

In order to avoid repeating the same pipelines in every front end service, we centrally define the pipelines in our [workspace repo](https://github.com/ocadotechnology/codeforlife-workspace/tree/main/.github/workflows), and reference them in each front end service. In GitHub's terminology, these are referred to as [reusable workflows](https://docs.github.com/en/actions/sharing-automations/reusing-workflows).

There are 2 main pipelines in each front end service.

### main.yaml

The main pipeline for each front end service which simply reuses the [frontend](https://github.com/ocadotechnology/codeforlife-workspace/blob/main/.github/workflows/frontend.yaml) pipeline located in the workspace. This pipeline is responsible for testing and deploying a front end service.

You can see an example of this pipeline in the [front end template repo](https://github.com/ocadotechnology/codeforlife-template-frontend/blob/development/.github/workflows/main.yaml).

### contributing.yaml

This pipeline is responsible for managing the process of contributing to our code base, such as checking our contributors have signed our contributor agreement, auto-assigning/-unassigning contributors to issues, and more.

You can see an example of this pipeline in the [front end template repo](https://github.com/ocadotechnology/codeforlife-template-frontend/blob/development/.github/workflows/contributing.yaml).

## JavaScript Package

To avoid repeating code across 2 or more front ends, we have created the repo [codeforlife-package-javascript](https://github.com/ocadotechnology/codeforlife-package-javascript) which automatically tests and releases new version of the package using [semantic versioning](https://semver.org/). These versioned packages can then be installed into our JavaScript environment (node\_modules).

Learn more about our JavaScript package [here](https://code-for-life.gitbook.io/javascript-package). 


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.codeforlife.education/software-developer-guide/front-end/overview.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.