React Course Project

It's been a bit tumbleweedy here in my blog since I pivoted away from AI and launched into learning web development. I've been immersed in learning first vanilla JavaScript, HTML and CSS, and then React, so as to plug the holes in my general software tech stack. This has been great, but learning the basics of something doesn't lend itself to flashy projects and demonstrations (yet), hence the lack of posts.

The mini project this post is about is nothing special, but it can produce pictures of frogs. The world needs less war and more frogs, so I figured I would write this post about it. It provides a little snapshot of where I'm up to in my web-development-from-scratch journey.

Context

The React course I'm currently doing is an in-depth Udemy one called Hands-on React: 25+ Projects Featuring Next.js, TypeScript, Prisma, Zod, Shadcn, Axios, Router 6, Query 5, Redux Toolkit, by the excellent John Smilga, also known on various platforms as Coding Addict.

Each course section has a mini project to work on, to consolidate the latest concepts and build on the earlier ones. Typically these are presented as a series of broad steps to complete, and then it's up to me to complete them. Some I find easy; others are more of a struggle and I have to get help from the internet (Perplexity, Claude and ChatGPT) or from John's subsequent walkthrough of the solution. But the code here is more or less all my own, except for a lot of the CSS which was provided.

It would obviously be quicker to use a LLM to write entire chunks of it but the point is for me to learn React, not to get to a working app as fast as possible.

What It Does

This mini-project utilises React Query to interact with the Unsplash API. Unsplash is a popular photography image library. Their API allows applications to query their massive image database and returns a set of image URLs matching a query.

As you can see from the screenshot, the user of my project app types in a search term. This is turned into a URL in the format expected by Unsplash and then Axios and React Query are used to send the request to the API. It returns the image links and these are then displayed as HTML image elements.

If you want to try it out, it's deployed and live on Netlify here:

https://unsplash-react-tutorial-project.netlify.app/

Dark Mode

There's a button in the top right to toggle Dark Mode, which changes the CSS colour scheme by conditionally injecting a class into the body element of the DOM, as well as displaying either the sun or the moon icon to match.

It initially checks if there's a media preference set '(prefers-color-scheme:dark)' in the browser and sets the initial mode to light or dark theme if the user has a known preference. Once they toggle the button, it's saved to localstorage and the app will resume with the previously chosen mode if the web page is refreshed and the app reloaded.

 

React Under the Hood

Here's an overview of what the application is doing in React for anyone interested in the technical details. I'm coding in VSCode and using Vite. For source control I'm using Git and pushing changes up to the project Github repo.

My app has three child components: ThemeToggle, to control the light/dark mode; SearchForm for the input; and Gallery for displaying the retrieved images.

I have a global context file which uses React's CreateContext and useContext functionality to manage global state and avoid 'prop drilling'. For example, the search term that the user inputs is handled in the SearchForm component but needed by the Gallery component in order to request images from the Unsplash API using that search term. In order to streamline the state management, the global context file has the useState variable 'searchPhrase' that then can be accessed anywhere it's needed in the application through a custom hook I created called useGlobalContext. The main app component is wrapped with a ContextProvider so that all the components have access to the hook and thus the context.

The app is also wrapped with a QueryClientProvider, enabling the React Query functionality at a global level. When a component needs to perform an Unsplash API request (the Gallery component in this case), it can then do so. This is through useQuery, which is for get requests. For post, patch or delete requests you'd use useMutation instead but for this app we're just requesting images, not changing, creating or deleting them. I used Axios rather than the built-in fetch because it has better error-handling and automatic JSON parsing.

My project Github repo is at the link below, if you want to see the code. The Readme has the course-provided steps I followed to create the app.

https://github.com/tituspowell/unsplash

 

Thanks for reading!