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
- Overview
- Installation Instructions
- Project Goals
- Directions and Features
- Code Architecture
- Project Challanges
- Project Wins
- Technologies Used
- Testing
- Future Iterations
- Authors
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.
- Clone down this repository
- Run
npm install - Run
npm startin your terminal - Go to http://localhost:3000/ and you should see the website
- Enter
control + cin your terminal to stop the server(s) at any time.
- 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
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.
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.
-
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
- 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
- React
- React Router
- Javascript
- CSS3
- HTML5
- Fetch API
- webpack
- PropTypes
- NPM
- Cypress
- numeral
- day.js
- animate.css
- EsLint
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:
- 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
-
Project Manager: Robbie Jaeger