georgeholm / flixster-starter

📝 NOTE Use this template to initialize the contents of a README.md file for your application. As you work on your assignment over the course of the week, update the required or stretch features lists to indicate which features you have completed by changing [ ] to [x]. (🚫 Remove this paragraph before submitting your assignment.)

Unit Assignment: Flixster

Submitted by: George Holm

Estimated time spent: 25 hours spent in total

Deployed Application (optional): Flixster Deployed Site

Application Features

CORE FEATURES

• Display Movies
  • Users can view a list of current movies from The Movie Database API.
  • For each movie displayed, users can see its title, poster image, and votes.
  • Users can load more current movies by clicking a button at the bottom of the list (page should not be reloaded).
• Search Functionality
  • Users can search for movies and view the results in a grid.
  • Users can clear results and view previous current movies displayed.
• Accessibility Features
  • Website implements accessibility features (semantic HTML, color contrast, font sizing, alt text for images).
• Responsive Design
  • Website implements responsive web design.
• Movie Details
  • Users can view more details about a movie in a popup, such as runtime in minutes, backdrop poster, release date, genres, and/or an overview.
• Sorting Options
  • Users can click on a filter by drop down to sort product by type (alphabetic, release date, rating).
• Layout
  • Website displays header, banner, search, movie grid, about, contact, and footer section.

STRETCH FEATURES

• Deployment
  • Website is deployed via Render.
• Embedded Movie Trailers
  • Within the popup displaying a movie's details, users can play the movie trailer.
• Watched Checkbox
  • For each movie displayed, users can mark the movie as watched.
• Favorite Button
  • For each movie displayed, users can favorite the movie.
• Sidebar
  • Users can open a sidebar
  • The sidebar displays the user's favorited and watched movies

Walkthrough Video

Building Flickster Website Features - Watch Video

### Reflection

• Did the topics discussed in your labs prepare you to complete the assignment? Be specific, which features in your weekly assignment did you feel unprepared to complete?

I thought the labs were good in preparing me, especially lab two as it gave me a good introduction into react and the fundamentals that allowed me to start my weekly assignment. My main struggle was getting too far into the weekly assignment compared to where we were at with the labs, so I would look ahead to see what I needed to know in order to progress. This method generally kept me moving smoothly in the assignment and also helped strengthen my React skills.

• If you had more time, what would you have done differently? Would you have added additional features? Changed the way your project responded to a particular event, etc.

If I had more time, I would go deeper into the styling, as I think it is one of my weaker areas as a software engineer since in the past I have had to put little effort into it compared to other features. This time I went further than last week in styling, and learned some good techniques, but I think there is room for improvement. I would also like to learn how to make a backend where the website remembers which movies you liked and have watched, which would add to the functionality of the webstie.

• Reflect on your project demo, what went well? Were there things that maybe didn't go as planned? Did you notice something that your peer did that you would like to try next time?

The project demo went really well! Everyone got to share their part. I thought that some people did a really good job emulating netflixes modal for when you click on a movie, and I think that if I did that it would greatly enance the visual appeal of my project.

Open-source libraries used

React

Shout out

Marvin and Carter were great helps, especially with the useEffects!

flixster-starter's Issues

Code review

Amazing job in reaching all stretch goals! Also thanks for improving code readability as it is more modularized this time :)

A few nits.

(1) Combine the imports from React to clean up the import statements.

flixster-starter/src/App.jsx

Lines 1 to 5 in da3648e

	import { useState } from "react";
	import "./App.css";
	import MovieList from "./components/MovieList";
	import React from "react";
	import Modal from "./components/Modal";

import React, { useState } from 'react';

(2) Destructure the props at the beginning of the component for cleaner code and easier access to the properties.

flixster-starter/src/components/Modal.jsx

Line 7 in da3648e

export function Modal(props) {

// something like
export function Modal({ isOpen, currData, onRequestClose }) {
}

(3) Cleanup content in the model when closing modal. The second time I open modal, the content from last time flashes.