- About The Project
- Project Spec
- Technologies
- Getting Started
- Installation
- Usage
- Testing
- Contact
- Acknowledgments
- Reflections
Rancid Tomatillos is an application that utilizes multiple APIs to display movie data in a user friendly way. The main goal of this project was to gain competency with React fundamentals, create a multi-page UX using React Router, and to learn how to test React components & asynchronous JS using Cypress.
As a user, you will be able to view all movies from the API on page load, as well as search for a specific title or search movies by rating. If the user would like to view more details about a specific movie they can click on a movie card and a single movies overview will be displayed.
Rancid Tomatillos is an application built in week 14 of the Turing School of Software and Design front-end engineering program. The goals of this group project were to:
- Utilize React and React Router
- Test the UI/UX using Cypress
- Utilize Lighthouse and Wave for accessibility
- Make network requests to API endpoints to retrieve and manipulate data
- Implement error handling
You can find the project here and follow the instructions below to get started.
- Clone the repo
git clone [email protected]:emilyjmiles/fitlit-group-project.git
- Install NPM packages
npm install npm start
- Explore the website.
720-Rancid-Tomatillos.mov
720-Rancid-Tomatilllos-Movie-Details.mov
New feature ideas:
- Make mobile accessible
- Refactor Slick Slider to remove "ghost" movie cards
- Refactor filter movies functionality to handle conflicting inputs
We utilized tesing to create a smooth user experience using Cypress.
Alycia Canavan - LinkedIn GitHub
The following resources helped us build this project:
During this project, we were able to to comfortably work together and asynchronuously do to our continuous transparent and respectful communication. Together we were able to plan and execute this project without many hurdles. When we struggled with content we worked together to find a solution so that we had clear understanding of the material and how to implement the new techologies! We did not always find the right answers, but we stepped out of our comfort zone, exploring other npm libraries and reached out to our support system to help solidify anything we were uncertain of.