Foton Books •

Content

• About
• Status
• How to use
  • Requeriments
  • Running Storybook
  • Running Tests
  • Running Frontend
• Stack
• API
• Design/Screens

About

A front-end app developed for Foton Frontend Challenge.

Running at Vercel.

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

Status

App finished and deployed at Vercel. Demo.

How to use

Requeriments

You need to have Git and Node.js installed on your computer to work properly.

Running Storybook

$ git clone https://github.com/lucas-barbosa/frontend-challenge.git

$ cd foton-books

$ yarn storybook

Running Tests

$ git clone https://github.com/lucas-barbosa/frontend-challenge.git

$ cd foton-books

$ yarn test

Running Frontend

$ git clone https://github.com/lucas-barbosa/frontend-challenge.git

$ cd foton-books

$ yarn build

$ yarn start

Stack

The following techs were used to make this app.

• TypeScript
• NextJS
• React
• Jest
• Storybook
• Eslint

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

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.