Skip to content

elisebeall/rancid-tomatillos

 
 

Repository files navigation

Rancid Tomatillos 🍅

Single Movie View

Rancid Tomatillos is a web application that utilizes the 'create-react-app' package. Using this package created our first react app - Rancid Tomatillos. Rancid Tomatillos - not to be confused with Rotten Tomotoes - focuses on being able to show the user a database of movies in a persentable way and allow interaction such as saving, reviewing, and watching trailers of said movies. Although not all features are implemented just yet - our app still provides a great way to parse through a database of movies and view information about the movies.

Authors

Technologies Used

React

Cypress

JavaScript

NodeJS

Git

HTML5

CSS3

Demo

Screen Shot 2021-10-25 at 2 25 08 PM Homepage

Single Movie View Single Movie View

Trailer View Trailer View (Dark theater mode)

Search Demo Live Rendered Searching

Responsive Styling Responsive Styling

Installation

Either use the green "download code" button downloadbutton at the top of the page to copy a clone link or right-click here and click "Copy link address"

From there open your terminal and navigate to the directory you would like to store the web app inside of

Once you are in the directory execute the following command:

git clone https://github.com/natesheridan/rancid-tomatillos.git

(this command assumes that the Github link you copied above matches.)

then navigate inside of the directory and run the following commands to run the developer server:

  cd rancid-tomatillos
  npm install
  npm start

After you have started the server you should be able to find the website visible at this URL

Challenges

Dumbing down our vanilla JS minds to work better with react.

Wins

A great first look at react and how powerful it is as a framework. Things that would have taken us hours to code in react takes 10 minutes. As mentioned above - React takes a lot of the guess work out of coding, and we were not used to that. After having gone through this project, we can step away from it with a new understanding of "reusable code"

Future Features

User Favorites ❤️ Ratings System ⭐️ Deploy our own ExpressJS API backend - for use with external data to algorithmically map our movie list. (Coolest car scenes, best car appearances in movies, etc.)

About

Mod 3 Pair Project

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 94.0%
  • CSS 5.5%
  • HTML 0.5%