React Gif Search

I had an idea for a project to use the GIPHY SDK, where I’d make a GIPHY profile and heart my favorite gifs. I’d then use their API to pull a list of my favorite gifs that could be searchable on a one page React app. Unfortunately, they did not have a user API endpoint available for me to grab my favorited gifs.

I still liked the project idea, though. Instead of using the API I simply saved gifs into a folder and created a JSON file with the gif names, tags, and alt tags. To add more gifs, I would add a gif to the folder and add it to the JSON file.

The page has a search bar at the top to filter gifs based on their tags. As a user types in a search, any gifs that don’t have tags matching the search criteria are removed.

There are clickable badges under the search bar with the most used tags. When a badge is clicked it updates the search bar, which updates the filter.

I used React Bootstrap for their Cards and Card Columns to display the gifs with their tags below, which downscale to mobile easily. The tags are clickable, and work the same way as the badges by updating the search bar and filter. When the page is first loaded the gifs show up in a random order.

I used GitHub Pages to deploy the React app on Github.

Visit Website Github