Skip to content

camaragon/rancid-tomatillos

Repository files navigation

Rancid Tomatillos

Overview

Inspired by the popular film rating sites, Rancid Tomatillos is a page where users can interact with a display of several movies and view specific information based on the movies chosen. A user can search movies by title, sort movies alphabetically, or see movies in order of their average rating.

Contributors

Cameron Aragon

Connie Hong

Project Links:

Deployed Site Page

Project Spec

Learning Goals:

  • Implement React fundamentals, including React hooks
  • E2E testing asynchronous JavaScript and React components with Cypress
  • Refactor code to implement React Router
  • Create a multipage UX (with React Router)
  • Successfully fetch movie data through Network Requests to display on page

Technologies Used:

  • JavaScript ES6
  • React
  • Cypress
  • React Router
  • ESLint
  • SASS/ SCSS
  • Moment.js
  • Bootstrap

In Action:

Screen Shot of movie

gif of movie selection

gif of ratings

gif of alphabetical movie titles

gif of search feature

Setup

Clone down the repo from the GitHub project link to your local machine.

Once you have cloned the repo, change into the directory and run npm install in terminal.

Then, run npm start in terminal.

Wins

  • Achieved 100% score in Lighthouse accessiblity

  • Incorporated responsiveness with media queries.

  • Gained experience and knowledge with E2E testing using Cypress.

  • Great teammwork

  • This was a fun project and we're happy with how it turned out for our first fully functioning project with React.

Future Iterations

  • Expand upon search functionality to include other pieces of data.

  • Build backend server with Express