feat: Flixter - Pull Request to base repo #64

jasynj · 2025-06-17T21:30:00Z

https://www.loom.com/share/4b1b3fd186ca4d41a64356b68e177e92?sid=e26d51d4-9960-43cc-839e-0f3480604cc4

📽️ Flixster – Movie Discovery Web App
Submitted by: Jason Chimdinma Jason
Total Time Spent: 36 hours
Deployed App: My Site

Overview:
Flixster is a responsive movie discovery platform that allows users to browse, search, and sort movies using live data from The Movie Database (TMDB) API. Built with React, the app delivers an interactive experience with features like modals, accessibility, and sorting.

feat: styled movieList & MovieCard

…e. Basic formatting

added search functionality to filter movies based on search and clear added switch function to switch between now playing and search results

…clear button - Implemented MovieModal component with escape key and overlay click-to-close behavior - Added responsive modal styling with Netflix-style animation - Integrated backdrop, metadata (genres, rating, runtime), and overview sections -Updated clear button to also clear the movies being displayed when clicked

- Added heart and eye icons to each movie tile for favoriting and marking as watched - Toggled visual state changes on icon clicks (filled vs outlined) - Implemented state management for favorites and watched lists - Built sidebar with navigation to Home, Favorites, and Watched pages - Each view filters and displays the appropriate movie set in grid layout

style: added design finishing touches

Updated README for submission

ameyag · 2025-06-17T21:37:22Z

src/MovieModal.jsx

@@ -0,0 +1,190 @@
+import { useEffect, useState } from 'react';


Nice use of useEffect and useState

ameyag · 2025-06-17T21:38:12Z

README.md

+Submitted by: Jason Chimdinma Jason

-Currently, two official plugins are available:
+Estimated time spent: 36 hours spent in total


Great improvement on speed and productivity from last assignment!

Thank you for the advice!

ameyag · 2025-06-17T21:38:38Z

README.md

+  - [X] Website is deployed via Render.
+  - [X] **VIDEO WALKTHROUGH SPECIAL INSTRUCTIONS**: For ease of grading, please use the deployed version of your website when creating your walkthrough. 
+
+#### STRETCH FEATURES


Awesome job on completing all required and stretch goals.

src/index.css

Co-authored-by: Ameya Gawde <ameya918@gmail.com>

ishanbalar

Overall good improvements. I am happy with the current progress Few nit changes required,

decouple react component to make it more reusable.
Remove commented lines
format the code
style values should be as per the industry standard instead of random numbers

ishanbalar · 2025-06-20T22:34:04Z

src/App.css

  display: flex;
  flex-direction: row;
  align-items: center;
+  /* padding-left: 15rem */


Please dont commit commented line of code

ishanbalar · 2025-06-20T22:37:46Z

src/App.jsx

-          <MovieCard key={movie.id} movie={movie} />
-        ))}
-      </div>
+      <MovieList />


Glad to see that you have created a modularized component

ishanbalar · 2025-06-20T22:38:00Z

src/App.jsx

    <div className="App">
      <header className="App-header">
        <h1>Flixster</h1>
+        inp


Not sure if this is typo ?

ishanbalar · 2025-06-20T22:39:57Z

src/MovieList.jsx

+        console.error("Error fetching movies:", error);
+        setError("Failed to fetch movies. Please try again later.");
+        setLoading(false);


Try to implement error page and show user friendly error message on the browser for exceptions

ishanbalar · 2025-06-20T22:44:02Z

src/MovieList.css

@@ -1,12 +1,17 @@
 .movie-list-container {
-  padding: 20px;
+  padding: 11rem 3.5rem;


You should use these constant values from this series of numbers i.e. 2, 4, 8, 12,16, 20, 24 to follow better practice

ishanbalar · 2025-06-20T23:01:04Z

src/MovieList.jsx

 import './MovieList.css';

-const MovieList = ({ searchQuery, view, onViewToggle }) => {
+const MovieList = ({ searchQuery, view, sortBy, onViewToggle }) => {


From this commit you are making this MovieList component more tightly coupled. AS discussed in our 1:1 you should modularize the component so it can be re-use anywhere

ishanbalar · 2025-06-20T23:02:34Z

src/App.jsx

+          onToggleFavorite={toggleFavorite}
+          onToggleWatched={toggleWatched}
+          isMovieFavorite={isMovieFavorite}
+          isMovieWatched={isMovieWatched}


Try not to bubble up these events and restrict these events upto its own component to scale the application better.

ishanbalar · 2025-06-20T23:03:50Z

src/MovieList.jsx

        <div className="no-results">
          {currentPage === 'favorites'
-            ? "You haven't added any favorites yet"
+            ? "you havent added any favorites yet"


nit: haven't v/s havent

ishanbalar · 2025-06-20T23:06:09Z

src/MovieModal.jsx

+        const detailsResponse = await fetch(detailsUrl);
+        const detailsData = await detailsResponse.json();


Will this following one line works instead of 2 constants ?

const detailsData = await fetch(detailsUrl).json();

ishanbalar · 2025-06-20T23:08:35Z

src/App.css

+  /* background-color: #282c34; */
+  /* display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between; */


Commented lines lead to un-readable code, Please avoid having them

jasynj added 18 commits June 10, 2025 11:17

feat: created MovieCard component that displays data from API

a212b3b

feat: Added movielist component

d5fe3a0

feat: styled movieList & MovieCard

Created search-form

7c520e9

feat: IMPLEMENTED WEBSITE DESIGN, chose color scheme and website them…

1cfb8fb

…e. Basic formatting

feat: added load more button

0e35622

added search functionality to filter movies based on search and clear added switch function to switch between now playing and search results

Added responsive design for Add.header

d07ab11

chore: add .env to gitignore

5cd679c

style: tweaked modal info grid arrangement, converted px units to rem

402ac4c

feat: Implemented drop-down menu and functionality

656266e

style: Updated liked/watched icons and edited sidebar styling

ebffc7e

bugfix: connected sidebar.css

594f8a5

feat: added modal thumbnails for video preview

420d182

style: added design finishing touches

style: final changes and formatting

53e5c83

Bugfix: moved header to front

b8198a1

Update README.md

b237211

Updated README for submission

Added walkthrough video to README

bcc4e0a

ameyag reviewed Jun 17, 2025

View reviewed changes

Update src/index.css

8536e31

Co-authored-by: Ameya Gawde <ameya918@gmail.com>

ishanbalar reviewed Jun 20, 2025

View reviewed changes

		@@ -0,0 +1,190 @@
		import { useEffect, useState } from 'react';

		const detailsResponse = await fetch(detailsUrl);
		const detailsData = await detailsResponse.json();

feat: Flixter - Pull Request to base repo #64

Are you sure you want to change the base?

feat: Flixter - Pull Request to base repo #64

Uh oh!

Conversation

jasynj commented Jun 17, 2025

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!

Uh oh!

ishanbalar left a comment

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!

4 participants