[Flixster] Movie Explorer Project #63

jseifferly · 2025-06-17T00:42:27Z

Flixster

Main Features

Display Movies in Grid View-
-Using CSS flexbox I created the container for the list of movie cards

Users can load more movies using "Load More" button-
-TMDB API allows you to make requests for movies by page numbers, by pressing 'load more' the page number is incremented and an additional fetch request is made.

Search Bar which allows users to search TMDB database-
-TMDB API has an additional API call for searching movies based on a given substring, I use this to make a new fetch request and store the searched data in a new container. Following this I update the currently displayed movie data. The user can click the 'enter' key or submit to search, and they can also click 'clear' to go back to the original data.

Movie details displayed when movie card is clicked-
-Each movie card has an on click listener that opens a modal upon click. The modal is repopulated each time a new movie is clicked with the new movie details. These details require an additional fetch request from the API.

Sort currently displayed movies using sort button-
-Use a sort function in the utils folder to sort the movieData state (currently displayed data) and then update the display based on the sort. 3 different methods of sorting, alphabetical, release date, and rating.

Website should implement responsive web design-

Tried to use as few divs as possible switching to semantic elements like ,
, and
Webpage should respond to changes in window size, I used percentages in my css sizes.

Stretch Features

Embedded Video Trailers-
-Must make an additional fetch request when accessing the movie details modal (this sometimes causes the old video to still display for a second). Used an iframe component to implement the feature.

Favorite & Watched buttons
-Simple button components, added some basic animations. I also created 2 additional containers for movies, a favMovies and watchedMovies, whenever one of the buttons is clicked it adds a copy of that movie data into the correct container.

Sidebar, switches to showing only favorited or watched movies-
-Switches between what container is being shown, clicking on the star sets the favMovies container as our data, while clicking on the flag sets the watchedMovies container as our data. Also when switching to these pages I hide the search, sort, and load more features as it doesn't make sense to show them.

… Movie List, and Footer done. Movie Cards should be responsive to window size and are being updated dynamically by data file

Added Search and Sort features

…buttons and updating displayed movies using sidebar

…calls to only new data. searchTrigger state is a band aid fix for now until I can find a better way

Adding Final stretch features and cleaning up bugs

… way like and watched info is stored

Merge branches#

avalosrios · 2025-06-17T21:03:09Z

src/Header.jsx

-function Header({search,clear,searchTermFunction,searchString, sortFunc}) {
+function Header({search,clear,searchTermFunction,searchString, sortFunc, display}) {
+
+    console.log(display)


remove console logs :-)

avalosrios · 2025-06-17T21:05:53Z

src/Header.jsx

            <h1>Flixster</h1>
-            <SearchForm searchTerm={searchString} searchFunction={search} clearFunction={clear} searchTermFunc={searchTermFunction} sortFunc={sortFunc}/>
+            <SearchForm display={display} searchTerm={searchString} 
+            searchFunction={search} clearFunction={clear} 


I think you can improve on naming the props, in most cases I've seen that the callbacks/functions you pass may be easier to interpet by using naming like onSearch vs searchFunction & onClear vs clearFunction

in short drop the Function add the on

R4jvi · 2025-06-17T21:10:38Z

src/components/MovieList.jsx

+    }else {
+        return (
+            <div className="no-movies-splash">
+                <h2 className="splash-text">No movies here...</h2>
+                <h3 className="splash-icon">{'\u{2639}'}</h3>
+            </div>
+        );
+    }


As If condition is already returning, we don't need specific else here. You can do something like:
if(condition){
return <...>;
}
return <...> // this will work as else condition without explicit else :)

R4jvi · 2025-06-17T21:12:01Z

src/utils/utils.js

+    if (type === 'alpha'){
+        return sortedArr.sort((a,b) => a.title.localeCompare(b.title));
+    }else if (type === 'release'){
+        return sortedArr.sort((a,b) => b.release_date.localeCompare(a.release_date))
+    }else if (type === 'vote'){
+        return sortedArr.sort((a,b) => b.vote_average - a.vote_average)
+    }else {
+        return arr
+    }


How about updating this into a switch case instead of long if..else..if... conditions?

avalosrios · 2025-06-17T21:15:55Z

src/App.jsx

  }

