Create a Movie Watchlist with React Hooks, Context API and localStorage

In this tutorial we'll be creating a movie watchlist using React, implementing React Hooks, Context API, storing data in localStorage and fetching data from an external API (The Movie Database).
GitHub Repo with final code (grab the CSS and FontAwesome from here):
github.com/MattDobsonWeb/movi...
Create an account and request an API key for TMDB:
www.themoviedb.org/
✋ Brand New DevUp Club Discord Channel - Join the server for assistance! ✋
/ discord
#react #project #tutorial
VSCode extensions used in this video:
ES7 React Snippets
marketplace.visualstudio.com/...
React Dev Tools Chrome Extension
chrome.google.com/webstore/de...
----------------
Follow me on twitter!
/ mattdobsonweb

[@sebastianramsauer7627]

Wonderful tutorial, I really enjoy that you are quite fast, I had to pause quite often but it was never "boring" since you kept a good pace.

[@pratikchand1832]

Damn you should keep uploading these tuts , there was never a moment where I felt overwhelmed by the concepts you taught.

[@ParadoxWorks]

Thank you so much, Matt! This is a world class tutorial! Looking forward to learning to build this project and acquire new react knowledges. Cheers!

[@eliseosawyer6132]

i guess I'm quite off topic but does anybody know a good site to stream newly released tv shows online ?

[@ucielsola]

THANKS!!! Really thank you so much! I followed step by step, and also added some more functionalities like dark theme switcher, using what I learned with your video.

[@ChiYanTse]

Hi Matt! Thank you so much for this tutorial. I just finish building this project and learn so much. I hope you do more video like this.

[@goofy7791]

Thank you so much. It was one the best tutorials that I ever watched.

[@cutyoursoul4398]

So little view for a so useful tutorial, thanks a lot man, helped me to build my first decent react project. I builded it with material UI and it came really nicely

[@TheHasni69]

Hi, do you can share the code please.

[@shafiqimtiaz9198]

This is a very comprehensive and well explained video. thank you so much :D

[@elisapaulo8630]

Thank you for the tutorial, it was really helpful.

[@OsmAnaa]

this was so helpful and inspiring. thank you so much Matt, looking forward to seeing more of your awesome tutorials

[@mucashamboni6647]

Hi, I just wanted to know how can we make this app personalized for each user. Like a user can login using his password and can edit his own watchlist. In short I want to make separate watchlist for each user.

[@ellameta6169]

Learned so much from this! Thank you!

[@abhashsingh6293]

superb bro, we need some more tutorial like this next time with e-commerce

[@yasine7584]

very beautiful tutorial bro, thank you

[@abshake8]

Thanks heaps for this video. I now have a good understanding on useContext, useReducer and localStorage. Hope it helps me pass my interview :)

[@al-doori2392]

Thank you so much, such an amazing tutorial.

[@brunomartins4871]

Great tutorial! Thanks!

[@kamaboko1]

Very good tut. Learned a lot.

[@earthbending4924]

tq broo, looking foward your project tutorial , its help me to learn autodidact

[@edgydodgy3417]

Great video! Learnt a lot as a beginner.

[@MattTheDevYT]

Thanks! Glad the tutorial helped!

[@wesonweb]

Great tutorial. Explained concepts clearly and made it easy to understand 👍🏻

[@wudao88]

great tutorial, thank you!

[@farajabbas7459]

Thank you for this, yupe thats great !!!!!!!!!

[@jaggyjut]

Wow. This is a great project.

[@dimersonnunez6268]

You are amazing dude keep going

[@MrVois]

great tutorial!

[@reyanahtesham1272]

amazing video mate

[@nameless798]

Thx for the tutorial

[@rohitmahajan2111]

Really great learning

[@ozzyfromspace]

Hey Matt, less than a minute in, I already knew I'd found a rare gem of a tutorial 🏆🔥💯 Keep it up mate! And greetings from the USA 👽. edit - I went to your website cuz it sounded interesting, but the website's down 😭

[@kameshs4109]

Thanks for wonderfull tutorial can make on backend

[@TemsiImsirovic]

Awesome tut, i learned a lot from this. Can u create some shopping cart tutorial based on context api since i learning to create a shopping cart app. Thank you

[@zourdy697]

good work matt, just got one subs from me lad

[@khouloudachour]

Thank you so much

[@dataisbeauty5512]

goood stay with you my dear

[@peterhryhoruk]

awesome voice dude )thx

[@abubakar-emumba]

thanks matt

[@obey_giant]

You should do a e commerce with a shipping cart with react hooks, context and firebase 🙏🏼

[@missMiracle7]

I love this tutorial! I learned so much by following along! I have a question: what is the difference of doing the fetch API inside the onChange function than using the useEffect? I'm still new to react I found it sometimes confusing and would like to know which way is better for fetching api data

