tricia-holmes / rancid-tomatillos

Rancid Tomatillos

Preview

RancidTomatillos.mov

Abstract

Our team created a movie review site utilizing an API that presented us with with an array of movies and details. The user is able to search and filter by genre or title, and when a specific movie is clicked, the user will be presented a page with additional details regarding the movie's rating, release date, revenue, and several other details.

This project took place during the third inning of Turing's front-end software engineering program, and required us to utilize our newly learned skills in react to create a fully functioning site from design to operation in just under 2 weeks. As a team we utilized our project management and research skills to ensure we had the time and knowledge to complete this application.

Contributors

Dani Bagley
Tricia Holmes
Zac Walters

Research and Documentation

Initial design document:

Our data model and DOM flowchart:

Project board we created and managed in GitHub:

Technologies

• React
• Fetch API
• Cypress testing
• Git/GitHub
• GitHub project board
• CSS
• HTML

Methodologies

• Design the UI to adapt to various screen sizes
• Error handling
• Implement react components which support a complex data model
• Use object and array prototype methods to perform data manipulation
• Create a user interface that is easy to use and clearly displays information
• Write modular, reusable code that follows SRP (Single Responsibility Principle)
• Make network requests to retrieve data
• Demonstrate DRY principles
• Utilize Agile/Scrum project management

Installation Instructions

1. Fork this repository.
2. Clone your new, forked repository to your local machine.
3. cd into the project repository on your local machine and run npm install, then npm start to launch the application.
4. Open the link to your local server (listed in your terminal) in your web browser to view the live page.

rancid-tomatillos's Issues

Add defaultProps to banner

User Story:

N/A

Acceptance Criteria:

When banner receives no props, the banner should use the default props

---

Definition of Done:

• Add defaultProps to banner

As a user, I should see all movies on app launch

User Story:

As a user, I should see all movies on app launch so I know what movies are available to look at

---

Acceptance Criteria:

When a user lands on on the app page, they should clearly see all the app's movies displayed without having to click on anything

---

Definition of Done:

• When the app is initialized, componentDidMount makes a fetch request that receives all the data for the movies
• AMovies Container Component maps through all movie data and creates instances of movie components and has a onClick event for showing movie details -> future feature
• A Movie component receives data and creates a JSX Img element
• User Story has been manually tested

As a user, I should receive a message if something goes wrong with the application network request

User Story:

As a user, I should receive a message if something goes wrong with the application

Acceptance Criteria:

When app has an issue, let the user know that something went wrong.

---

Definition of Done:

• Add Cypress test the tests if something goes wrong with the server

Break out fetch call into own file and invoke in app

    "For some reason I can't leave this comment on the line I'm about to reference, so I'll just put it here. Be sure to declare you fetch in it's own file, and import it here, rather than invoking it here (line 18) directly, per the rubric :)

Originally posted by @sertmer in #9 (comment)"

As a user, when a movie’s details are displayed, I should have a way to return to the main view of all movies

User Story:

As a user, when a movie’s details are displayed, I should have a way to return to the main view of all movies

---

Acceptance Criteria:

When a movie’s details are displayed, I should have a clear way to navigate back to the main page

---

Definition of Done:

• Have a button on the MovieDetails component
• Button needs to have an event handler that closes the MoviesDetail component this can be done by setting App's currentMovie state back to empty object since we have conditional rendering in place already

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

User Story:

As a user, when I click on a movie then I will see the details for that movie

---

Acceptance Criteria:

When a user clicks on any movie displayed that they can click and see the movie details

---

Definition of Done:

• Have a currentMovie in App State that defaults to {} on load
• Create an onClick for the movie components -> this will be used to trigger the display for movie details
• Have a handleClick in App that takes the event target id and searches App's movies state to find the movie that was clicked on. Once the movie is found, the currentMovie state is then set to the found movie
• Have conditional rendering if currentMovie is defined then to render the MovieDetails component

REMAINING:

• Create MovieDetails component to take in currentMovie as a prop
• Create JSX elements to display movie details
• Create initial css styling

As a user, when I land on the page I should see a movie banner img

User Story:

As a user, when I land on the page I should see a movie banner img

Acceptance Criteria:

When the user lands on the app home page, they should see a banner movie image

---

Definition of Done:

• Add Cypress test the tests the page to contain an image in the banner section

