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.
- 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
- React
- React Router
- JavaScript
- Cypress
- HTML
- CSS
- Fetch API
To run this project locally, follow these steps:
- Clone the repository
git clone https://github.com/reesegreen2014/rancid-tomatilloscdinto the directory- Install dependencies using
npm install - Start the development server by running
npm start - Enjoy reading about movies!
- 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.
- 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.
- Turing for education.
- CSS Tricks for CSS inspiration.
- React.dev for React documentation.
- Cypress Docs for Cypress training and documentation.