Rancid Tomatillos

Rancid Tomatillos is a React application that fetches and displays movie data from an API. Upon page load the application displays movies in a grid format and allows users to click on an individual movie for movie-specific details.

Features

• Display a grid of movies fetched from the API
• Click on an individual movie for specific details
• Gracefully handle errors when fetching movie data
• Responsive across a variety of devices and screen sizes

Technologies Used

• React
• React Router
• JavaScript
• Cypress
• HTML
• CSS
• Fetch API

Installation Instructions

To run this project locally, follow these steps:

1. Clone the repository
   • git clone https://github.com/reesegreen2014/rancid-tomatillos
   • cd into the directory
   • Install dependencies using npm install
   • Start the development server by running npm start
   • Enjoy reading about movies!

Challenges

• This was our first React project so getting comfortable with the syntax changes from vanilla JavaScript was a bit challenging at first.
• Ensuring responsiveness across all devices at various breakpoints throughout the application.

Wins

• Seamless API integration
• Successfully managed application state using React hooks
• Error handling
• From the outset, we prioritized building this application with responsiveness in mind. This foresight ensured that when we reached our Choose Your Own Adventure (CYOA) implementation, the process was straightforward and did not necessitate a comprehensive overhaul of our application.
• Testing both happy and sad paths using Cypress
• Collaboration: this was a fun project to work on as a pair.

Screenshots

Card Flip

Movie Details

iPhone Web View

Acknowledgements

• Turing for education.
• CSS Tricks for CSS inspiration.
• React.dev for React documentation.
• Cypress Docs for Cypress training and documentation.