Architecture

The first thing we are going to look at is the architecture of the app. On the client side, we will have a router, from which all things start flowing. The router will have four routes:

• Home route
• Browse route
• Search route
• Page Not Found route

We will have one service, with three methods that will interact with the Giphy REST API.

Apart from the previously mentioned items, we will have the following components:

• Nav Component: App Navbar
• Home Component: Home Page which shows a random gif
• Trending Component: Show trending gifs
• Search Component: Search a gif
• Giphy Component: Template for a gif
• Page not found Component: To show a page that tells the user that nothing is found

The component tree for this would look as follows: