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/s... 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:- / kodewithvishal
Instagram:- / code_withvishal
You get the source code from here :- https://ko-fi.com/s/fb2dc4c8c2 or https://www.buymeacoffee.com/CodeWith...
You can also support me through this way as well :- https://www.buymeacoffee.com/CodeWith... or
https://ko-fi.com/codewithvishal
Watch video Build Movie Watchlist App with React, Redux-Toolkit, RTK-Query & Redux-Persist | Material-UI online without registration, duration hours minute second in high quality. This video was added by user CodeWithVishal 14 November 2022, don't forget to share it with your friends and acquaintances, it has been viewed on our site 4,976 once and liked it 141 people.