Cleo Frontend Interview

Overview

Today we'll be pairing on a React application that allows users to convert currencies from one unit to another, based on a selection. The application itself has already been started by another team and our goal would be to:

Add some missing features from the project board
Add tests for features we add
Fix some bugs from the project board
Fix any bugs we come across

The teams project manager has set up a project board for us to track various features/bugs, which can be found HERE.

Each card on the project board has information about it's requirements, so take a moment to familiarise yourself with them and feel free to ask questions. Our goal is to work through the cards on that project board together in whichever order you feel works best.

We have also been provided a design (expand below) to reference during our development. We should aim to stay close to this, but we have some freedom to change things where needed.

UI design reference

It's important to note that whilst there may be bugs on that project board, not all may have been reported yet. As such, we can look to fix anything we find during our session.

Getting started

This is a React application and as such, you'll need to have installed on your machine a few dependencies:

Node.js
Git (plus a Github account)
Yarn or NPM

With the above installed, you'll need to fork this Github repo locally to your machine. We also recommend you come prepared with your preferred IDE set up to your liking in order to allow us to start straight away.

Running the application

There are various commands already available for you to run:

Start the dev server

Runs the local development server on port 3000.

$ yarn start

Run the API

Runs the local API from a static database (currency values are not real time)

$ yarn api

There are three endpoints made available for this task. Each is described bellow:

Currencies

Retrieve a list of all available currencies

GET - http://localhost:3002/currencies

The currencies available as part of this test are:

{
  "AUD": "Australian Dollar",
  "CAD": "Canadian Dollar",
  "CHF": "Swiss Franc",
  "CNY": "Chinese Yuan",
  "EUR": "Euro",
  "GBP": "British Pound Sterling",
  "RUB": "Russian Ruble",
  "THB": "Thai Baht",
  "USD": "United States Dollar"
}

Rates

Retrieve a list of all available currencies with rates

GET - http://localhost:3002/rates

Retrieve a single currency and its rates

GET - http://localhost:3002/rates/{CURRENCY_CODE}

Convert

Convert an amount from one currency to another

http://localhost:3002/convert?from={CURRENCY_CODE}&to={CURRENCY_CODE}&amount={AMOUNT}

Testing

Runs tests via Jest and React Testing Library

$ yarn test

Notes

We are big fans of tested code
Be mindful of your code structure, you are completely free to make adjustments as you wish
We are about good vibes and working as a team to solve things
Remember to think out loud so you and your interviewer are aligned
Feel free to Google something if you're unsure during the session. Also remember you can ask your interviewer any questions you may have
Whilst finishing the task is great, we're more keen to see how you work and solve problems

beaolivei / frontend-interview