How to create own Giphy clone in React

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.

Live Demo

Source Code

Last year I created a Giphy clone using the Giphy APIs to improve my skills.

The whole Giphyhub project is divided into 3 parts.

1. API keys

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.

2. Get Gifs

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.

api.giphy.com/v1/gifs/trending

Request Parameters:

Example:

Description:

api_key: string(required)

YOUR_API_KEY

GIPHY API Key.

limit: integer (int32)

20

The maximum number of objects to return. (Default: “25”)

offset: integer (int32)

5

Specifies the starting position of the results. Defaults to 0.

rating: string

g

Filters results by specified rating. If you do not specify a rating, you will receive results from all possible ratings.

random_id: string

e826c9fc5c929e0d6c6d423841a282aa

An ID/proxy for a specific user.

3. Display the Gifs

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.

Live Demo

Source Code

Top time picker packages for React