https://github.com/georgewpark/giphy-search

This project demonstrates how React and the GIPHY search API can be used to retrieve GIFs based on a search parameter and display them in a masonry grid layout using pure CSS columns.
https://github.com/georgewpark/giphy-search

css fetch-api giphy giphy-api javascript react typescript

Last synced: 8 months ago
JSON representation

This project demonstrates how React and the GIPHY search API can be used to retrieve GIFs based on a search parameter and display them in a masonry grid layout using pure CSS columns.

• Host: GitHub
• URL: https://github.com/georgewpark/giphy-search
• Owner: georgewpark
• License: mit
• Created: 2018-08-17T18:32:16.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2024-07-03T18:56:10.000Z (over 1 year ago)
• Last Synced: 2025-01-15T11:12:26.764Z (9 months ago)
• Topics: css, fetch-api, giphy, giphy-api, javascript, react, typescript
• Language: TypeScript
• Homepage: https://cdpn.io/bMWGRB/
• Size: 8.35 MB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md
  • License: license.md

Awesome Lists containing this project

README

          
# GIPHY Search

This project demonstrates how React and the GIPHY search API can be used to retrieve GIFs based on a search parameter and display them is a masonry grid layout using pure CSS columns.

![GIPHY Search Demo](demo-image.jpg 'GIPHY Search Demo')

## Live Demo

A live demo is available on [CodePen](https://codepen.io/GeorgePark/full/bMWGRB) and [Netlify](https://giphy-search-api.netlify.app/).

## License

This project is licensed under the MIT License - see the [license.md](license.md) file for details.

## Project Setup

From the root directory, install project dependencies by running `npm install` from the terminal.

Build the files and start the local dev server by running `npm run dev` from the terminal. This should open the dev site automatically at http://localhost:3000/.

You can build the files without starting the dev server by running `npm run build` from the terminal to compile the development build or `npm run prod` to compile the production build.