Rancid Tomatillos

Overview

For this project, our team built a movie review app using React and React Router, focusing on the following learning goals:

• Writing clear user stories and acceptance criteria
• Implementing end-to-end testing using Cypress
• Understanding React fundamentals
• Using network requests to ingest data from an API
• Creating a multi-page UX using Router

Github Repo

Deploy Link

Project Board

Setup Instructions

1. Clone into the repo
2. Enter npm install in terminal
3. Run npm start to connect to localhost:3000
4. Enter npm run Cypress to run tests
5. Navigate to http://localhost:3000/ to view the site

Collaborators

• Marceline Ball
• Kendall Haworth

App Features

• On the main page, view a list of all movies and their ratings
• Click on any movie to view additional information on the film
• From any individual movie, click the back arrow on the page to return to the main view
• Click the app title Rancid Tomatillos to return to the main page
• Use the search bar to search for any movie title

Demonstration:

App Main Page

Search for a Title

Responsive Design

Technologies Used

• React
• React Router
• Cypress for testing
• NPM
• Heroku
• HTML
• CSS
• Github pages for deployment

Reflection

Through refactoring our application to use React Router, we encountered some implementation issues. However, once we had Router working, it became clear how much easier it is to perform conditional rendering using this tool. After spending time writing applications using vanilla JS, we feel extremely grateful for the work that has gone into building React. This tool makes writing web apps much more streamlined.