My First React Project - Hashnode's Hackathon

My First React Project - Hashnode's Hackathon

Anita Ihuman
·Dec 31, 2020·

3 min read

Subscribe to my newsletter and never miss my upcoming articles

Play this article

I am so excited to showcase a mini project that I have built for Hashnode's Christmas Hackathon. In this article, I will share with you my experiences, my inspiration for the projects, challenges I encountered and the lessons I have learnt from this project.

Experience

When I first started my journey to React, I was like every normal beginner, scared and anxious. Each passing day I watched the course, I felt was not making any progress that I could account for, this was both discouraging and exhausting. So, I decided to focus all my attention trying to understand and master React well enough to make something out of it. After 3 months of watching a series of tutorials, I decided to exercise my skills on what I have been able to learn so far.

Inspiration

This project is a Cat Gallery for every kind of cat that you have. The key inspiration for this project is my cat named Lee. I love taking cute pictures of him because he always looks adorable. I figured everyone who has a cat for a pet would love to show it off to the world just as I enjoy showing off Lee. That's how I came about this project.

IMG-1268.jpg 8A1542EE-CAE4-4E3B-9F44-445A72221A8C.JPG

How I built it

Using the basic knowledge of React I was able to create the key functionalities for the project like the nav-bar, Footer, menu-bar, the various pages and the components on each page. I was able to achieve the dynamic cat images through this API and I was able to achieve the random pages using React-router

Screenshot 2020-12-30 at 11.01.40.png

Challenges

The major challenge I encountered while working on this was getting the API to work the way I wanted it to, I intend to add features that will enable persons who access the page to upload images of cats that they have, although I am yet to implement this feature, over time I should have mastered how to get it in place. Another challenge I encountered is the colour choice. This is because I am not so good with picking colours, but with the help of Alabo David Briggs and Victory Brown I settled for the blue, white and black theme. Achieving a responsive mobile version of this project took a lot of time but I was able to find my way around it. Screenshot 2020-12-30 at 11.19.32.png

Screenshot 2020-12-30 at 11.29.33.png

Lessons

During the course of this project, I realised that it is one thing to watch series of tutorial and follow up with them, and it is another thing altogether to muster the courage to make something on your own. I also learnt that Rome was not built in a day, that is to say, I had no prior plans on what functionalities I actually wanted Cat Gallery to have but, immediately I started working on this project, I started getting ideas of what functionalities I expect it to have by the time it is completed. Finally, I learnt that we never really realise how much we are capable of doing until you give it a shot.

NOTE:

If you want to take a peep at my Cat Gallery, here is a link to what it looks like at the moment. Site is still under construction.

Refrences

 
Share this