View The Website here.
|
|
This was a project that my Week 8 coding partner, Kieran Gill and I produced in 5 hours using React.
I am very proud of what we managed to produce in the limited time we had and have therefore decided not to refactor or add to this project, as I wanted to display it as it was at the end of the Hackathon.
-
We were given a list of APIs to explore and given the limited time frame, we decided that our main priority was to find an API that was reliable, free and offered useful and easy-to-manipulate data. After a bit of digging we decided to use the AudioDB API and create a site based around the data we could get from it.
-
We then used Disney Ideation to come up with some ideas of what we could create using the data from the API. We set a timer for each room (Dreamer, Realist, and Critic) to ensure we stayed on track.
-
We then created a very simple low-fidelity wireframe using Miro and a component tree. This really helped us to visualise and understand our final goal.
-
Our aim was to create a simple site that allowed the user to search for a band or artist and then display information about them on the page.
|
|
|
|
-
At this point we had only been using React for 2 weeks, so some of the React fundamentals such as state, props and UseEffect were still very new to us. Prior to the hackathon, I had been working through NetNinjas React course and some of the concepts I had learned here, such as conditional rendering, were very valuable during the Hackathon. My partner also had a very strong grasp of JS fundamentals, so together we were able to quickly get past any potential blockers we faced.
-
We managed to finish the MVP ahead of schedule and thus we were able to implement two of our stretch goals. The first stretch goal was to add CSS styling and the second was to add a feature that allowed the user to discover a random band by clicking a button.
-
It was fairly easy to implement the randomizer feature, as we were able to simply refactor the UseEffect function we had created for the main search feature and also apply the same CSS stylings to it.
-
I really saw the benefits of pair programming, as my partner and I got on really well and I felt that our skill gaps complimented each other, and thus I feel that we both had learned a lot by the end of the day, as well as feeling proud of what we had achieved.
-
At the end of the day we had time for a quick retrospective where we reflected on what went well, the hurdles we faced and what we would do if we had more time. A screenshot of this can be seen below.
-
I feel that our codebase is pretty sloppy and most of the code is in the App.js file and not in separate components. But given the limited time we had, trade-offs had to be made during every hackathon and we decided to focus on the functionality of the app itself.
-
Finally, to finish off the day, we gave a quick 2-minute presentation of our app and ideation process to our peers.
