sour pomodoro

(It's Definitely Not Rotten Tomatoes...)

A Front End Engineering Project by:

• Kyra Bergsund
• Regan Losey

Project Managers:

• Cassandra Torkse
• Kayla Gordon

---

Abstract

• sour pomodoro is a one-stop shop for some of the worst movies from the past couple of years. The homepage provides a quick view of each movie, with a star-rating visual above the poster. Choose to sort by a number of metrics to find the worst-rated, the oldest, or just alphabetically. Clicking any of the poster redirects you to a unique URL that provides additional data, from budget/revenue numbers, if available, to a numerical rating.

Languages/Technology

• React
• React Router
• Javascript
• HTML
• Sass
• Cypress

Learning Goals

• Gain competency with React
• Create a multi-page UX using Router
• Test React components & asynchronous JS using E2E testing

Install & Setup

• Visit deployed site here Or:

1. Clone this down
2. cd into the directory
3. Run npm install and then npm start
4. Head to localhost:3000 in your browser

Site Overview

• On load, users see a grid of movie posters. A corresponding star-rating visual is underneath. Posters scale slightly on hover.

• In the upper right is a sort dropdown with a variety of sort options. The grid re-renders when a user makes their selection.

• Clicking on a movie poster redirects users to a unique URL. Here they can see a backdrop image from the movie and additional data. Clicking the 'X' in the upper left takes them back to the homepage.

• If, at any point, a user tries to input their own invalid URL, they see an error page that gives them the option to go back to the homepage.

Future Directions

1. Add a search bar to the homepage to search by title
2. Implement filtering by genre
3. Add more data

Project Spec & Rubric

• Here

Resources:

• reactjs.org
• docs.cypress.io

Header background illustration by MITstudio via Adobe Stock