nicholasmatias / flixster

Unit Assignment: Flixster

Submitted by: Nicholas Matias

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

Loom Message - 14 June 2024 - 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?

    The weather app lab this week related to what we were doing and helped me understand how to make API calls. This week, I felt much more equipped to complete the project despite using both React and API's for the very first time. For the required features, I felt comfortable with what was going on and was able to figure things out on my own a majority of the time. I felt unprepared for the embedded movie trailer stretch feature but after reading through the API documentation, I was able to figure it out. 
  

• 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 finished the sidebar. Right now the sidebar has been created but the css isn't complete hence why I currently do not have it displayed on the site. Additionally, I would have used debouncing within the search API call so as to decrease the amount of API calls being made during search. This would increase the efficiency and optimize search in terms of API calls being made. 
  

• 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 demo went well for the most part. I was able to answer everyone's questions in a manner that made sense to them which made me very happy. Following the presentation, I was also able to help a few of my peers implement features in a methodology similar to mine. I am aware that when I get nervous, I can start to move through things very fast. That said, I think I kept a good pace throughout the presentation. One thing I would like to improve upon is my public speaking. When I say this, I mean speaking more concisely and with fewer delays in thought. 
  

Open-source libraries used

N/A. Did not end up using any open source libraries. 

Shout out

Sammy once again was of great help. He helped me figure out the API calls earlier in the week. His help gave me the know-how and enabled me to then redo all of the API calls later in the week in a way that is much more efficient.

flixster's Issues

Week 2 Feedback

Hey Nick!

You learned from the feedback from Week 1 and the execution was much better on Week 2! I am super happy to see that!

Nice job as well on implementing the stretch features, having the movie trailer in the modal is rad!

Debouncing as you mentioned is a nice idea to minimize the API calls when the user is still typing.

Commits (git)

The multiple commits now give me a better sense on how you progressed throughout the week, which is amazing!

Don't need to do this for Week 3, but for the Capstone project I would like you to become a Pro by:

• Keep breaking down your project into smaller tasks (as you have the checkboxes now for Week 1-3 projects)
• When you finish each task, link the commit(s) associated with the task (can have multiple commits associated to a task)

There are many reasons to organize the commits on a per-task basis, but the main reason is that if you need to do a similar task in the future you can simply look at those commits to see how to do it.

Below are some feedbacks to make your future projects even better:

Persistent state

I noticed you are not keeping any state in the app, for example, if users refreshes the page the liked/watched will be reset.

For future projects, you can use Local Storage or Cookies to persist that information on the browser.

Of course you can also persist that information on a database, but I personally like to start with the simplest approach (storing in the browser in this case) and then incrementally build a more robust system (storing in a database).

Authentication

I saw you are using a bearer token for authentication:

Flixster/src/MovieList.jsx

Line 20 in a83cb32

Authorization: 'Bearer eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiI2ZTk4ZTdhNDAzODljYmRlYjQwMTQ0OTQ1ZGQwYTMxZiIsInN1YiI6IjY2Njc3MTY3ZGQzYTMzZDdhZjg1YTVhMiIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.DMEfKAm2887y-Rm2Qj9F66yNZjFJ28QrgcE2ktrx8tc'

In general, you should never commit an authentication token or API key into your repository, since this will make your authentication token public for anyone to use it (including malicious users).

The simpler solution I see is to store the token in a file that is ignored by git (via .gitignore) and dynamically reading it in code.

UX

Small feedback on UX is to add the movie name in the card, since the thumbnail not always show the movie title:

A stretch goal for future projects could be to better handle loading elements on the screen. Right now an empty screen is showed to the user while some elements are loading (like the trailer). Would be better to show some "loading" element to hint to the user that an element is about to show up in the screen.

Week 2 IM Feedback

Great work with the second project! Was nice to see the feedback from the first week incorporated. And really impressive to hear about how you rewrote the project at the end to improve the code!

A couple notes on this week:

Overall organization: Not a big deal for this week, but looking forward to the capstone and now that there are more files with React, it can be helpful to have them organized into folders to make it easier to reference/access a certain part later on (like a "components" folder). But nice to see that the functionality is broken out into these different files, definitely helps modularity.

Favorite/watched button: As you mentioned in the code, these have similar functionality, I wonder if you'd be able to make a more generic component like a "toggle" button and reuse it? Again this is more thinking ahead to when your app grows and you don't want to rewrite the same code for a bunch of buttons that work in a similar way

API calls: I was really impressed with your understanding of the API calls and discussing how it could be improved/more efficient. I know we discussed already the multiple sort criteria which would be an interesting extension to the current setup. And also potentially migrating network requests into helper functions/files which will help take modularity a step further and help separate that networking layer from the UI part, especially when you have more calls and it becomes more complex.

UI: Overall looks good and I'm glad you were able to focus more on core functionality/stretch features this week. But when you have more time to polish it, would be nice if clicking the movie image also triggered pop up. I also noticed that there can be a jitter from other components moving from the hover border or from the larger "unwatched" icon- would be nice if you were able to build in a buffer so the other elements position/sizing weren't affected by those sorts of actions. I really like the blurred background image though, it's a great styling touch.

Week 2 Feedback

Hey Nick, fantastic job this week! I'm happy and impressed that you were able to get through almost all the stretch goals. The app looks clean and the experience is very smooth.

Thanks for building on last week's feedback and adding super clear and comprehensive comments. As a reviewer, I didn't have to spend much time inspecting your code to understand the logic. Your comments made it very easy to follow.

I have some minor feedback.

1. When we refer to constants (ex. strings in the examples below), it is sometimes ideal to wrap it as a variable, especially if it's referenced multiple times in the same/other files. There are some exceptions, when the literal is a value of importance (ex. checking if length of a list == 0, with 0 being the constant). I can see casting some strings in your files as useful, particularly with the API calls. In the case, where many people may be working with your codebase, having some constants as a variable is important in preventing silly copy/paste errors or making it clear what the meaning of the constant is (ex. could rename api.themoviedb.org to API_BASE)
   

   Flixster/src/MovieList.jsx

   Line 23 in a83cb32

   if (sortby === "" && query === "") {

   
   (ex. could do if query == SearchType.SORTED etc..)

Flixster/src/MovieList.jsx

Line 20 in a83cb32

Authorization: 'Bearer eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiI2ZTk4ZTdhNDAzODljYmRlYjQwMTQ0OTQ1ZGQwYTMxZiIsInN1YiI6IjY2Njc3MTY3ZGQzYTMzZDdhZjg1YTVhMiIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.DMEfKAm2887y-Rm2Qj9F66yNZjFJ28QrgcE2ktrx8tc'

Flixster/src/MovieList.jsx

Line 26 in a83cb32

fetch(`https://api.themoviedb.org/3/movie/now_playing?language=en-US&page=${page}`, options)

Flixster/src/MovieList.jsx

Line 34 in a83cb32

fetch(`https://api.themoviedb.org/3/search/movie?query=${query}&include_adult=false&language=en-US&page=${page}`, options)

Flixster/src/MovieList.jsx

Line 42 in a83cb32

fetch(`https://api.themoviedb.org/3/discover/movie?include_adult=false&include_video=false&language=en-US&page=${page}&sort_by=${sortby}`, options)

2. Let's have a chat in our 1:1 about calling the API and how you thought through making it more efficient. What other optimizations could you make?

Great job!