This is my google books App that i created for my foton frontend challenge application. Created with React Typescript and axios library.
This app uses 'Google Books' API to recover the data that will be shown on the app.
const query = 'harry potter';
app.get(`https://www.googleapis.com/books/v1/volumes?q=${query}`);
https://www.figma.com/file/KFElqzD983WNyvMY1SaF0c/book-app?node-id=0%3A1
You can run the project either with docker or with npm/yarn.
Steps:
- run cd app/.
- run yarn install or npm install
- run cd ..
- run sudo docker-compose up --build
Steps:
- run cd app/.
- run yarn install or npm install
- run yarn start or npm start
If you wanna check the build application, here is the link:
The website design has 3 screens, which are:
- Create a Pixel Perfect screen based on design above;
- The books must be clickable and redirect to details screen.
In this screen the functionalities below are mandatory:
- See a list of books based on search query;
- Make it possible to search for more books with a "Load more" button;
- Search books by name;
- Click on one of the books to see their details.
In this screen the functionalities below are mandatory:
- See all information for the selected book.
I also worked on some extra functionalitys, for exemple:
- Web page responsitivity layout;
- Smartphone responsitivity layout;
- Implementation of share (with twitter), listen and read buttons functions;
- Add a loading page animation layout;
- Created more animations in some components.