devintor / flixster-starter

Unit Assignment: Flixster

Submitted by: Devin Torres

Estimated time spent: 24 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

Accessible to anyone :)

https://drive.google.com/file/d/19USz_Kg3SZGY5B6SPyLR0xwAQt76hEhd/view?usp=sharing

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 felt that we tended to learn topics -- such as fetch api -- after having to implement them in the day's milestones for our project. I was able to learn independently, but it would have been more efficient to learn ahead of time.

• 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 have used the youtube api to get trailers for each movie instead of hard coding only the Inside Out 2 trailer. I would have also tried to add an animation that essentially smoothly transitions the Movie Card hover popup to the modal upon clicking. I also would have liked to implement the sidebar in order to display the movies delineated by the user as favorited or watched.

• 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?

I appreciated that my peers liked my general aesthetics, such as the hover effect for each movie card, the Devflix logo, and some other subtle styling features. Something that I noticed from a peer and implemented was the live search by keystroke input, rather than waiting for a submit button to be pressed.

Shout out

I'd like to really thank Cristobal, because he was incredibly helpful in fostering my understanding of fetching data from the TMDb api. I also want to thank Emmanuel, Lauryn, and David for daily miscellaneous support. Lastly, I'd like to thank my advisor Thomas for a very insightful check in -- it was great to take a break and have a genuine conversation with someone who very visibly cares.

flixster-starter's Issues

IM Feedback

General

It seems that, when tapping load more button and then using the search bar, the search functionality does not work. In fact, it seems that once the load more button is used, any input to the search bar triggers a load more action. Sorting after hitting the load more button does the same; perhaps a DOM object focus issue?

Repro steps:

1. Load the website.
2. Hit load more; observe more movies are loaded and rendered.
3. Input a letter on the search bar; observe no search results appear, and the list expands.

---

Some features appear to be missing:

1. Details on the pop-up such as runtime, release date, genres, etc.
2. About and contact are missing on the footer section.

---

The "code path" jumps through three different files before getting into the actual logic that renders the app (index.html --> main.jsx --> App.jsx); is there any simplification that can be done? Perhaps at main.jsx given it only calls for the App component?

flixster-starter/src/main.jsx

Lines 6 to 9 in ba23122

	ReactDOM.createRoot(document.getElementById('root')).render(
	<React.StrictMode>
	<App />
	</React.StrictMode>,

Files

1. There are some empty files, such as Footer.css; the contents of it seem to be under App.css
2. There are two css files at the to-level directory; should these be merged, or colocated under other css files?

Code

Is there any particular reason for declaring the resetFilters function within App.jsx and passed in as parameter to Header, while the rest of the Header functionality is declared inside Header.jsx?

flixster-starter/src/App.jsx

Lines 10 to 13 in ba23122

	const resetFilters = () => {
	setQuery("");
	setFilter("popularity.desc");
	};

The following code could be simplified a bit by having the a baseURL declaration and then appending the rest (sort or filter). This baseURL, as well as the apiKey, can also get extracted outside of the function, to avoid re-declaring every time.

flixster-starter/src/components/content/MovieList.jsx

Lines 18 to 23 in ba23122

	const apiKey = `dca23ffe8c65106addc1986590090072`;
	let url = `https://api.themoviedb.org/3/discover/movie?api_key=${apiKey}&sort_by=${filter}&page=${page}`;
	if (query) {
	url = `https://api.themoviedb.org/3/search/movie?api_key=${apiKey}&query=${encodeURIComponent(query)}&page=${page}`
	}

Can the following be simplified as well? Given the initial state of movies is an empty array, you could always just append the response to it.

flixster-starter/src/components/content/MovieList.jsx

Lines 34 to 41 in ba23122

	if (page > 1) {
	setMovies(prev => [
	...prev,
	...data.results
	])
	} else {
	setMovies(data.results)
	}

Remove any logs

flixster-starter/src/components/content/MovieList.jsx

Line 63 in ba23122

{console.log(movies)}

What is line 77 doing, compared to line 78 where we are setting the show attribute based on selectedMovie existing or not?

flixster-starter/src/components/content/MovieList.jsx

Lines 77 to 78 in ba23122

	{selectedMovie && ( // modal only shows when there is a movie selected
	<Modal show={selectedMovie !== null} onClose={handleCloseModal}>

Other

It appears that the page size is fixed; when using the website with a narrow window, this makes it look like there are incomplete responses (rows with 3 and last row with only 1 or 2); can this be modified via the API used to fetch?