As a user, when I load the application, I can see the title of the application

User Story:

As a user, when I load the application, I can see the title of the application

---

Acceptance Criteria:

When the user lands on the page they see a title

---

Definition of Done:

• Add Cypress test that looks for the h1 title "Rancid Tomatillos"

As a user, when I click on a movie, I’m shown additional details about that movie

User Story:

As a user, when I click on a movie, I’m shown additional details about that movie

Acceptance Criteria:

When the user lands on the app home page, they should see all the movies

---

Definition of Done:

• Add Cypress test the tests the page to contain a div that had movie thumbnails

Add functionality to prevent movies from loading until all movies have been fetch

• Currently movies are loading before all fetch requests have been made. If one of the movies has an error, then the page stops loading and goes to error message. Need the loading component to last until either all movies have been fetch or until an error has been thrown.

Search Feature

To Dos:

• We need a search input in the top right hand corner (UI), a search component that would filter the displayed movies by any word in the titles

bonus: search by genre

As a user, when the server returns a 500 error, I should see proper error handling

User Story:

As a user, when the server returns a 500 error, I should see proper error handling

---

Acceptance Criteria:

When the server returns an error, the user should see some visual that let's them know that something went wrong

---

Definition of Done:

• Need to add a catch to our fetch
• Need to add an error state to our app that starts off as empty and if the catch is trigger it sets our error
• Need to add conditional rendering to our app, that if an error is defined to render an error JSX element

Refine Movie Details UI

To Dos:

• Add responsiveness so details don't go past the modal
• Add a star icon to ratings

Movie details inline styling into CSS file

   " I see you've got some inline styling here - but you also have separate CSS files too. I'd encourage you to pick one and stick with it so that your fellow devs always know where to go when adjusting styles

Originally posted by @sertmer in #9 (comment)
"

As a user, when I load the application, I can see a collection of movies.

User Story:

As a user, when I load the application, I can see a collection of movies.

---

Acceptance Criteria:

When the user lands on the app home page, they should see all the movies

---

Definition of Done:

• Add Cypress test the tests the page to contain a div that had movie thumbnails

Break out Banner and Movies components into a parent component called "Home" and invoke that in App

To Dos:

• Create a home component that contains Banner, Movies, and Search

Add styling to loading

• Loading needs to be fullscreen and possibly animation to show page is loading.

As a user, when I load the application, I can see the title of the application left top corner

User Story:

As a user, when I load the application, I can see the title of the application left top corner so I know what app I'm visiting

---

Acceptance Criteria:

When a user lands on on the app page, they can clearly see the app title

---

Definition of Done:

• JSX element is rendered on load as an H1 element
• Title is visible and easily readable in the top left corner
• User Story has been manually tested

Double check that any Component that takes in props has PropTypes

Add movie details modal - content tests once the layout is done

Fix Movie Details from loading blank if no data (normally happens on a refresh of that individual page)

2 possible options:

1. Have Movie Details render the Error Component if Selected Movie is undefined
2. Have Movie Details make a getSingleMovie fetch call if Selected Movie is undefined.

Need to add tests for Movie Details Content, Loader and SearchBar

• Movie Details now has the additional content
• Search bar feature has now been added to the Home page
• Loader is now a component

Remove shouldLoad from app

• Add a conditional to the Home component instead of in App

Add propTypes for our components

User Story:

N/A

Acceptance Criteria:

When props are passed down, they are the expected data type and console receives no errors

---

Definition of Done:

• Add propType for Movies
• Add propType for Movie
• Add propType for Movie Details
• Add propType for Banner

Add styling to Title to make it more responsive with the banner

To Dos:

• Add styling to Title to make it more responsive with the banner

Remove unused Test Files

• Remove unused unit testings files from component files

When the user enters a bad URL, they are given an easy way to navigate to a working page

To Dos:

• When a url doesn't exist, the user get's a redirect or an error

Break out input into it's own Search component

• Move the input functionality from App into its own Search component to help with modularizing our app.

As a user, when a movie’s details are displayed, none of the other movies will be visible to me

User Story:

As a user, when a movie’s details are displayed, none of the other movies will be visible to me

---

Acceptance Criteria:

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

---

Definition of Done:

• Have MovieDetails JSX elements setup as a modal or new page to display only the movie details