alinix1/rancid-tomatillos

School Project, akin to Rotten Tomatoes

🍿Rancid Tomatillos🎬

Table of Contents

• Introduction
• Links
• Learning Goals
• Technologies
• Contributors
• Deployed Page
• Setup
• Future Additions

Introduction

'Rancid Tomatillos' is a movie viewing application, not to be confused with Rotten Tomatoes, or Netflix, or IMDB. This is our first project using React.js! It's even better! On the main page of our application a user can view all movies with their movie poster, title, and tomatillo rating of excellence. The user can also search by movie title and the page will auto update with movies that match the criteria. If a user wants to view additional details about the movie, they can click on the movie and will be taken to a movie detail page with movie trailers to swipe through, overview, genres, release date, and runtime. To exit and go back home, just click the X button in the top corner. Happy movie browsing!

Links

• Project Spec
• Project Board
• Wireframe
• Initial Component Architecture

Learning Goals

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

Technologies

Contributors

• Nicole Forseth | LinkedIn
• Ali Nix | LinkedIn

Deployed Page

You can view our deployed webpage here! * Our apologies, but some of the movie trailers are missing until they are updated by the owners of the API, but just click to find a new movie if so!

Setup

1. Start by going here. From here you will want to click on the green rectangular button titled 'Code.' This should open a drop down menu where you should see a link. To the left of the link there should be an icon with two over lapping squares. You can click the icon to copy the link.

2. You will want to clone down the repo with your terminal using git clone [repo].

3. Once you have cloned the repo, change into the directory and install the project dependencies. Run npm install or npm i to install project dependencies.

4. Run npm start to run the app in development mode. Open http://localhost:3000 to view it in your browser. Will automatically reload when you make changes. Control + C is the command to stop the local server in the terminal. If the terminal is closed without stopping the server first it could allow the server to run in the background and cause problems.

Future Additions

• Add submit search magnifying glass button and clear search button to improve user experience.
• Add search bar functionality for movie genre, rating, or other details, for example.
• Add a carousel to main page to allow the user to scroll/swipe through movies similar to Netflix to improve user experience.
• Make CSS more responsive and add mobile-friendly responsiveness as well.