Skip to content

MattWalterTX/Rancid-Tomatillos

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Rancid Tomatillos

Abstract

  • Multi-page React application that pulls movies from an external API that we can select to view more details.

Goals and Objectives

  • Implement React and Router to turn our vanilla Javascript app into a true multi-page application
  • Work with an API to render data from multiple specified endpoints
  • Solidify the code review process
  • Create a robust Cypress test suite that thoroughly tests all user stories

Technologies

  • JavaScript
    • React
    • Router
  • HTML5
  • CSS3
  • Cyrpess

Illustrations

small.enough.2.mov

Features

  • Displays all movies by their posters
  • Selecting a movie navigates to a new page with more details for that movie
  • Can return to the home page via the on page button or use of the browser navigation arrows.
  • 100% accessibility score on Lighthouse (verified on multiple pages), app is fully tabbable and has been tested with the Dalton Colorblindness extension for added accessibility consideration

Possible Future Extensions

  • Live dynamic searching of movies by title
  • Would also like to extend this to include a genre filtering search

Milestones

  • This project has given us more exposure to React and Router that we were able to apply and test with Cyrpess to ensure a better UX, it also got us more familer and comfortable with going through the documentation to solve problems.

Challenges

  • Deployment was oddly more complicated than we envisioned. It pointed out an odd type error we missed on our locals where it tried to process the yet un-selected movie id which prevented anything from loading upon deployment. Had more issues working through redeployment, but we ended with what appears to be a clean deployment.

Set Up

Locally

  1. Clone the repo
    git clone [email protected]:MattWalterTX/Rancid-Tomatillos.git
  2. Enter the directory and install NPM packages
    npm install
    npm start
  3. Enter the following url in your browser: http://localhost:3000/
  4. Explore the website

Deployed at

Rancid Tomatillos on Surge

Sources

Contributors

Project Specs

  • The project spec & rubric can be found here

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published