The primary goal of Rancid Tomatillos was to display movie data from multiple APIs in a user friendly way and to gain experience building an application from scratch using the React framework. As a user, you have the ability to view all movies from the API, as well as search for a specific title, and view additional information about the movie by clicking on a movie card.
The main motivation of this project was to gain experience building a React application, Cypress End-to-End testing, and React Router.
When a user visits the website, they will see a display of all the movies from this API. All the movie cards display the movie cover as well as a ranking out of ten for that movie.
When a user clicks on any of the movie cards, they will see a new page which displays additional information about that movie. From this page, the user can click on the Home link in the header or they can click the back button in their browser to get back to the previous page. When the back button is selected, the movies page should display where the user scrolled to before selecting the movie.
Under the Hood
This npm package was used to maintain the scroll history of the movies page.From the movies view, the user can type into the search bar at the top of the page to search for a movie title. The page will automatically update to display only the titles that match what is in the search bar.
To maintain a direct and great user experience, we added an error page. The error page is designed to be dynamic to the type of error a user may encounter. Styling this page, we wanted to make it fun and direct.
In order to keep our user experience positive, we implemented a loading screen that will display while information is being retrieved from the API.
Responsiveness was a consideration while working on this project. See below for screenshots of the mobile friendly version of the website:
Throughout our project workflow, we found that our improvement was team-driven with solution-based problem solving and individual learning/teaching opportunities. Whenever there were areas for improvement, one team member had a solution and the desire to teach the other. This kept us moving at a great pace and developed our understanding of new technologies daily.
- Teamwork & Communication: Together we achieved our set sprint goals in an organized fashion with respect to our project board. Communication was transparent and respectful. Having the ability to relay information, thoughts, and ideas to one another during paired programming allowed a smooth process in development and productivity.
- Workflow: We found a great balance of paired-programming and individual work time. This allowed us to be extremely efficient and remain on task with what we planned to accomplish each day.
- Exploring & Researching: Any time we hit a struggle, we took the time to research and apply. Finding certain answers may not have been the exact ones, but we stepped out of our comfort zone exploring other
npm librariesthat catered to our specific needs and end goal. - Overall: During this project, we learned a lot individually and as a team. We both feel that after completion of this project, we have a clear understanding of each learning goal and we had fun doing it!
React.js, React-Router, Cypress.io, Fetch, JSON
Npm libraries: scroll history, html parser
This website was deployed to Heroku through Heroku’s automated deploy pipeline. The API was previously deployed through Heroku by Turing staff.
