---
# System prepended metadata

title: Frontend Task

---

# Frontend Task

We need a frontend application for displaying and editing simple quotes.

Example provided quotes:

Quote #1: 
```
Author: Seneca
Quote: As long as you live, keep learning how to live.
```
Quote #2: 
```
Author: Linus Torvalds
Quote: Theory and practice sometimes clash. And when that happens, theory loses. 
Every single time.
```
Quote #3: 
```
Author: John Carmack
Quote: I'd rather have a search engine or a compiler on a deserted island than a game.
```

If you need a design you can follow [this one](https://imgur.com/a/3drLATr). Keep in mind that you have creative freedom when it comes to how the page should look like - this design is just a suggestion for starting point.

## Requirements:

- Need to be able to see all created quotes
- Need to be able to create new quote
- Need to be able to update existing quote
- Need to be able to delete existing quote
- Live reload of data after updates(no page reloading)

### Bonus points (not required):

- Using framework such as Vue or React, is encouraged but not a heavy requirement.
- State management library Vuex or Redux
- CSS flexbox
- Pagination (not implemented on the provided backend - only do it on frontend)

There is no defined way to solve this task. We want to see how will you come to solution and present it.

## Provided Backend

Backend is deployed and available on https://huddle-gaming-test.herokuapp.com.

There is no database and all data is stored locally on server(if server restarts data will be set to initial 3 quotes), so if there is missing data or any problems reaching server please contact us.

### REST API Documentation

#### GET `/quotes`

Returns `json` with status code `200` in format:
```json 
[
    {
        "id": "b033df40-78d8-11ea-852a-5f7e05cd4cde",
        "author": "Linus Torvalds",
        "quote": "Theory and practice sometimes clash. And when that happens, theory loses. Every single time."
    },
    {
        "id": "bb421280-78d8-11ea-852a-5f7e05cd4cde",
        "author": "Seneca",
        "quote": "As long as you live, keep learning how to live."
    },
    {
        "id": "c254fc40-78d8-11ea-852a-5f7e05cd4cde",
        "author": "John Carmack",
        "quote": "I'd rather have a search engine or a compiler on a deserted island than a game."
    }
]
```

#### POST `/quotes`

Accepts `json` in format:

```json
{
  "author": "Linus Torvalds",
  "quote": "Theory and practice sometimes clash. And when that happens, theory loses. Every single time."
}
```

and it returns `json` with status code `201` in format:

```json
{
    "id": "c254fc40-78d8-11ea-852a-5f7e05cd4cde"
}
```

#### GET `/quotes/:id`

Requires `id` route parameter.

Returns `json` with status code `200` in format:

```json
{
    "id": "b033df40-78d8-11ea-852a-5f7e05cd4cde",
    "author": "Linus Torvalds",
    "quote": "Theory and practice sometimes clash. And when that happens, theory loses. Every single time."
}
```

or status code `404` if there is no quote with provided id.

#### PATCH `/quotes/:id`

Requires `id` route parameter.

Accepts `json` in format:

```json
{
  "author": "Linus Torvalds",
  "quote": "Theory and practice sometimes clash. And when that happens, theory loses. Every single time."
}
```

Returns status code `200` without content if successful or status code `404` if there is no quote with provided id.

#### DELETE `/quotes/:id`

Requires `id` route parameter.

Returns status code `204` without content if successful or status code `404` if there is no quote with provided id.

