markus-xavier / rancid-tomatillos

Rancid Tomatillos

Mod3 2108 Paired Project

Table of Contents

• Abstract
• Technologies
• Illustrations
• Install
• Wins
• Challenges
• Additions
• Contributors
• Specs

Abstract

Rancid Tomatillos is a web app that will display the posters, title, and rating of a database of movies to a user. The user can then click on any of the posters to see additional details about that movie. There is also search bar for users to search to see if their favorite movie is included.

Technologies

• HTML
• CSS
• JavaScript
• fetch API
• React
• Router
• Cypress

Illustrations

Live Search

Install

• Clone down this repo to your machine
• cd into the directory rancid-tomatillos
• Run npm install in the terminal
• Run npm start in the terminal
• In the browser go to http://localhost:3000/

Wins

• Built a whole app using React and Router
• Implimented a live search feature to filter movies
• We feel like we used React features to their fullest ability.

Challenges

• Refactoring our app to use Routes caused some weird behaviors we had to adjust to
• Implimenting cypress testing took some time to get working properly

Additions

Future Iterations

• Ability to add movies
• Allow user to favorite movies
• Add a bigger database of movies

Contributors

• Brian Peterson
• Markus Rossio

Specs

Project specs can be found here

• Rancid Tomatillos

rancid-tomatillos's Issues

feat: return to main view

As a user I should have a way to return to the main view of all movies

AC:

• A button that returns the user to the main view displaying all the movie cards

ux/ui: sketch wireframe

doc: component architecture

whiteboard using excalidraw and link reference to whiteboard in closing ticket

feat: displaying movies

As a user, when I visit the app, all movies should be displayed

AC:

• When the user loads the web page all of the movie data is displayed in a grid with each movie being in it's own card

feat: individual movie display

As a user, I can click a movie, and see that movie’s details

AC:

• When a movie’s details are displayed, none of the other movies will be visible; it should just be that movie’s details

feat: api requests

As a user when I click onto the page the data gets loaded and displayed properly

AC:

• When the server returns a 500 error, the user will see proper error handling
• Data used is from the API

doc: create project issues

doc: find design inspiration

Close ticket with links to our design inspiration