Build Movie Watchlist App with React, Redux-Toolkit, RTK-Query & Redux-Persist | Material-UI

Описание

In this video, we will build movie watchlist application using the technology like React, Redux-Toolkit, RTK-Query & Redux-Persist. We will be using external API https://developers.themoviedb.org/3/search/search-movies in order to fetch movie.

Timestamp
00:00 Intro
00:05:05 Set-up & Installing package
00:07:30 Cleanup
00:09:37 Structuring app
00:12:47 React Router Dom
00:16:07 Header
00:23:00 Search Input field
00:29:07 Configure TMDB Api key
00:31:27 Use RTK-Query for creating endpoint
00:36:27 Hook-up service in store
00:39:00 RTK-Query custom hook to fetch movie
00:45:00 Creating component for movie search
00:55:00 Configure and write action to add movie in slice
1:00:00 Dispatch an action to add movie in Watchlist
1:02:37 Get watchlist movie with useSelector
1:04:17 Create selector for movie watchlist in slice
1:06:27 Creating Grid & Card component with MUI to show watchlist movie
1:16:37 Creating Control with MUI on Movie Card
1:23:27 Hide/Show control using HTML Event on Movie Card
1:27:27 Write an action to add movie into watched in slice
1:30:27 Dispatch action to add movie into watched
1:32:57 Write an action to remove movie from watchlist in slice
1:34:07 Dispatch action to remove movie from watchlist
1:36:00 Disable Add to Watchlist button after adding movie to watchlist
1:40:00 Working on watched page and render watched movie
1:41:00 Enable control on watched movie page
1:45:00 Write other action to move movie into watchlist and remove movie from watched
1:46:17 Dispatch action to move movie into watchlist and remove movie from watched
1:48:37 Add Add to Watched button on search result
1:49:37 Disable Add to Watched button either movie in Watchlist or Watched
1:52:57 Creating custom message component with MUI
1:55:17 Use Redux-Persist to persist data in app


My Social Media Link
Facebook Page:- https://www.facebook.com/KodeWithVishal
Instagram:- https://www.instagram.com/code_withvishal/

You get the source code from here :- https://ko-fi.com/s/fb2dc4c8c2 or https://www.buymeacoffee.com/CodeWithVishal/e/101178

You can also support me through this way as well :- https://www.buymeacoffee.com/CodeWithVishal or
https://ko-fi.com/codewithvishal