The main page of the web app we're aiming to create might look something like this:

This page shows that there is a header on top, an input field and a button that can be used to search a string, and a set of results. When we break this page into a set of components, the component list looks something like this:

• Header component: A header that can be used on all pages. It needs to be sticky on the top, and clicking on the links should change the URL.
• GIF cover component: A component that takes a URL as an attribute and shows it. It can also have a height limit. 
• Search bar component: A component that is responsible for getting input from a user and searching for a string with the help of APIs. And when the search is complete, it returns the results with the help of a custom event.
• Search container: A component that will have a Search bar component inside it, and will show GIF cover components based on the result obtained by the Search bar.

Let's take a look at the trending page. What this page is supposed to do, just like the search page, is show a collection of GIFs, but instead of making the user search for a specific string, it needs to show the trending GIFs. You should be able to find something similar on the Giphy site: https://giphy.com/trending-gifs.

This is what it will look like:

As you can see, it doesn't look that much different from the search page. Let's break down the page into Web Components:

• Header component: Same as previously
• GIF cover: The same component that we used on the last page to show GIFs
• Show Trending component: The container component that will make the call to the API to get trending GIFs and create a collection of GIF Cover components

In all, we will be using just three components for this page. 

Let's take a look at the last page. This page is responsible for showing a randomly generated GIF, and this is what it will look like:

As you can see, there is a header at the top, a random GIF, and a button to get another random GIF. Let's break it down into Web Components:

• Header component: Same as previously.
  
• GIF cover: Same as the last one, but we won't be seeing a lot of them. 
• Show Random component: A component that is responsible for making the API call to get a random GIF. It also needs to have a button that needs to trigger the API again when it is clicked. 

Now that we know what Web Components are required for this project, let's start working on it.