1
Watch
2
Star
0
Fork
25
Issue
e-spitz
e-spitz
pushedAt 1 month ago

e-spitz/rancid-tomatillos

Rancid Tomatillos

Deployed App

Table of Contents

Project Spec

Rotten Tomatoes? More like Rancid Tomatillos! Your go to app for exploring movie details, ratings, and trailers.

The main goal of this app was to create our first application using React. The user is able to come to a home page and browse through a collection of movies. The user can click on a movie and be navigated to a page that displays the movie's details, ratings, information, and trailer video. The user can also user the search bar to filter movies by title.

The project spec can be located here.

Learning Goals

To solidify and demonstrate the understanding of:

  • Solidify and demonstrate the React framework
  • Learn and incorporate Cypress testing
  • Display and demonstrate error handling with API calls
  • Implement async and await within the API calls
  • Create a more functional and friendly user UX/UI with Router

Functionality

Movie Main Page

  • A user may browse a collection of movies on the main page
    Main page movie browsing

View Movie Details

  • The user can click on a movie poster to view more details on that movie
    Movie details page

Search By Movie Title

  • The user can search by movie title via the search bar and clicking the Search button
    Search movies by title

Mobile View/Responsive

  • Site is responsive for desktop, tablet, and phone screen layouts
    Responsiveness

Accessibility

  • Site displays a 100% accessibility rating

Screen Shot 2021-09-06 at 8 05 17 PM

Future Additions

  • Add movie to watchlist
  • Add movie to a favorites list
  • Share movies with friends or family
  • Search movies by genre or rating

Installation and Viewing

To view our application on your local device:

  • Clone down this repository
  • Run npm i in your terminal
  • Run npm start in your terminal
  • To view Cypress tests open a separate tab in your terminal and run npm run cypress

Technologies Used

  • JavaScript
  • Semantic HTML
  • CSS
  • React
  • React Router
  • Cypress
  • WebPack/Babel

Contributors

Authors


Back to top

ucloud ads