In MERN Mediastream, we will add list views of relevant media with a snapshot of each video to give visitors easier access and an overview of the videos on the application. We will set up list APIs in the backend to retrieve different lists, such as videos uploaded by a single user and the most popular videos with the highest views in the application. Then, these retrieved lists can be rendered in the MediaList
component, which will receive a list as a prop from a parent component that fetches the specific API:
In the preceding screenshot, the Profile
component uses the list by user API to fetch the list of media posted by the user seen in the preceding profile, and passes the received list to the MediaList
component to render each video and media details.