[@youshamahmood3183]

You will want to use the useEffect hook if the data you are fetching doesnt depend on any input field like it is shown here. For example you want to get all the movies ever existed, then you will use fetch inside the useEffect hook, as this hook gets fired upon dependencies. In this case, as the name of the movie needed to be injected inside the query parameter, the fetch is being called after the injection has beed done throught the input field

[@oleksiik4473]

Greate, what color theme for VSC do you use?

[@vnsn_ngyn]

YOUR A CHAMP LAD

[@patrickwatson6742]

Thank you very much ,so exciting tutorial ,but i have just a problem with buttons on movieCard (eye,timer) didn't appear with me ,please help!

[@samfallowfield3000]

Great video, has anyone had any luck adding a genre section to it as well? confusing way the API works with giving them genre ID's instead of just the genre

[@daveb7596]

what extension do you use for the html tags lets you auto fill in the divs with the classNames by putting .whatever

[@pedjastojiljkovic7717]

Great tutorial, Matt! Just one input, pace is a bit too fast.

[@indiarabarreto3925]

while was following all of your instructions and making all the functions and everything was working very well and then just stopped working when i created the folder "context" and started to do everything was there and then my app just disappeared

[@mucashamboni6647]

Great Tutorial I just wanted to know how can we make this app personalized for each user. Like a user can login using his password and can edit his own watchlist. In short I want to make separate watchlist for each user.

[@smithdragon6477]

why not to useeffect to check the movie is watched or in watchedlist in ResultCard component?

[@johnkucharsky6927]

Hi what do you do for living? Why do you have only 900 subscribers? You definetly deserve more

[@MattTheDevYT]

Thanks John, appreciate that! My day job is as a software developer - making KZbin videos is a side hobby of mine!

[@johnkucharsky6927]

@@MattTheDevYT do you work remotely? I wrote you in Twitter, what concepts i need to know to find job as a react developer?

[@deanambrose6927]

Cannot read properties of undefined (reading 'length') any solution?

[@florenceelvis7435]

i tired doing the search button but its not outputing the data, i don't know what is wrong? Could you help?

[@gufranahmed2091]

is there a way to store the context api in the local storage when using next.js, the code basically gives me local storage is undefined since nextjs is server side and local storage is client side.

[@akhilbandari]

access it after componentDidMount or inside useeffect with empty dependancy array. You can also maybe use a conditional like this typeof window !== undefined, which returns false for applications which do not use window object in client

[@mehdikhajavi6495]

why you don't publish more videos about react? your last video was amazing. thanQ

[@simoncarriere4086]

At 23:15, why do we use e.target.value as query parameter instead of the state variable query we set?

[@Jumauntages]

I think it's because on the first key typed, the query state is an empty string, the query state updates its value after the next rendering.

[@Michael-jj8hu]

how to fix a nasty error of "Assign arrow function to a variable before exporting as module default" in the reducer ? to change what he's doing at 37:35

[@arupde6320]

upload videos regularly ..

[@mustafa8357]

My man..

[@dlmetadlmytfuckthis]

i got a error message when i type to search: Cannot read properties of undefined (reading 'length') TypeError: Cannot read properties of undefined (reading 'length') how do I fix this

[@ItsRageYT]

hey! what theme is this? thanks for tutorial!

[@MattTheDevYT]

Do you mean my VSCode theme? It's called "Shades of Purple" - it's a good one!

[@brandonduong2076]

Hey Matt i was following your example for a similar project but i got an error when i use the onclick button function, "TypeError: e is not a function at Object.fi [as useReducer]" any reason why it says this?

[@dawidolino9398]

i've just done this tut and never got the error, the only one thing "wrong" is the outdated word in routing section

[@yadnyeshrane7448]

I m facing a issues my api key and all everything is correct but why i am getting the error ---Invalid API key: You must be granted a valid key.

[@payonextgen9540]

Hei,can you do tutorial from start to finish,how to create movies website from A to Z.from wordpress scratch to publish website.

[@eltonsantosoficial]

