elbrewster / movie-knight

Movie Knight

Overview

Not sure what movie to watch tonight? Want to find out if it's any good? You need to visit Movie Knight!

The Movie Knight Web App, built in React, displays some of the newest films out there! This application allows users to browse through a display of 40 movies, each of which is clickable to view additional information about the movie.

Project Views

Visit Our Site!

Movie Knight

Home Page and Movie Page:

React

• This multi page App with React was an exercise for us to learn and grow our knowledge of the framework.
• React Router was implemented to give unique URLs to the movies as well as default URL handling. Movie Knight shed light on how a multi page app might work with unique URLS in the real-world.
• Compared to previous projects in VanillaJS, React maintained a sync'd state at all times, which expedited the process of displaying information accurately.

Cypress Testing

• All Testing of User views and user interactions
• Error Handling of Server errors and invalid URLS Tested
• Fetch requests are stubbed

Local Set-Up Instructions

• From the repo click the code button and copy the SSH link.
• Open terminal by pressing command + space bar, and search for terminal
• Inside of your terminal type git clone and then paste the ssh link. It should look like this: [email protected]:ElBrewster/Movie-Knight.git
• In your terminal type cd Movie-Knight
• Type npm install
• Do not run npm audit fix --force
• Then type npm start This runs the app in the development mode.
• Open http://localhost:3000 to view it in your browser.
• The browser should then deploy using a local host
• Enjoy using Movie-Knight!

Technologies Used

• React
• React Router
• ES6 JavaScript
• SCSS
• HTML
• Fetch Web API
• Cypress Testing
• GET requests

Future Features

• Adding a responsive layout for mobile and varying device screen sizes

Project management

• We used a Github Project Board stay on task and meet the deadline.
• The project specs and guideline for this project can be found here

Contributors:

1. El Brewster
   • GitHub
   • LinkedIn
2. Karrar Qasim
   • GitHub
   • LinkedIn

movie-knight's Issues

Wireframe

Wireframe

Design: Background Matching & Accessibility

Wishlist: do background matching with movie images, look up options either css or sass or npm kit

Iteration 2: User Story 2

When a movie’s details are displayed, none of the other movies will be visible; it should just be that movie’s details (header/footer/etc can still be visible, of course!)

Iteration 2: User Story 3

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

Iteration 3: Testing

Suggested testing progress by end of iteration

• Project board has been updated so functionality is described as user stories
• Each user story includes thorough acceptance criteria

Implement PropTypes

Per rubric implement Proptypes and review that lesson

Iteration 3: User Story 1: Error Handling

When the server returns a 500 error, the user will see proper error handling.

• on-screen network error visible to user

Finish up Branding

Find new emoji for "Movie Knights", add to header and add cypress test.

Design: Stars Form

Wishlist: Instead of dropdown for movie filter, have a radio button setup similar to this codepen

Draw Component Tree

2-3 pieces of design inspiration

Refactor: Components file and Cypress

• Remove unnecessary functions from Components folder, in particular App.js per PM feedback
• Refactor MovieCardsContainer
• Remove unused files

Iteration 2: User Story 1

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

Refer to "conditional rendering" https://frontend.turing.edu/lessons/module-3/react-3-advanced-data-management.html

FIRST WEEKEND DELIVERABLES

By the time class begins in Week 2, these items should be completed:

• Iterations 0-3
• Project board has been updated so functionality is described as user stories
• Each user story includes thorough acceptance criteria
• Instructors have been DM’d a link to one PR (Nik GH username: niksseif Scott: sertmer)

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

• In your project repo, create a new file in the src folder. Copy in the data found in this gist.
• For now, you will import this information into your App.js file and use this as your source of information!

import movie data from 'put your file path here'

• when movies details are displayed, none of the other movies will be visible; it should just be that movies details(header/footer/etc can still be visible tho, of course!)
• When a movies details are displayed, the user should have a way to return to the main view of all movies.

Iteration 4: User Story

The user can click the browser forward & back arrows to navigate

Iteration 4: User Story

Iteration 3: Do Fetch Calls

• Set up fetch from the web API

Iteration 3: Refactor

• refactor our application to use actual data from the database instead of our mocked

Add Readme