Rancid Tomatillos is a paired project built using React. The application allows the user to navigate to different "pages" or views via implemention of React Router.
On the home page, the user can view all movies and their average user rating. A user can click on various links that navigate the user to different "pages". These pages include an all movies page, movie details page and movie trailer page.
Also on the home page, a random movie image displays on page load. The random image is diaplayed in the banner and provides links that navigates the user to view the random movie's details. The movie details "page" displays the movie's title, poster, overview, rating, and release date.
Click here to demo the fully responsive and mobile friendly application, Rancid Tomatillos.
- React fundamentals
- Build a multipage application via Router
- Testing React components with User Acceptance Testing (UAT) & End-to-End testing
- React
- React Router
- Cypress
- JavaScript
- HTML
- CSS
- React Dev Tools (Chrome Dev Tools)
- WAVE (Chrome extension)
The home page shows a random movie image in the banner with a "See Movie Details" button. This button will navigate the user to the random movie's details page. From here the user can navigate to the movie trailer page or return to the page that displays all movies page by the click of a button.
A sorting feature is on the home page that sorts the list of movies alphabetically or sorts the movies by their rating.
The user can view the movie details by clicking on a movie image in the list of movies on the home page.
The movie details page displays the movie title, poster, release date, average rating, and movie summary/overview.
The user can navigate to the movies trailer page by clicking the "See Movie Trailer" button. This button is only displayed when a user has selected to view the movies detail.
Once on the movie trailer page, the user will see an embed YouTube video of a movie trailer. The vidoe has control options for the user to play, mute, enable full screen, etc. In addition, there are two navigation buttons that navigate the user to view movie details and view all movies.
To get a local copy up and running follow these simple steps.
- In your terminal, clone the repo
git clone git@github.com:lswatson16/Rancid_Tomatillos.git
- cd into the root directory
cd Rancid_Tomatillos - Install NPM packages
npm install
- Start the server to see the local site
npm start
This was our first time building an application in React. In comparison to vanilla JavaScript, React is a breath of fresh air because of its ability to reuse components.
Cypress testing was a bit of a challenge to learn and we hope to improve on testing sad paths in our application.
- User can filter movies by rating, release date, and genre
- User can search for a movie by title
- User can add their own review/rating to the movie
- Sad path testing
Skip installation by using this deployment link to view the application: Rancid Tomatillos
-
No installlation is needed with the provided deploy link.
-
The application was deployed using Vercel.