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