Rancid Tomatillos

Table of Contents

• About the Project
• Technologies Used
• Contributors
• Learning Goals
• Project Evolution
• Project Reflections
• Extensions
• Future Goals
• Organizational Resources
• Set Up
• Application in Action
• Testing

About the Project

Rancid Tomatillos is a React-based web application that offers users the ability to browse movies, view detailed information, and search by title or genre. It features an autoplay trailer for an immersive experience when a user selects a movie to explore further.

For project specifications, visit the project spec.

Application in Action

View Movie Details

Search by Genre

Technologies Used

Languages

• JavaScript

Frontend

• React
  • react-dom
  • react-router-dom

Testing

• @testing-library/react
• @testing-library/jest-dom
• @testing-library/user-event
• Cypress
• Web Vitals

Build Tools

• react-scripts

Others

• ESLint
• Browserslist

Contributors

• Eli Davidson
• Nathan Hodnett

Project Manager

• Kayla Gordon

Learning Goals

• React component lifecycles and state management.
• End-to-end testing with Cypress.
• Asynchronous functions and API calls.
• Dynamic and conditional rendering in React.

Project Evolution

The concept of genre carousels was initially considered but moved to future development goals to maintain the scope for MVP. Component structures evolved throughout the project to optimize functionality.

Project Reflections

Challenges were faced with React's rendering based on state and timing within Cypress tests, which required strategic waits and state checks.

Extensions

"More React Functionality" was chosen, adding search and filtering capabilities to the movie selection process.

Future Goals

• Implement genre-based carousels.
• Improve error handling for unavailable YouTube videos.
• Add favorites feature and user personalization.
• Deploy with Heroku and enhance responsive design for movie cards.

Organizational Resources

• Project board on GitHub for task management.
• Figma wireframes for design planning.

Set Up

To set up the project locally:

1. Fork and clone the repository.
2. Navigate to the directory and run npm install to install dependencies.
3. Start the application with npm start.

Testing

Cypress is used for end-to-end testing. Run npm test to execute the test suites.