React Project Phase 2
For my Phase 2 final project, I made an Image Search App using the Unsplash API. I had some experience with a design tool called Figma and the Unsplash plugin from a previous UX/UI Design course. This project helped me learn about using Unsplash images and working with React.
The app I created lets users search for high-quality images. I used React, which is a tool that helps build websites, along with HTML, CSS, and JavaScript. The Unsplash API lets me connect to their website to get the high-quality images.
I chose a theme of “Press Start 2P,” a bitmap font based on the font design from 1980s Namco arcade games and the app shows Unsplash images when you type in words in the search box. The cool thing is that the website changes the address you see in your browser when you search, without needing to ask the server all the time. This is thanks to React, which makes building apps like this much easier.
The app features buttons that perform various actions, facilitated by json-server to establish a RESTful API for the backend. This setup allows for both GET and POST requests to the json server.
The app’s button functions include:
• Entering words in the search bar to locate specific pictures.
Get Dom Loulie’s stories in your inbox
Join Medium for free to get updates from this writer.
• Clicking “Add” to display additional pictures on the screen.
• Clicking “Remove” to remove pictures from the screen.
The main part of the app is called the “App component.” Then there are three other parts called “Head,” “Explore,” and “Conclusion.” I used HTML, CSS, and JavaScript to make the way the app looks, and these parts all fit together like pieces of a puzzle.
I started by making a few important files like index.html, App.js, index.css, and index.js. To make the app work nicely, I also made files for different sections like Head.js, Explore.js, HelpLayout.js, and RootLayout.js. There are more pages like About.js and Home.js, as well as a Help section with Contacts.js and Faq.js. to manage client-side routes.
Building this app was a big learning experience for me. It was my first time using React, and I had some tough moments figuring things out. But step by step, I got better at it. I liked how I kept things simple and learned a lot about how things work.
When I finished, the app turned out just like I planned in the beginning. I’m proud of how it turned out and how it can do what I wanted it to do.
In the future, I want to add features to make the app more accessible for everyone. This project is important to me because I not only learned about React, a popular web tool, but I also improved my coding skills and ability to bring ideas to life. These experiences will undoubtedly benefit me in my upcoming projects, enabling me to create more modular components and break them down into reusable parts. For instance, components such as “Add to Favorites” and “Remove from Favorites.”
