Do you need to know every detail about every movie that you want to see before you see it? Tainted Tomatillos is the app for you!
This was a paired project, where we were given two weeks to complete a movie database application using Asynchronous JavaScript, React, Router, Conditional Rendering, and Cypress acceptance testing. The Rubric & Spec for this project can be found here
-
Instant Search that populates any movie that matches a user's input
-
Separate movie details display for every movie with data from an API
-
Cypress testing to test all user flows, including both happy and sad paths
-
Responsive and Responsible - Can be used on a wide variety of screen sizes and is fully accessible, with a 100% Lighthouse audit score
- Clone this repo via
git clone [email protected]:battan40/Tainted_Tomatillos.git
- Access cloned directory
- Run
npm install
- Run
npm start
You can learn more in the Create React App documentation.
To learn React, check out the React documentation.
-
Once your app is set up locally, install cypress by running
npm install cypress --save-dev
-
To open and run the Cypress tests, run
npx cypress open
-
Once you access the app, a user is immediately brought to the main landing page where all of the movie cards (each with their respective movie poster, title, and rating) will populate under a header and search bar.
-
To find a specific movie, a user can type into a search bar, where movies will instantly populate below if they match the criteria.
-
To see a specific movie's details, a user can click any movie card, which will bring them to that movie's details page. The movie details page includes: the movie poster, title, release date, rating, tagline, overview, genre(s), budget, revenue, and runtime.
- Gain competency with React fundamentals
- Learn how to test React Components & Asynchronous Javascript using Cypress
- Create a multi-page UX using Router
-
Wants to feel at home with React and its clean modularity when she is finished with this project
-
It was amazing to watch the layers of possibility unfold for us as we grew to understand the way the files communicated through each other. I see a lot of possibility in the future for this application
-
Becoming more comfortable with React and modular file structures; Continuing to practice writing clean and DRY code; Implementing Cypress Testing
-
This project was a very interesting process of continued refactoring as we were slowly introduced to React, Conditional Rendering Router, and Cypress acceptance testing. Overall, I think this project was successful and I plan to continue to add features and refactor in the future.
We were given this project after one class on React. After this, we were completing iterations as we continued to take classes on React, Condtional Rendering, Cypress acceptance testing, and Router. As a team, we had regular check-ins to ensure we were meeting our project and personal goals, which was really helpful for our time management and balanced distribution of tasks.
-
Refactor error handling for UX
-
Add feature to display trailers for each movie
-
Add feature to allow users to rate movies and store their ratings upon reload (persisting data)
Ellie Azaveda GH | Angie Battillo GH |
Functionality | Framework | Structure | Styling | Testing |
![]() |
![]() |
![]() |
![]() |
![]() |