This is an application to display movie posters and then access movie details through an API. The user can access a list of movie posters, select any one of them, & be provided information about that specific film, including its rating, description, release year, tagline, running time, and genre(s).
The application is deployed and can be accessed online here.
This project was a paired project for Turing School of Software & Design during module 3.
The project rubric is linked here.
The joint goals of both partners were to gain competency with React fundamentals, learn how to test React components & asynchronous JS, practice refactoring, & create a multi-page UX using Router.
Hayley also wanted to focus on mastering flex-box, practice React skills used in upcoming assessments, terinaries, and successful site deployment.
In addition to the joint goals, William wanted to focus on data-cleaning, Cypress, and conditional rendering for error-handling.
A challenge we encountered was conditional rendering and ternary syntax.
Big successes were setting up React components, application foundations, & implementing JSX.
A challenge was setting up Router, especially with match and the need to convert our Movie functional component into a class component.
A success was setting up stubbing of api calls in Cypress.
A challenge towards the end of the project was testing for 500 and 404 errors and URL pathnames.
Big successes were getting the site deployed and (despite already feeling satisfied) finding numerous opportunities to DRY up our code.
Written in JavaScript, HTML, CSS, & JSX
Utilizes NPM, Node, Cypress, Router, & React
Deployed on Surge
Built with Visual Studio Code
When the user visits the application here, they will be able to see a page tiled with movie posters. If they click a poster, they can see details for that movie. They can return to the original posters page by clicking "BACK" on the details page or the back button on their internet browser.
After returning to the poster page, they can use the forward button on their browser to return to the previous movie information page, or they can click a new movie poster to see that movie information page instead.
Each page has a unique URL that can be bookmarked and/or manually typed in the address bar.
- The user will be able to add movies to a list of favorites.
- The user will be able to search movies by name.
- The user will be able to search movies by genre.
Project completed by William Phelps & Hayley Witherell
Project designed by instructors at Turing School of Art & Design