Skip to content

dcochico/rancid-tomatillos

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Rancid Tomatillos

DEPLOYMENT LINK

ABSTRACT

This project is definitely not Rotten Tomatoes. Nor is it Netflix. Nor is it IMDB. It’s R A N C I D T O M A T I L L O S. Very different! Our application uses Fetch API to display a collection of the most newly released movies. Clicking on a specific movie will take the user to the movie's own page, where the user can read more information and watch a YouTube preview.

SET UP

  • Fork this repository.
  • Copy the SSH key in order to clone your forked repository down into your local device.
  • cd into the cloned directory.
  • Open in VS Code
  • Run npm install to install project dependancies.
  • Run npm start in the terminal to see the HTML page
    • Control + C is the command to stop running the local server.

GOALS

  • Gain competency with React fundamentals
  • Test React components & asynchronous JS
  • Practice refactoring
  • Create a multi-page UX using Router

TECHNOLOGIES USED

React JavaScript HTML5 CSS3 Git Webpack Cypress

WINS, CHALLENGES & REFLECTIONS

Wins

  • Implementing a dynamic nav-bar was super fun, and we're happy with how it turned out.
  • Embedding YouTube videos into our Focus pages was very satisfying to accomplish.
  • Creating a custom 404 error page was also a neat ticket.

Challenges

  • Cypress tended to be buggy, so we would sometimes question whether our tests were failing due to faulty code or not.
  • Additionally, it could get frustrating sometimes when we would implement new features, and completely break our entire Cypress testing suite. We experienced just how sensitive Cypress can be.

Reflections

  • Overall, this was such a fun project! React makes our lives a bit easier over plain old vanilla Javascript, and we are excited to build upon our project with more extensions in the future.

PREVIEW OF APP

  • When the user visits the app, a collection of movies are displayed.
  • The user can click a movie, see additional details, and watch a trailer.
  • The user can search for movies by Title.
  • Application shows loading state.
  • Application is fully responsive across small, medium, and large breakpoints.
  • A 404 page handles unknown routes.

CONTRIBUTERS