/simple_giphy_box

This app is a single-page web application that leverages data from the Giphy.

Primary LanguageTypeScript

Getting Started

This project was bootstrapped with Create React App

Description

This app is a single-page web application that leverages data from the Giphy API. The idea is simple, fetch a number of records and list them all. the user will be able to click in the preview and be able to preview the record in a increse size. also, the user will be able to filter the records by keywords.

Requirements

• Use React hooks • Use Typescript • Paginate results • Show preview on clicking a gif • Filter the results by key word

Timing

The total amount investe in the proyect was 4h

How to start

In the project directory, you can run:

npm start

Open http://localhost:3000 to view it in the browser.

In order to run the test just type:

npm test

Folder structure

The aproach using in this project is to separate and group files acording the file type/ functionality • Component: All the statelless/statefull components are putting here • Style: Each component has his own css style • Test: All the test will be place here for each component when need it. • Types: Contains all the interfaces • Common: include all files that works as helpers