# 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).