Creating "Your Camera Gear" with React

It is the end of Module 2/5 on my SWE bootcamp at Flatiron School and it is time to build our own apps with React. The time has come to chose a topic and start building something from scratch.

Excited and terrified

Up until this point all the exercises I had worked on came with the basic design already built in and it was just a matter on knowing how to pass props from one component to another, or how to update the State. Once I was asked to build everything from scratch I felt completely lost.

With no time to loose I decided to build and app related to something I'm passionate about, something I enjoy doing on my own. Is then when it hit me. Camera Equipment!! Huge surprise...

I have a lot of camera equipment that I some times buy and sell in order to buy other camera related things. Why not building something that could help me keep track of my purchases?

Once I decided the topic it was time to start building it, but first, I wanted to plan out the entire app on a piece of paper. No surprises this time. No more build-as-you-go.

From ideation to execution

Ok. I had the idea and I knew what the app would do. I also had a roadmap of how it should look like (kinda...), now I only had to figure out how to make it work.
Sure, I had been learning react for the past weeks and I was feeling more and more confident about it, but I had no clue about how to put these concepts into a real life application.
Having those drawings from the beginning really forced me to push myself to learn how to code it, instead of letting me code something I was already confident about how to build.

The incredible power of React

At this point I have been working on Your Camera Gear for two weeks and I am still polishing code and fixing some bugs here and there, but the bulk of the application was made really really quickly. I'd say I was able to put together a semi good looking website within the first two days of working on it. It was already fetching info from my database and displaying it nicely on my homepage, and it had several components built in into the home page and there were a couple of events triggering when clicking in my items.

Not only that, some of the components I had built were very easy to recycle and create new components off of the existing code. It is just a matter of which props they are receiving. Simply amazing.