joanafbrito / tomates-podres

Mod 3 -Pair project

Tomates Podres - Mod3 Paired Project

Visit Our Site Here

Abstract

The Tomates Podres website shows a list of displayed movies and allows a user to see additional movie information and watch a trailer form the movie selected:

• Movies : when I visit the app, all movies should be displayed.
• Selected Movie: As a user, I can click a movie, and see that movie’s details. When a movie’s details are displayed, none of the other movies will be visible.
• When a movie’s details are displayed, the user should have a way to return to the main view of all movies.

A Little bit about the Developer

Hi! My name is Joana and I am a current Front End Engineering student at Turing School of Software Design. I am a career changer! I've spent the last decade working to manage two small business, and grabbing the opportunity to move to another country. Now, I'm spending my days learning code. As a woman I can contribuit to build a more balanced society, where people can be seen as equals in the software marketing and where I can build apps more inclusive and make a difference using this huge platform of the internet!

Hello! I’m Meg, currently a student of the frontend developer program at the Turing School of Software Development and Design. Prior to making the decision to change careers, I worked with a company that manages the data for 911. This positive contribution to society is very important to me and what I would like to continue to do in the future as a developer with the incredible power granted by the internet to create positive changes . Outside of learning to code, I enjoy spending time with my family and friends and continue my effort to read as many books as I possibly can.

Learning Goals

• Gain competency with React fundamentals

• Learn how to test React components & asynchronous JS using Cypress

• Practice refactoring

• Create a multi-page UX using Router

• Project Spec: link

• Miro Wireframing: link

Technologies Used

• HTML
• CSS
• Lighthouse (Accessibility dev-tool)
• React/ JavaScript
• React Router
• Cypress
• NPM
• Fetch API
• ESLint

Setup

Fork this repo (look up in the top right corner) and copy the SSH link. Open your terminal, run git clone (replace the [ ] with the copied remote address) Change into the directory and run

npm i

To view, run:

npm start

or click the link:[Add deployed link here]

Illustrations

• User can select a movie, find more details and provide their "star-rating" for the movie.

• User can search for a particular movie in the search bar.

• Fully responsive user experience.

🏆 Wins

• A big win was to be able to create the React components and have them communicate as we wanted them to.
• Learning the behavior of JSX and how to apply CSS to those elements.
• Adding the stars for a user to rate a movie and be able to give those stars beautiful styling and functionality.
• Including a search bar for movie titles for better user experience.
• Being able to render the movie trailer successfully for the selected.
• Being able to successfully apply the Cypress testing.
• Having a Lighthouse score over 90, even as we were still getting used to using JSX.

Challenges

• Balancing fun/life with project/work/study time 👩🏻‍💻💅🏻💆🏻‍♀️
• First project in React.
• Managing the media queries for responsive design.
• The battle of fatigue and productivity.
• Navigating the challenge of JSX styling.
• First project applying the Cypress testing suite.

Future Designs/Extensions

• Add a user login/logout with username and password .
• Have an area of favorited movies.
• Be able to watch the movie in the website.
• The User's star rating will be saved within the user's account.
• Add an animation to the loading element.
• Add arrows or other design to improve the UX with the movie scoll on homepage.

tomates-podres's Issues

README First Draft

Animation

Create a Loading animation

• Loading animation

DM Link to One PR to Instructors

• Done!

Known Bugs Needing Fixed

• Having the search bar display again when user uses the browser back button instead of the Go Back link on the page
• Figure out why there is a double header showing when an error is thrown on the Chosen One

Iteration 3:

• Error handling for a 500 errors
• Refactor to be using the API calls for displaying all movies
• Set up API calls for displaying the one movie information
• Update project board to have functionality described as user stories - including acceptance criteria

Iteration 2:

• Change to different view when movie poster clicked
• Hide all the other movie posters when the one is clicked
• Add a 'back' button on the navbar to return to the view of all movies
  (Suggested completion by the end of Week 1)

TEST Refactor

• Change the last command on tests to use the variable from the beginning

StarRating

As a user, in order to rate a movie in the ChosenOne / movie details page I should see gray stars,

When I hover over it the should change the color by star to yellow.

As a user after I click in a star I should be able to see the rating number I have given to that movie, and the star should be yellow.

Acceptance Criteria:

• Have a Rating Area with the star icons
• Have a text with the average Rating
• Have the star I'm looking to select to have a yellow color when I hover over it

Attempt to Style the scroll

• Improve user experience by adding arrows to scroll or maybe an npm scrolling package?

Establish Navbar with functionality

As a user, in order to navigate back to the home page from a selected movie page, after choosing a movie to view more details, when I click the Return Home button, then I should no longer see the selected movie information and see all movie posters displayed again.

Acceptance Criteria:

• Have Navbar
• Return Home button click hides single movie details and redisplays all movie posters
• Navbar updates from "search bar" to the Return Home and then vise versa

Iteration 1:

• Create Navbar component
• Create Movies component
• Create MovieCard component
• Render all MovieCards

Display Single Movie Information On Click

As a user, in order to view more details for a single movie, when I click on the movie poster, then I should be able to view that specific movie details and all other movie posters should no longer be on the screen.

Acceptance Criteria:

• When the user clicks on a single movie, they should be able to view more details of the movie
• All other posters should no longer be in view
• The user should see additional movie details

Final Steps

• Refactor code to remove anything un-necessary, console.logs, repetitive code
• Add PropTypes to the necessary files
• Ensure all user flows have corresponding tests
• Update README

Nav Css JXS

As a user, in order to find a movie in the home page I should see a search bar, And a NavBar with The web Logo

When I hover over the movie card I should see a shadow to indicate the card is being selected

Acceptance Criteria:

• Have Search Input Area
• Have a Nav Bar with a image logo and Name
• Have the cards displayed nicely
• Have the card I'm looking to select to have a shade when I hover over it

Lint

• Run npm lint

Lighthouse

• More than 90 on accessibility

See trailer on details

As a user, when you click to see the details for a single movie, then you should be able to see a embedded video from Youtube with a trailer about that specific movie and all other movie posters should no longer be on the screen.

Acceptance Criteria:

• When the user clicks on a single movie, they should be able to view more details of the movie
• All other posters should no longer be in view
• The user should be able to see the movie trailer in the details of the selected movie

Css -

• @mediaquery- iPhone / iPad-Pro and computer- still need to do for hover in all movies- choose together if we will use Dif style for iPad
• style the error messages - need to finish that
• Shade /chosen one
• footer
• Chosen one details display correctly

Search

As a user, in order to find a movie in the home page from a search bar, after typing the movie title when ? I click the search button, then I should see the movie selected .

Acceptance Criteria:

• Have Search Input
• Search button click selects single movie and redisplays the movie poster
• Search Input updates from each letter to the show the movies ?

Router to individual Movie

As a user, in order to navigate back to previously selected pages, when I select the navigation back button on the browser, I should see the previous pages.

Acceptance Criteria

• Add a Router to the Landing page
• Add a Router to the ChoosenOne page
• Searchbar should appear as back button when the ChosenOne is selected, then return to a search bar when returning to the home page