A search app for displaying themed GIFs (from the GIPHY API) in a grid layout.
A deployed version of this app is available here: gifGrid
This project makes use of:
After cloning the repository, run: npm install
To use the API, you will need to apply for a free API key from GIPHY (details of how to do so are available here).
After you have this, create a .env file and input the API key.
The .env file's contents should be as follows:
REACT_APP_GIPHY_API_KEY="API key here"
An example.env file is included for reference.
- The gif frames initially show a default loading GIF, and return to this when no GIFs are found.
- GIFs are cropped to a square regardless of their original proportions.
- The 'rotate' button moves the order of the fetched GIFs, allowing them all to be seen at differing sizes.
- Hovering over a gif shows its title and user (if available).
- Allow pagination / more variation of GIFs from the same search term (currently limited to the top 7)
- More information displayed via the tooltips
- Responsively switch the grid layout from landscape to portrait (ie largest at top, medium on second row, small on third row) using media queries.