Blockbreaker is a solo project built by Cole Fiscus. It was based off of a Turing School of Software and Design project that takes inspiration from the Rotten Tomatoes website. The goal was to create a React app while using the fetch API, CSS, and JavaScript to retrieve data about different movie titles and display that data in an interesting way.
Visit the deployed site - Blockbreaker. I've used Heroku so initial load may take longer than usual.
For more detailed additional features, see below.
To add more features to this project, or to simply view the code in action...
- Clone this repo (or first fork it and then clone) using
git clone [THIS REPO'S SSH KEY] [OPTIONAL DIRECTORY NAME]inside of your terminal. cdinto that directory.- Install any necessary dependencies using
npm install. - Enter
npm startto run the app on a local server or open the code in your text editor. - The app should open automatically, but you can also navigate to
http://localhost:3000/to view the app as well.
- The app incorporates React Router to navigate between pages of which there are 2 main pages + dynamic routing for the various movie detail pages.
- The movie trivia section that appears upon loading the main page is a separate API call and will display a new question on page reload.
- A loading screen for UX when waiting for API call responses.
- Playful CSS animations attempting to recreate the feel of the movie shelfs seen at the now defunct movie rental chain BlockBuster.
- The app needs to be fully responsive, it is currently only suitable for desktop use.
- The developer hopes to make a back-end server along with user authentication to allow users to sign in and save ratings on their watched movies.
- The inclusion of movie trailers would also be a good addition for the site.
- Effective display of data in my opinion, I enjoy the 'movie shelf' on the home page with the animations.
- Multiple fetch calls to multiple endpoints utilized effectively.
- Effective UX, in my opinion.
- Figuring out spacing of all elements.
The link to the spec sheet that guided this project: Spec