Vue-based Typescript website

This React website incorporates most of the tools that I currently master. The website displays a grid of photo cards. The data comes from Unsplash API. On mounting, the website makes a fetch request for 30 random photos. The data obtaines form the API is stored in an array. We map over this array to display each of the elements in their individual rusable card component.

Each card component displays information about the photographer (and link to their profile) and number of views. Each photo is itself a link that takes you to a new page which displays additional information about the photo and the photographer. The original set of photos persits if we go back to the main page. The different pages in this website are handled with React Router.

The user can explore photos by typing on the textarea and look for a theme. They can also choose the number of photos by typing a number in the input area. A large amount of the application state is stored in Context. This is done to avoid extensive prop drilling. In particular, the user input as well as the photo data form the API is stored in Context. However the data to populate individual photo cards is passed via props.

The grid of photos is styled with CSS grid and is fully responsive. Each image becomes a little bit transparent on hover and the cursor shifts to pointer to indicate interactivity.