Skip to content

jimmacur/rancid-tomatillos

 
 

Repository files navigation

Rancid Tomatillos

Randic Tomatillos

Rancid Tomatillos is a movie review app that allows users to browse a curated list of films and engage with them through upvotes, downvotes, and seeing movie details. It provides an easy-to-use interface for exploring movie details, posters, and user-generated votes, ensuring a dynamic and interactive experience.

Context

This project was a collaborative effort completed within the time frame of 10 days. Both of us actively contributed to every aspect, ensuring a well-rounded and cohesive final product.

Tech

Built with React and tested with Cypress

Installation

  1. Fork and clone this repo
  2. cd into the directory
  3. Install necessary dependencies with npm install
  4. Run your React app with npm start
  5. Go to http://localhost:3000/ and you should see a page with some starter elements
  6. Enter control + c in your terminal to stop running the React app at any time
  7. To run Cypress tests, use npx cypress open

Usage

This GIF demonstrates the page load process, highlighting the random movie scroller and the movie container, which features a selection of films.


This GIF showcases the up and down votes functionality and button micro-animations.


This GIF showcases selecting a movie with a click, viewing the movie details page, and returning home.


This GIF highlights how movies and their votes are fully tabbable, allowing users to navigate, select, and ‘click’ on them by pressing the Enter key.


This GIF highlights the scroller action within the movies container.

Contributors:

Charles Banks - linkedin - gitHub - [email protected]

Jim Macur - linkedin - gitHub - [email protected]

Project Link: Rancid Tomatillos gitHub Repo

Learning Goals

  • Gain competency with React fundamentals
  • Make several network requests and handle asynchronous JS
  • Test React application with Cypress
  • Create a multi-page application using Router
  • Practice refactoring

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 81.2%
  • CSS 16.6%
  • HTML 2.2%