This project was the outcome of a 48-hour pair-programming hackathon.
We were charged with using React, React-Router, and RESTful APIs to build a multi-page app of our choice. To complete the project we would have to host the repository on GitHub and deploy the application on Heroku or Netlify before the time runs out!
Random Film Generator
The Developers:
Gary Smith and Victor Liew
Timeframe:
48 hours
Technologies Used:
-
HTML5
-
JavaScript (ES6)
-
Git
-
GitHub
-
SASS
-
Bootstrap
-
React
-
React-Router
-
RESTful APIs
-
Axios
-
Trello
Approach
Myself and Victor spent time wire-framing and discussing the possible functionality the app should have. We wanted it to be useful and not just a standard movie search.
We believe other sites already do this and to get actual real world use out of the app it would need to serve a better purpose. We decided that a randomiser would be ideal. How many times do you want to watch a movie but can't decide which one!!?? You spend most of the movie time scrolling through your streaming provider to eventually settle on some movie you perhaps are underwhelmed by! In our app this time is spent simply clicking a button. The button takes the API key and randomises this to display a movie.
We also added search functionality so that you could search current popular movies:
And code for Top Rated Movies as well:
Pair Programming
We had a lot of fun pair programming and collaborating throughout this project. This was definitely a test of our team work as much as our ability to code and style this page out. We utilised Slack and Zoom to screen-share and work together.
Error Handling
We handled API errors through Try/Catch and had the following gif ready for if there were API issues further down the line:
Wins
-
We ended up with a fully functioning application that did exactly what it was intended to do.
-
Using Bootstrap for the first time I found easy to use and helpful.
-
Data drilling - extracting the right information at the right time.
-
I think our code is well organised and reasonably clean with good structure.
Challenges
-
Api documentation is long and detailed which meant it was easy to miss information which would definitely assist with end points or linking images.
-
We had to spend time drilling down into the API data we got back as Objects were nested in Arrays which also held Objects so this was tricky to navigate.
-
Time management - this was a short challenge and so every setback felt like it was eating into our deployment time.
Future Improvements
-
Occasionally the random generator finds an empty ID that may have been deleted by the API or user - With more time i would write some functionality to re-render should the page find a title element is blank for example.
-
Although we didn't really want a search function we could have added one.
-
Further search functionality for genre.
Key Learns
-
When destructuring data we had to do this in different ways which was something we didn’t expect. I imagined once I had destructured data I would be able to do this the same way throughout the project. This was not the case due to how the API was structured.
-
Source Control management and importance. This was the first time I had been sharing code with someone contributing.