I found a bug, when you click the Add to Watched button, both buttons are disabled, while if you click the Add to Watchlist button, only the Add to Watchlist button is disabled. How I solve it? :(

[@andrei-petrulazar5564]

it`s not a bug. If you add the movie to the "watched list" means you already watched the movie and you don`t need to add it to the watchlist.

[@athiraroyal3744]

I am at 44:02, why this happning in AppReducer.js "Assign arrow function to a variable before exporting as module default import/no-anonymous-default-export" ?

[@laturchasanket6901]

I didn't really understand your question but let me try to answer it...lol. From what I have seen in multiple videos, while creating app reducer they don't assign the function to a variable or constant and I think that the file name itself is the function name so we can directly export the arrow function an use file name to import the appreducer.

[@coreyguitars533]

did you find a solution for this?

[@alexanderfilippovich4757]

Does anybody know how to disable the "add to wached" button by default while I'm in Add commponent?

[@agusmahari2755]

like

[@michaelvanderloon6392]

Has anyone encountered a cors error with this API? I am encountering a CORS error when trying to call. I believe it has something to do with a bearer token

[@theKaminoanru]

53:21 How did you split code line?

[@emis12121212]

I think its done with Prettier

[@huyle3866]

Sir can you tell me extension in js when you typing .header blala

[@MattTheDevYT]

Sure! That extension is called Emmet - it comes built into VSCode and you type your class name and hit the TAB key to create the element.

[@JustJohnny]

Might be outdated? Switch doesn't seem to work any longer. Does anyone know what version of React he is using?

[@laurenwaknin797]

Switch was replaced with Routes

[@2010giant]

I follow the whole tutorial but not sure how much I understand... maybe 30%? Is this app good for a resume? or is it too advanced?

[@MattTheDevYT]

Hi David, thanks for watching! This is a great starter project if you've created some basic React projects already - lots of basic React starter projects don't use the Context API (state management) like we do in this tutorial. If you're very new to React it might be worth taking an even simpler starter tutorial - after a few basic starter projects you may begin to understand why we need to use the Context API. This project will look great on your resume! It shows usage of state management and grabbing data from an external API! Cheers!

[@2010giant]

@@MattTheDevYT Thank you for replying! After I do some searching and re-watching this tutorial, now I can understand 65% up, try to get a frontend job before the end of this year.

[@kaze01234]

What to write in Application Url for API request?

[@kaze01234]

nevermind I got it

[@subashvelmurugan3677]

Hey Matt ,I am receiving status_code: 7 status_message: "Invalid API key: You must be granted a valid key." success: false in search api Can you plz respond and help me to debug this error.

[@abshake8]

Your API key is not valid. You need to use a valid API key from your tmdb account. Or it could be that you are not putting .env.local file to the right location which is outside the 'src' folder.

[@Musikberoende]

I got an error message: "'Switch' is not exported from 'react-router-dom'". I changed the import of Switch to Routes instead, and the syntax for this is a bit different. import {BrowserRouter as Router, Routes, Route} from "react-router-dom"; So it looks like this: /* More links */

[@priyanshumishra7900]

yeah things have changes now in v6

[@mucashamboni6647]

Hi ! I just wanted to know how can we make this app personalized for each user. Like a user can login using his password and can edit his own watchlist. In short I want to make separate watchlist for each user.

[@laurenwaknin797]

Switch was replaced with Routes

[@Aravind_Ap]

How to run this can anyone help

[@george4577]

Im at 46minute. to testing the add to watchlist for the first time. Im getting 'addMovieToWatchlist is not a function'. any ideas?

[@mohammadrafey2981]

same problem

[@mohammadrafey2981]

edit: @george in the globalstate file where he is passing "addMoviesToWatchlist" within the value of the GlobalContext Provider change it to something like addMovies: addMoviesToWatchlist. For some odd reason it should work with just addMoviesToWatchlist as hes giving the key and value the same name.. but it doesn't for me. However, that did work for me so you can try it out.

[@malozyali]

same

[@adroitpersonn2356]

www.themoviedb.org/ this website is not working. can you suggest any similar sort of other website with whom we can carry on this project?

[@MattTheDevYT]

That's strange - it's working for me at the moment, maybe you caught it whilst it was down? You just need to create an account over there and then request an API key and you should be good to go!

[@Abogida11]

I am keep on getting this error "Cannot read property 'length' of undefined" I am on 26:35

[@goofy7791]

How it is your code, mate?

[@deanambrose6927]

did you get any solution?

[@SH-lt2iv]

35:20

[@thedyslexicwebdev1654]

21:00 46:33 59:03 remove btn 1:03:14 , 1:07:03 1:19:01 1:21:30

[@yushaeraza2629]

I made my own version of movie watch list that's full stack mern web application

[@mucashamboni6647]

Hi ! I just wanted to know how can we make this app personalized for each user. Like a user can login using his password and can edit his own watchlist. In short I want to make separate watchlist for each user.

[@yushaeraza2629]

@@mucashamboni6647 that’s what my app allows

[@mucashamboni6647]

@@yushaeraza2629 can you share the link to GitHub repo please

[@yushaeraza2629]

@@mucashamboni6647 I tried but links are not allowed in the comments section

[@mucashamboni6647]

@@yushaeraza2629 why are my comments getting deleted 🥲

[@arupde6320]

upload videos regularly ..

[@delanyeong8666]

When I tried refreshing the page at Watch List or Watched after adding a movie, the app turns blank. The console error shows "Uncaught TypeError: watched.map is not a function at Watched". Same goes for watchlist.map or watched.find/watchlist.find. HELP!!!