+  const updateFavs = (movie,faved) => {
+    faved ? setFavMovies([...favMovies, movie]) : setFavMovies(favMovies.filter(element => element !== movie));


nit: Maybe try to generate the object to be set and call setFavMovies only once

const toggleFavs = (movie,faved) => { const favs = faved ? [...favMovies, movie] : favMovies.filter(element => element !== movie); setFavMovies(favs);

avalosrios · 2025-06-17T21:17:15Z

src/App.jsx

      <Header clear={clearSearch}  search={search} searchTermFunction={updateSearchTerm} searchString={searchString} sortFunc={updateSortType}/>
      <SideNav homeFunc={openHome} favFunc={openFavorites} watchFunc={openWatched}/>
-      <Body data={page !== 'Home' ? (page === 'Favorite' ? favMovies : watchedMovies) : movieData} load={load}/>
+      <Body data={page !== 'Home' ? (page === 'Favorites' ? favMovies : watchedMovies) : movieData} load={load}


I think the load name is not clear on what it does, maybe consider using pageNumber as prop name to make it easy to read

avalosrios · 2025-06-17T21:24:58Z

src/components/MovieButtons.jsx

+    const [faved, setFaved] = useState(false);
+    const [watched, setWatched] = useState(false)
+
+    useEffect(() => {


you may not need these useEffect functions you can simplify this by simply passing the addToFav & addToWatched callbacks directly to the onClick prop example

const handleFavClick = (evt) => { evt.stopPropagation(); setFaved(!faved); addToFav(movie, !faved); } <span className='favButton' onClick={handleFavClick}>{faved? '\u{1F496}':'\u{1F90D}'}</span>

avalosrios · 2025-06-17T21:26:54Z

src/components/MovieCard.jsx

-            <h3><strong>{title}</strong></h3>
-            <p>Rating: {rating}</p>
-            <MovieButtons />
+            <img src={imgURL + posterSize + movie.poster_path} alt={movie.title + " poster"} />


This is fine, but I'd suggest you try to use URL js builder just to make sure the URL is well formed https://developer.mozilla.org/en-US/docs/Web/API/URL/URL

// Base URLs:
let baseUrl = "https://developer.mozilla.org";

let A = new URL("/", baseUrl);
// => 'https://developer.mozilla.org/'

let B = new URL(baseUrl);
// => 'https://developer.mozilla.org/'

new URL("en-US/docs", B);
// => 'https://developer.mozilla.org/en-US/docs'

let D = new URL("/en-US/docs", B);
// => 'https://developer.mozilla.org/en-US/docs'

new URL("/en-US/docs", D);
// => 'https://developer.mozilla.org/en-US/docs'

new URL("/en-US/docs", A);
// => 'https://developer.mozilla.org/en-US/docs'

new URL("/en-US/docs", "https://developer.mozilla.org/fr-FR/toto");
// => 'https://developer.mozilla.org/en-US/docs'

avalosrios · 2025-06-17T21:27:57Z

src/components/MovieDetails.jsx


    useEffect(() => {
            const fetchMovieData =  async () => {
+                if(movie.id === undefined){


unfortunately in JS world you want to check for undefined & null at the same time, try using

movie.id == null

avalosrios · 2025-06-17T21:29:38Z

src/App.jsx

+  const openHome = () => {
+    setPage('Home')
+  }
+
+  const openFavorites = () => {
+    setPage('Favorites')
+  }
+
+  const openWatched = () => {
+    setPage('Watched')
+  }


This looks repetitive, when you see something repetitive it means you can DRY (Dont Repeat Yourself)

To transform wetcode to DRY code you can do something like

const openPage(pageName) { setPage(pageName); }

avalosrios · 2025-06-17T21:29:56Z

src/components/MovieButtons.jsx

+export default function MovieButtons() {
+
+    const handleClick = evt => {
+        evt.stopPropigation();


is this intentionally blank?

avalosrios · 2025-06-17T21:39:59Z

src/components/MovieDetails.jsx

+                    var res1 = await fetch(url, options)
+                    var res2 = await fetch(videoUrl, options)


Try to use const instead of var keyword

also you can group promises in a single call like

const [moveies, videos] = await Promise.all([fetch(url, options), fetch(videoUrl, options)])

avalosrios · 2025-06-17T21:41:06Z

src/App.jsx

 const App = () => {
+  //States to store the current movie data
+  const [movieData, setMovieData] = useState([])
+  const [pageNum, setPageNum] = useState(1)


Controversial, arrays start at 0 D=

avalosrios · 2025-06-17T21:41:30Z

src/App.jsx

+  const [searchString, setSearchString] = useState('')
+
+  //URL for featching data from API
+  const nowPlayingURL = `https://api.themoviedb.org/3/movie/now_playing?language=en-US&page=${pageNum}`


Also consider using a URL builder if possible

avalosrios · 2025-06-17T21:51:42Z

src/App.jsx

+          }
+      }
+      fetchMovieData();
+  },[url])


it feels odd that we are relying on the url for refetching movie data based on that, I'd recommend

generating the url inside the fetchMovie data function

create a function outside the component scope that encapsulates the fetching logic

example:

const FETCH_OPTIONS = {method: 'GET', headers: {accept: 'application/json', Authorization: `Bearer ${API_KEY}`}}; async function fetchMovies(page) { const url = `https://api.themoviedb.org/3/movie/now_playing?language=en-US&page=${pageNum ?? 0}`; try{ var res = await fetch(url, FETCH_OPTIONS) if(res.ok){ const data = await res.json(); return {movies: data.results, error: null }; }else{ return {error: "Error Message"}; } }catch(error){ return {error: error.message}; } }

avalosrios · 2025-06-17T21:55:04Z

src/App.jsx

+
+  //Update the url for loading more movies
+  useEffect(() => {
+    setUrl(nowPlayingURL)


if we drop the fetching dependency on url, you may no longer need this

avalosrios · 2025-06-17T21:55:17Z

src/App.jsx

+
+  useEffect(() => {
+
+    console.log('do sort')


clean up console logs :-)

avalosrios · 2025-06-17T21:57:27Z

src/App.jsx

+  },[sortType])
+
+
+  const updateSortType = evt => {


you may not need this + the useEffect consider having the update setter to be part of the click handler

const updateSortType = (evt) => { setSortType(evt.target.value); const sortedMovies = sort(movieData,sortType) setMovieData(sortedMovies) }

avalosrios · 2025-06-17T22:00:55Z

src/App.jsx

+      fetchMovieData();
+  },[pageNum])
+
+  const load = () => setPageNum(pageNum + 1)


consider renaming this to loadNext or just nextPage to make it clear

avalosrios · 2025-06-17T22:06:06Z

src/App.jsx


+//API Info for fetch
+const API_KEY = import.meta.env.VITE_API_KEY
+const options = {method: 'GET', headers: {accept: 'application/json',


Looking at this I think you can try to generate utils for fetching

// Movies.api.js export async function fetchMovies() { // fetch logic here return {movies, error}; } // App.jsx const {movies, error} = await fetchMovies(page); if (error) { setErrorMsg(error); } ...

avalosrios · 2025-06-17T22:07:40Z

.env

@@ -1 +1 @@
-VITE_API_KEY=eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiIwZmJhOGUxMThkYjlkYjQ1MDViZjJlNDIxOTA2YjBiMCIsIm5iZiI6MTc0OTUwOTQ1OC41NDU5OTk4LCJzdWIiOiI2ODQ3NjU1MmU5ODg5ZGMzMzMyMDY4OTYiLCJzY29wZXMiOlsiYXBpX3JlYWQiXSwidmVyc2lvbiI6MX0.hC15ggnHAhw1hfT_FHTOmwbKnG9c7qFyvMJeSw7LbHs'}};
+VITE_API_KEY=eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiIwZmJhOGUxMThkYjlkYjQ1MDViZjJlNDIxOTA2YjBiMCIsIm5iZiI6MTc0OTUwOTQ1OC41NDU5OTk4LCJzdWIiOiI2ODQ3NjU1MmU5ODg5ZGMzMzMyMDY4OTYiLCJzY29wZXMiOlsiYXBpX3JlYWQiXSwidmVyc2lvbiI6MX0.hC15ggnHAhw1hfT_FHTOmwbKnG9c7qFyvMJeSw7LbHs


avalosrios · 2025-06-17T22:08:40Z

src/components/MovieDetails.jsx

+        return ret.slice(0, -2)
+    }
+
+    if(movieDetails === null){


what if the movieDetails are empty?

avalosrios · 2025-06-17T22:10:12Z

src/components/MovieDetails.jsx

+    function genreString(genres) {
+        let ret = ''
+        for(var i = 0; i < genres.length; ++i){
+            ret += (genres[i].name + ', ')


Let me introduce you the join function https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/join

avalosrios · 2025-06-17T22:11:59Z

src/components/MovieList.jsx

+    const [show, setShow] = useState(false);
+
+    const close = () => setShow(false);
+    const open = id => event => {


Not sure I follow what the id is doing for us, we are always returning the same function

Jackson Kenneth Seifferly and others added 30 commits June 9, 2025 17:32

Created Initial Wire Frame for website, Got basic styling for Header,…

0ee98c9

… Movie List, and Footer done. Movie Cards should be responsive to window size and are being updated dynamically by data file

Delete .env

acb6def

Fixed gitignore to ommit API key from commit

cf8c998

Should ignore API Key file now

861ce74

Merge branch 'main' of github.com:jseifferly/flixster

1fb1c32

Styled Search Bar and Sory Button

0bfdf01

Made movie tiles larger and more responsive

40a1d50

Created sort button that is more semantic

3f3ba8e

Got API working so data is dynamically added using API

a920a47

Added Load more button and fixed up the sort button

62dcd79

Resolve Merge Errors

31a8d55

Moved load button around

616f421

Load more button now functional

39138ab

Modal is popping up without movie data

59869d1

Modal Working with all details needed provided

9fb192e

Updated Readme

8862c59

Fix Merge Conflicts

51e9dc2

Styled Modal

6476a48

Moved API call to App.jsx so that distributing data and states is easier

750075f

Styled search buttons

4189a07

Search functionality implemented with new API request

80f7928

Sort Feature working

9fb2d7f

Merge branch 'feature'

6fe33c9

Added Search and Sort features

Removed Console logs

47071b1

Delete .env

c0bcdc5

Added Alt text for images

db9930e

Added Embedded videos and started implmenting side nav bar

30c6cca

Added Buttonson Movie cards

5ab3ed1

[flixster][MovieButtons] Added favorite and watched functionality to …

ceec3f7

…buttons and updating displayed movies using sidebar

[flixster][Search Form] Hide search bar when on favorties or watched tab

b8108ef

Jackson Kenneth Seifferly added 17 commits June 12, 2025 12:40

[flixster][App.jsx]Refactored the Load and Search API calls to limit …

3db32a8

…calls to only new data. searchTrigger state is a band aid fix for now until I can find a better way

Merge branch 'feature'

fad4964

Adding Final stretch features and cleaning up bugs

[flixster][MovieButtons]Fixed like and watched bug by refactoring the…

830f249

… way like and watched info is stored

[flixster] Cleaned up newlines in files

366d61e

Updated ReadMe

454ac61

Added error message

7d7be1f

Merge branch 'feature'

e9ad9af

Merge branches#

Fixing comments

3b5703a

Removed unused dependecies

9e9419d

Hide load more button on fav and watched page

c7038a5

Cleaned up icons and added splash screen for empty favs and watched

b57d67d

Cleaned up code base and made styles consistent

95a7961

Finished Refelction on ReadMe

2f2c90b

Added animations to buttons

73e6768

Made search not work if empty string is entered

229aeb1

Fixed mobile responsivness

06b118f

Added video to ReadMe

22f3bf7

avalosrios reviewed Jun 17, 2025

View reviewed changes

R4jvi reviewed Jun 17, 2025

View reviewed changes

avalosrios reviewed Jun 17, 2025

View reviewed changes

		var res1 = await fetch(url, options)
		var res2 = await fetch(videoUrl, options)

		@@ -1 +1 @@
		VITE_API_KEY=eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiIwZmJhOGUxMThkYjlkYjQ1MDViZjJlNDIxOTA2YjBiMCIsIm5iZiI6MTc0OTUwOTQ1OC41NDU5OTk4LCJzdWIiOiI2ODQ3NjU1MmU5ODg5ZGMzMzMyMDY4OTYiLCJzY29wZXMiOlsiYXBpX3JlYWQiXSwidmVyc2lvbiI6MX0.hC15ggnHAhw1hfT_FHTOmwbKnG9c7qFyvMJeSw7LbHs'}};
		VITE_API_KEY=eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiIwZmJhOGUxMThkYjlkYjQ1MDViZjJlNDIxOTA2YjBiMCIsIm5iZiI6MTc0OTUwOTQ1OC41NDU5OTk4LCJzdWIiOiI2ODQ3NjU1MmU5ODg5ZGMzMzMyMDY4OTYiLCJzY29wZXMiOlsiYXBpX3JlYWQiXSwidmVyc2lvbiI6MX0.hC15ggnHAhw1hfT_FHTOmwbKnG9c7qFyvMJeSw7LbHs No newline at end of file

[Flixster] Movie Explorer Project #63

Are you sure you want to change the base?

[Flixster] Movie Explorer Project #63

Uh oh!

Conversation

jseifferly commented Jun 17, 2025

Flixster

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants