/rancid-tomatillos

Primary LanguageJavaScript

Rancid-Tomatillos

Mod3 2108 Pair Project

Table of Contents

Abstract

Rancid Tomatillos is an app that display movies with color coded borders that correspond with its ratings. If a user clicks on a specific movie poster, the user is taken to the detail page of that specific movie. The user will see title, ratings, summary and release date for that movie. The user also can see movies separated into different genres. For example, if the user clicks on Romance link, the user would be taken to a page with movies under that genre displayed.

Technologies

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

Illustrations

Rancid-Main

Rancid-Detail

Rancid-RomanceGenre

Install

  • Clone this repo to your machine
  • Cd into the directory rancid-tomatillos in the terminal
  • Run npm start in the terminal
  • In the browser go to http://localhost:3000/

Wins

  • After much research and trial and error, we got the components of React to render only after fetch API is complete.
  • We learned and applied Router V6 and Cypress in the Project

Challenges

  • Fetch API
  • Cypress Testing
  • Router V6

Future Iterations

  • Add a trailer link for each movies' detail page

Contributors

Specs

Project specs can be found here

Demo

  • Video demo can be found here