Rancid Tomatillos

It's Saturday night and you want to watch a movie, but you don't know what to watch? You're in luck! 'Rancid Tomatillos' is an easy-to-use web application for viewing movie posters, details and trailers.

Fully deployed application: Rancid Tomatillos

Table of Contents

1. Overview
2. Installation Instructions
3. Project Goals
4. Directions and Features
5. Code Architecture
6. Project Challanges
7. Project Wins
8. Technologies Used
9. Testing
10. Future Iterations
11. Authors

Overview

Rancid Tomatillos is a Mod 3 project at the Turing School of Software and Design that was built with create-react-app and tested using Cypress. React, React Router and data pulled from a RESTful API were utilized to display a dashboard of movies. The user can select a single movie by clicking on its poster to learn more about it. Additionally, the user will find Rancid Tomatillos to be a responsively designed application that they may use on many different screens.

Installation Instructions

1. Clone down this repository
2. Run npm install
3. Run npm start in your terminal
4. Go to http://localhost:3000/ and you should see the website
5. Enter control + c in your terminal to stop the server(s) at any time.

Project Goals

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

The project spec and rubric are here

Directions and Features

Scroll through the main page to view all movies in the database. Each movie's title and rating are visible.

Click on a movie poster to view its details. These details may include runtime, rating, release date, budget, revenue, overview and an embedded video trailer. Click the back button below 'Overview' to go back to the main page.

Code Architecture

The React architecture is based on two class components (App.js, MovieView.js) and five functional components (Header.js, MovieContainer.js, MovieDetails.js, MoviePoster.js, Trailer.js). The class components hold state and are in charge of the network requests, while the functional components render information passed down as props.

Project Challanges

• This was our team's first time working with the following technology and concepts, which naturally came with a learning curve as we implemented them into our project:

  • Implementing React and React Router
  • Testing React components and asychronous JS using Cypress
  • Deploying app using Heroku

Project Wins

• Created a fully funtional MVP with time scope of 1.5 weeks
• Gained a strong understanding of React framework
• Successfully implemented asynchronous JS
• Completed a thorough project plan and wireframe, which kept our team on track
• Implemented React Router for a multi-page UX
• Gained competency with Cypress E2E testing framework
• Utilized typechecking with PropTypes

---

Technologies Used

• React
• React Router
• Javascript
• CSS3
• HTML5
• Fetch API
• webpack
• PropTypes
• NPM
• Cypress
• numeral
• day.js
• animate.css
• EsLint

Testing

Cypress was used for E2E and integration testing. To test the application: run npm run cypress and you will have a window open that gives you the ability to click on each test and see whether they pass. Make sure you've run npm start in a separate terminal tab before you begin the testing.

Example of a successful test:

Future Iterations

• A login page for users where they could store movies to a watchlist or favorites and could add their ratings
• A search bar to quickly filter a movie by title
• An option for users to sort movies by rating or filter by genre

Authors

• Chez Gallo

• Ethan Tweitmann

• Project Manager: Robbie Jaeger