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
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.
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.
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
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 😭
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
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
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
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!!!
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.
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 */
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.
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" ?
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.
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.
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
in my project instead of saving the watchedlist data in the local storange I want to make it in a database(JSON server if possible) can someone help me to achieve this? Because I want the watchlist to be online feature so other people can see what other people added to the watched list. Any help would be great! Thanks!
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
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? :(
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
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!
@@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.
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.
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.
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.
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
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!
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.
Damn you should keep uploading these tuts , there was never a moment where I felt overwhelmed by the concepts you taught.
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
Hi, do you can share the code please.
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.
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.
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!
i guess I'm quite off topic but does anybody know a good site to stream newly released tv shows online ?
Thanks heaps for this video. I now have a good understanding on useContext, useReducer and localStorage. Hope it helps me pass my interview :)
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.
superb bro, we need some more tutorial like this
next time with e-commerce
tq broo, looking foward your project tutorial , its help me to learn autodidact
This is a very comprehensive and well explained video. thank you so much :D
this was so helpful and inspiring.
thank you so much Matt,
looking forward to seeing more of your awesome tutorials
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.
Thank you so much. It was one the best tutorials that I ever watched.
Thank you for the tutorial, it was really helpful.
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
very beautiful tutorial bro, thank you
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 😭
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
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
Thank you so much, such an amazing tutorial.
great tutorial, thank you!
Learned so much from this! Thank you!
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!
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
Very good tut. Learned a lot.
Thanks for wonderfull tutorial can make on backend
Great tutorial! Thanks!
You should do a e commerce with a shipping cart with react hooks, context and firebase 🙏🏼
Wow. This is a great project.
You are amazing dude keep going
Greate, what color theme for VSC do you use?
Thx for the tutorial
Great video! Learnt a lot as a beginner.
Thanks! Glad the tutorial helped!
Hi what do you do for living? Why do you have only 900 subscribers? You definetly deserve more
Thanks John, appreciate that! My day job is as a software developer - making RUclips videos is a side hobby of mine!
@@MattTheDevYT do you work remotely? I wrote you in Twitter, what concepts i need to know to find job as a react developer?
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!!!
Great tutorial. Explained concepts clearly and made it easy to understand 👍🏻
Thank you for this, yupe thats great !!!!!!!!!
Cannot read properties of undefined (reading 'length') any solution?
Really great learning
what extension do you use for the html tags lets you auto fill in the divs with the classNames by putting .whatever
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.
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 */
yeah things have changes now in v6
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.
Switch was replaced with Routes
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" ?
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.
did you find a solution for this?
awesome voice dude )thx
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.
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
why not to useeffect to check the movie is watched or in watchedlist in ResultCard component?
Thank you so much
in my project instead of saving the watchedlist data in the local storange I want to make it in a database(JSON server if possible) can someone help me to achieve this? Because I want the watchlist to be online feature so other people can see what other people added to the watched list. Any help would be great! Thanks!
amazing video mate
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
great tutorial!
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? :(
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.
why you don't publish more videos about react? your last video was amazing. thanQ
good work matt, just got one subs from me lad
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
i tired doing the search button but its not outputing the data, i don't know what is wrong? Could you help?
At 23:15, why do we use e.target.value as query parameter instead of the state variable query we set?
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.
goood stay with you my dear
thanks matt
Great tutorial, Matt! Just one input, pace is a bit too fast.
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.
Hei,can you do tutorial from start to finish,how to create movies website from A to Z.from wordpress scratch to publish website.
Might be outdated? Switch doesn't seem to work any longer. Does anyone know what version of React he is using?
Switch was replaced with Routes
YOUR A CHAMP LAD
upload videos regularly ..
Does anybody know how to disable the "add to wached" button by default while I'm in Add commponent?
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?
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!
@@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.
hey! what theme is this? thanks for tutorial!
Do you mean my VSCode theme? It's called "Shades of Purple" - it's a good one!
What to write in Application Url for API request?
nevermind I got it
Sir can you tell me extension in js when you typing .header blala
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.
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.
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.
Im at 46minute. to testing the add to watchlist for the first time. Im getting 'addMovieToWatchlist is not a function'. any ideas?
same problem
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.
same
53:21 How did you split code line?
I think its done with Prettier
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
My man..
21:00 46:33 59:03 remove btn 1:03:14 , 1:07:03 1:19:01 1:21:30
I am keep on getting this error "Cannot read property 'length' of undefined" I am on 26:35
How it is your code, mate?
did you get any solution?
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?
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!
How to run this can anyone help
I made my own version of movie watch list that's full stack mern web application
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.
@@mucashamboni6647 that’s what my app allows
@@yushaeraza2629 can you share the link to GitHub repo please
@@mucashamboni6647 I tried but links are not allowed in the comments section
@@yushaeraza2629 why are my comments getting deleted 🥲
like
35:20
upload videos regularly ..