NancyBolstad/giphy-app

Gif search app made with React and TypeScript

Gif Search App

A simple gif search React app made with GIPHY API.

Technology Stack

• TypeScript
• React
• Styled components
• Storybook

Demo

This app is deployed on the following platforms:

• Heroku: https://giphy-react-app.herokuapp.com/
• Github Page: https://nancybolstad.github.io/giphy-app/

View design/prototype: https://github.com/NancyBolstad/giphy-app/blob/master/doc/giphy-design.pdf

Running locally in development mode

Ensure you have yarn installed

yarn install
yarn start

Testing

You can run UI test with Storybook

yarn storybook

Features

• Async fetching
• Display search results in a Masonry-like grid layout/photo gallery
• Support infinite loading: keep loading more images when user clicks the "Load more" button
• Show trending gifs in the index page
• Responsive design. Mobile-first.
• Meet the Web accessibility requirements.

TODO:

• UI Test
• Unit Test
• Dark/light mode toggle
• Progressive image loading
• Add routing: Keep the URL in sync with the search input.