The details of the requirements for this project are outlined in this project spec.
The live site can be found here.
The data for the project came from here
This is the partner project for Mod 3 at the Turing School of Software and Design. The goal of this application was to develop an understanding of React by building a simple movie display site using principles of development we've been studying for the last 12 weeks but incorporating an entirely new tool set.
The user flow is simple. Upon visiting the site a user is shown all of the movies that exist in the data. A user can click on the poster or title and be taken to another view that shows the details of that movie and return to the main display. Additionally, a user can use the search bar at the top to filter movies by title.
While the desplay isn't complex, the real growth happened in learning the underylying technologies. The project was built with create react app and incorporates React Router, React Content Loader, and a complete end to end testing suite using Cypress.
- Utilize Create React App to build the project entirely in React
- Deepen our understanding of React lifecycle methods
- Incorporate async JavaScript by using the API
- Incorporate React Router to determine page views and update URL accordingly
- End to end testing with Cypress
- Project professionalism with user stories and user flows
- Responsive, accessible, intuitive design
- Error handling for failed fetch requests
The user is greeted with all our movies.
Typing in the search bar filters the movies rendered.
The individual details for a movie.
A lot of new technologies were learned during this project. This was our first time using React to build out a project for Turing. The entire process, from building, to testing, to refactoring went smoothly. We were tremendously detailed in our use of GitHub issues to track changes along the way and incorporated a new process of writing issues as user stories. We also used a new library, React Content Loader, to handle the loading screens during pending fetch requests. We were able to add additional functionality of filtering movies by title in the main display. The biggest win here is walking away with a lot of comfort and clarity surrounding React, lifecycle methods, React Router, and Cypress.
One thing we didn't have to to tackle was displaying a separate error page for a 404 error. If a user navigates to a movie url that doesn't exist they are met with a permanent loading screen.
This project was built with Create React App, React Content Loader, and React Router.
End to end testing was accomplished with Cypress.