Frontend Challenge

Clone this repository and start our challenge right now

Use React or React Native depending on the rule you are running for.

NOTE: If you have any questions regarding the test, just send us your question on our Discord's channel #technical-challenge on Foton Discord.

API

Use the Google Books' API to recover the data that will be shown on the app.

const query = 'harry potter';
fetch(`https://www.googleapis.com/books/v1/volumes?q=${query}`);

NOTE: You can use the form of calling apis of your choice (Fetch, Axios, etc).

Design/Screens

https://www.figma.com/file/KFElqzD983WNyvMY1SaF0c/book-app?node-id=0%3A1

The website design has 3 screens, which are:

Home

1. Create a Pixel Perfect screen based on design above;
2. The books must be clickable and redirect to details screen.

Search

In this screen the functionalities below are mandatory:

1. See a list of books based on search query;
2. Make it possible to search for more books with a "Load more" button;
3. Search books by name;
4. Click on one of the books to see their details.

Books details

In this screen the functionalities below are mandatory:

1. See all information for the selected book.