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
Смотрите видео Build Movie Watchlist App with React, Redux-Toolkit, RTK-Query & Redux-Persist | Material-UI онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь CodeWithVishal 14 Ноябрь 2022, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 4,976 раз и оно понравилось 141 людям.