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

Подписаться 1,5 тыс.

Просмотров 89 тыс.

50% 1

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

Опубликовано:

26 май 2020

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 120

@sebastianramsauer7627 3 года назад

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 3 года назад

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

@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.

@ParadoxWorks 3 года назад

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 2 года назад

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

@goofy7791 3 года назад

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

@ucielsola 2 года назад

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.

@shafiqimtiaz9198 Год назад

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

@elisapaulo8630 3 года назад

Thank you for the tutorial, it was really helpful.

@abhashsingh6293 3 года назад

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

@ellameta6169 3 года назад

Learned so much from this! Thank you!

@cutyoursoul4398 3 года назад

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 2 года назад

Hi, do you can share the code please.

@yasine7584 3 года назад

very beautiful tutorial bro, thank you

@al-doori2392 2 года назад

Thank you so much, such an amazing tutorial.

@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.

@abshake8 Год назад

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

@kamaboko1 3 года назад

Very good tut. Learned a lot.

@brunomartins4871 3 года назад

Great tutorial! Thanks!

@earthbending4924 Год назад

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

@wudao88 Год назад

great tutorial, thank you!

@edgydodgy3417 4 года назад

Great video! Learnt a lot as a beginner.

@MattTheDevYT 4 года назад

Thanks! Glad the tutorial helped!

@jaggyjut 2 года назад

Wow. This is a great project.

@farajabbas7459 3 года назад

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

@dimersonnunez6268 3 года назад

You are amazing dude keep going

@wesonweb 3 года назад

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

@MrVois 3 года назад

great tutorial!

@reyanahtesham1272 3 года назад

amazing video mate

@nameless798 2 года назад

Thx for the tutorial

@rohitmahajan2111 2 года назад

Really great learning

@kameshs4109 3 года назад

Thanks for wonderfull tutorial can make on backend

@ozzyfromspace 2 года назад

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 😭

@khouloudachour 3 года назад

Thank you so much

@TemsiImsirovic 3 года назад

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

@peterhryhoruk 2 года назад

awesome voice dude )thx

@abubakar-emumba 3 года назад

thanks matt

@dataisbeauty5512 3 года назад

goood stay with you my dear

@zourdy697 3 года назад

good work matt, just got one subs from me lad

@missMiracle7 3 года назад

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 3 года назад

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

@patrickwatson6742 3 года назад

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!

@oleksiik4473 3 года назад

Greate, what color theme for VSC do you use?

@indiarabarreto3925 3 года назад

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

@samfallowfield3000 2 года назад

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

@vnsn_ngyn 3 года назад

YOUR A CHAMP LAD

@daveb7596 2 года назад

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

@obey_giant 2 года назад

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

@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 3 года назад

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

@florenceelvis7435 3 года назад

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

@gufranahmed2091 2 года назад

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 2 года назад

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

@pedjastojiljkovic7717 3 года назад

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

@mehdikhajavi6495 3 года назад

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

@Michael-jj8hu 2 года назад

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

@simoncarriere4086 3 года назад

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

@Jumauntages 2 года назад

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.

@athiraroyal3744 3 года назад

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 3 года назад

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 3 года назад

did you find a solution for this?

@brandonduong2076 2 года назад

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 2 года назад

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

@deanambrose6927 Год назад

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

@yadnyeshrane7448 3 года назад

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.

@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

@johnkucharsky6927 2 года назад

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

@MattTheDevYT 2 года назад

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

@johnkucharsky6927 2 года назад

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

@payonextgen9540 3 года назад

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

@alexanderfilippovich4757 3 года назад

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

@eltonsantosoficial 3 года назад

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 2 года назад

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.

@ItsRageYT 3 года назад

hey! what theme is this? thanks for tutorial!

@MattTheDevYT 3 года назад

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

@Musikberoende 2 года назад

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

@arupde6320 2 года назад

upload videos regularly ..

@mustafa8357 2 года назад

My man..

@george4577 3 года назад

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

@mohammadrafey2981 3 года назад

same problem

@mohammadrafey2981 3 года назад

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 3 года назад

same

@theKaminoanru 3 года назад

53:21 How did you split code line?

@emis12121212 3 года назад

I think its done with Prettier

@huyle3866 2 года назад

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

@MattTheDevYT 2 года назад

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.

@michaelvanderloon6392 3 года назад

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

@2010giant 2 года назад

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 2 года назад

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 2 года назад

@@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.

@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

@subashvelmurugan3677 2 года назад

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.

@kaze01234 Месяц назад

What to write in Application Url for API request?

@kaze01234 27 дней назад

nevermind I got it

@Abogida11 3 года назад

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

@goofy7791 3 года назад

How it is your code, mate?

@deanambrose6927 Год назад

did you get any solution?

@agusmahari2755 2 года назад

@Aravind_Ap 2 года назад

How to run this can anyone help

@adroitpersonn2356 3 года назад

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 3 года назад

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!

@thedyslexicwebdev1654 2 года назад

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

@yushaeraza2629 2 года назад

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

@mucashamboni6647 Год назад

@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 🥲

@SH-lt2iv 3 года назад

35:20

@arupde6320 2 года назад

upload videos regularly ..

@delanyeong8666 2 года назад

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!!!