└── README.md /README.md: -------------------------------------------------------------------------------- 1 | # Frontend Challenge 2 | 3 | Clone this repository and start our challenge **right now** 4 | 5 | Use React or React Native depending on the rule you are running for. 6 | 7 | **NOTE:** If you have any questions regarding the test, just send us your question on our Discord's channel **#technical-challenge** on [Foton Discord](https://discord.gg/uw55aDewNf). 8 | 9 | ## API 10 | 11 | Use the [Google Books](https://developers.google.com/books/docs/v1/using)' API to recover the data that will be shown on the app. 12 | 13 | ```js 14 | const query = 'harry potter'; 15 | fetch(`https://www.googleapis.com/books/v1/volumes?q=${query}`); 16 | ``` 17 | 18 | **NOTE:** You can use the form of calling apis of your choice (Fetch, Axios, etc). 19 | 20 | ## Design/Screens 21 | https://www.figma.com/file/KFElqzD983WNyvMY1SaF0c/book-app?node-id=0%3A1 22 | 23 | Screen Shot 2021-04-13 at 10 19 47 24 | 25 | 26 | The website design has 3 screens, which are: 27 | 28 | ### Home 29 | 30 | 1. Create a Pixel Perfect screen based on design above; 31 | 2. The books must be clickable and redirect to **details** screen. 32 | 33 | ### Search 34 | 35 | In this screen the functionalities below are **mandatory**: 36 | 37 | 1. See a list of books based on search query; 38 | 2. Make it possible to search for more books with a "Load more" button; 39 | 3. Search books by name; 40 | 4. Click on one of the books to see their details. 41 | 42 | ### Books details 43 | 44 | In this screen the functionalities below are **mandatory**: 45 | 46 | 1. See all information for the selected book. 47 | --------------------------------------------------------------------------------