This article is for the React Beginners who wants to create something cool using there React skills. We are basically gonna create a Giphy clone here. I think you already have used Giphy gifs on social media. This article is gonna be straight to the point with all necessary items.
Last year I created a Giphy clone using the Giphy APIs to improve my skills.
The whole Giphyhub project is divided into 3 parts.
The first step is to get the API keys so that we can make API calls to the giphy and get the list of gifs to display on our project. For that you basically need to create an APP on giphy developer website and after creating the app you need to generate the keys.
There is a lot of ways to get the Gifs. One simplest way is to make a Request to the trending api which simply gonna return you the list of trending gifs. You can also try random, search, translate and other apis to get the list of gifs.
GIPHY API Key.
limit: integer (int32)
The maximum number of objects to return. (Default: “25”)
offset: integer (int32)
Specifies the starting position of the results. Defaults to 0.
Filters results by specified rating. If you do not specify a rating, you will receive results from all possible ratings.
An ID/proxy for a specific user.
After getting the list of Gifs you basically need to display those gifs in your cards/ normal elements that’s up to you. To make it look good you can add various stuff like transition, hover effects and sharing options as well.
Those are the basic stuff to create the Giphy Clone.
Apart from that you can also add few extra features likes.
- Search bar for searching the Gifs.
- Different tabs/menu for showing Trending, searched, sticker Gifs.
- Auto load new list on scroll.
- Custom designs for your cards.
- Download options.
- Sharing to social media.
You can find all the source code on below repo on Github. Feel free to use it.