Grouch Potato allows users to browse todays top movies! Users can scroll through a thumbnails of all movies, or usee the search function to find a specific movie by title. When users click on a movie thumbnail, they are brought to page that displays movie details about the specific movies.
Click Here to Visit Grouch Potato
This project was bootstrapped with Create React App. Tests were done using Cypress.io.
Grouch Potato is built with React and is controlled by seven main JavaScript files:
App.js
contains all other elements, and is the home of ourBrowserRouter
MainDisplay.js
displays theHeader.js
element and the grid that renders ourMovie.js
components.Header.js
holds our title, logo, and search elements.Movie.js
contains the thumbnail of the movie poster, and allows users to click on the movie to see more details. It also contains a hidden elemtn that allows screenreaders to display the title, without it being rendered outside of the movie poster.IndividualView.js
individual view displays detailed information about a movie, but showing a still from the film, and containing theFooter.js
.Footer.js
footer renders the data associated with the film, and confirms that there is data available before rendering.Error.js
contains the message that is displayed when a user encounters and error.
run git clone git@github.com:DrewBradley/rancid-tomatillos.git
run npm install
run npm start
Navigate to localHost:3000
Brian Forbes Drew Bradley Johnny Cassidy
- Implementing Cupress.io for testing.
- Using React Router for conditional rendering.
- Achieving 100 on Lighthouse audit for Accessibility.
- Teamwork and Collaboration
- Creating a potato-based rating scale.
- Using a custom logo.
- Displaying an error component.
- Navigating how to implement the search function.
- Using new technologies including Cypress, React, and React Router.
- Fetch videos and embed them so a trailer can be viewed when the mini poster is clicked in our individual movie view.
- Refactor fetch request so we can add functionality to search by genre.
- Add functionality to be able to search movies by rating.
- Create user accounts, so users can add movies to favorites.
- Build out backend to allow users to rate movie, so we can calculate the average rating.