# Caplin Front-end Tutorial

These tutorials introduce you to React and Redux and then focus on how to build Caplin front-end applications. They will take you through a complete project cycle, from setting up your project to deploying your application and previewing it in your browser.

## Objectives

In this course, you will learn how to perform the following tasks:

* Create a React component and manage state.
* Set up a Redux store so your React components can read data from it.
* Build a trade tile that displays the rates for a given currency pair, and how to stream currency prices to the tile.
* Configure your application to trade using the Caplin component library.
* Create grids from grid templates and customise them.
* Subscribe to a container and format the display of information contained within it.

## Requirements

This course assumes a working knowledge of JavaScript, Node.js, and React.

This course has the following requirements:

* [Node.js](https://nodejs.org/en/) 18, including a build environment for native npm modules.

  For guidance on installing Node.js on Windows, Linux, and macOS, see [Installing Node.js](../../caplin-trader/installing-node-js.md).
* [Visual Studio Code](https://code.visualstudio.com) or [IntelliJ IDEA community edition](https://www.jetbrains.com/idea/download/#section=linux).
* Internet access to the npm registry (https://registry.npmjs.org/)

  **💡 TIP**\
  If you access the Internet from behind a corporate firewall that requires NTLM authentication, see [Internet access and corporate proxy servers](../../caplin-trader/requirements.md#internet-access-and-corporate-proxy-servers).
* [pnpm](https://pnpm.io/) package manager:

  ```console
  $ npm install -g pnpm
  ```
* The [Caplin CLI](../../caplin-trader/installing-caplin-cli.md):

  ```console
  $ npm install -g caplin-cli
  ```

* `frontend-training-main.zip` (supplied by your Caplin trainer)