Skip to content

alyciacan/rancid-tomatillos

Repository files navigation

neon-logo-2

Table of Contents


About The Project

Rancid Tomatillos is an application that utilizes multiple APIs to display movie data in a user friendly way. The main goal of this project was to gain competency with React fundamentals, create a multi-page UX using React Router, and to learn how to test React components & asynchronous JS using Cypress.

As a user, you will be able to view all movies from the API on page load, as well as search for a specific title or search movies by rating. If the user would like to view more details about a specific movie they can click on a movie card and a single movies overview will be displayed.

(back to top)

Project Spec

Rancid Tomatillos is an application built in week 14 of the Turing School of Software and Design front-end engineering program. The goals of this group project were to:

  • Utilize React and React Router
  • Test the UI/UX using Cypress
  • Utilize Lighthouse and Wave for accessibility
  • Make network requests to API endpoints to retrieve and manipulate data
  • Implement error handling

(back to top)

Technologies

React React Router Cypress CSS3 NodeJS Webpack

(back to top)

Getting Started

You can find the project here and follow the instructions below to get started.

Installation

  1. Clone the repo
    git clone [email protected]:emilyjmiles/fitlit-group-project.git
  2. Install NPM packages
    npm install
    npm start
  3. Explore the website.

(back to top)

Usage

720-Rancid-Tomatillos.mov
720-Rancid-Tomatilllos-Movie-Details.mov

New feature ideas:

  • Make mobile accessible
  • Refactor Slick Slider to remove "ghost" movie cards
  • Refactor filter movies functionality to handle conflicting inputs

(back to top)

Testing

We utilized tesing to create a smooth user experience using Cypress.

(back to top)

Contact

Contributors

Alycia Canavan - LinkedIn GitHub

Emily Miles - LinkedIn GitHub

(back to top)

Acknowledgments

The following resources helped us build this project:

MDN Docs Turing School

(back to top)

Reflections

During this project, we were able to to comfortably work together and asynchronuously do to our continuous transparent and respectful communication. Together we were able to plan and execute this project without many hurdles. When we struggled with content we worked together to find a solution so that we had clear understanding of the material and how to implement the new techologies! We did not always find the right answers, but we stepped out of our comfort zone, exploring other npm libraries and reached out to our support system to help solidify anything we were uncertain of.

(back to top)