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...