Hi Chris, thanks for your tutorials and articles ! I am a freshly graduated engineer in electrical engineering from France and self-taught full-stack web developer, now focusing on front-end to start a new job as a junior FE developer :-) ! I just wanted to let you know that what you are doing really help me to better understand front-end development and grasp the different concepts ! Thanks again 💪👏
Your code and explanation is so clear and readable that as a beginner I hope to one day be able to write and explain as well as you! Please, keep it up! :)
Your explanations are very clear. As a beginner to react I get to learn how the useState and useEffect hooks are used in a real application. Thank you so much for this video. Keep making good stuff. ❤🔥
Thanks for such an IDEAL tutorial. I have a task to do for my job and it's very similar to this one. I learned a lot of new technologies and gained a huge amount of knowledge thanks to you, Chris. I wish you Health and Happiness!
This is the best react project and you explained it very well. As a beginner I really enjoyed doing this, you have cleared most of my doubts Thank you so much🙌. Love from India❤ :We can use a if statement in addtofavourites to avoid duplicate entries of movies.
Hey Chris, when trying to add favorites (especially the part at 33:08) i get this error: "Cannot read properties of undefined (reading 'Poster')", and it points me to MovieList.js line 10 , if i put "movie?.Poster" i can avoid the error but the favorites category has no images, it somehow can't find the path to the images, even though the images appear in the normal movie list, can you help me? P.s this happens when i click the add to favorites overlay.
it could be that your favourites state value is null/empty etc, you can check this by using react dev tools or logging the state value out. If it is you'll have to fix the logic around the areas that set the state (sorry I can't remember the code for this one too well)
Hi Chris at 7:55 you added 2 bootstrap classes which aligned the movie posters by row className:'container-fluid' className:'row' It didn't work for me movies are still being displayed column wise I checked if bootstrap is working by adding few sample className it worked ...
@@lakshna2410 replicate the css code written after 7:55 for like 30-40 seconds and run the code it should work but it gave me some different styles and scrollbar which was not in the video.
It's absolutely very interesting tutorial. It would be nice if you tell how to deploy it because the same movie search app is throwing error in my case.
hi Chris im having a problem with this piece of css code .movie-app > .row { overflow-x: auto; flex-wrap: nowrap; } it's not rendering any idea whats going on
I had the same problem and for me the answer was this - in MovieList.js, inside the return statement, the outermost JSX elements should be not (because it is a React fragment) - when you look at Chris's MovieList.js in video just after we add this bit of CSS you can see what I mean. I had just missed this bit earlier in the video and set it up wrong, oops
It would be nice to add error handling as well and also a function to remove favorite movie from localstorage to get updated list fav movies after refreshing the page, for a better UX Thanks for a video!
How to make more restrictions in inuput there? Because if i write something not regarding the name of movie application give me the next error ' Unhandled Rejection (TypeError): props.contries.map is not a function'! Chris can u help me to fix this error?
hey i love this video. just one question: right after you started displaying the movie posters they were side by side with no margins. when i wrote the same code as you are theey were really far one from each other. is there a solution for that? thanks
@@ChrisBlakely Sure thing. I emailed you hello@jschris.com about an issue I am having 20 minutes into the video with updating state onchange. If you have a moment, can you look at my screen shots?
im about 15 minute through, following exactly as you have done but for some reason i'm getting this error, has anyone come up against this, Warning: Each child in a list should have a unique "key" prop. it then says check the render method of 'MovieList'
When i run 1st time this app it is not working it gives me error... because when u run 1st time in your browser it has no favourites movie in the local storage...so favourite component gives an error because map can't use on null or undefined...plz fix this
Hi Chris, I am a complete begginer and I know you said you don't remember this project so good, but I would love for some guidance. When adding the 'container-fluid movie-app' The movies get sorted in a row- but there is a huge gap between them. Could it be due to bootstrap version? Or something else? Thanks!
Hey, you’re right this is an old ass video and it’s probably a bit out of date. The bootstrap docs might have some examples on how to arrange things. Alternatively, if you ask ChatGPT it might be able to tell you how it’s done using latest bootstrap. Good luck !
Hi Chris, why you did not use the bootstrap d-flex flex-nowrap inside the element tag, instead of using CSS? Another question, why you did not use display:flex in css before using flex-wrap:nowrap? Thanks
1) Didn't think of it at the time :) 2) Didn't need it - probably because the element was already a flexbox container. Can't exactly remember its been a while since I coded this lol
but we can add same into favourites again and again, it must be added only once. What can I do to not add to favourites if it's already added. Thank you
The project is working fine in local host but when i deployed it using vercel or netlify the api is not working , when i am searching any movie it is not showing any movie, can anyone tell me what is the problem?
Sir I'm facing one issue during making that movie app.....when i put all the images in a single row then there will be a gap between two images...So how can i remove that gap
I am not able to add a scroll effect. I have written the same code but it's still not working. Some are saying it is because of the version of the bootstrap. Can Someone please help me with this.
When you do a search the list gets updated and you would lose the attribute that was added. You would have to merge the next search list with your current search list, filtering out any duplicates. And it’s not performant In a ‘real app’ you would Save the favourite IDS on the server , the server would then go and get all the movies and return that list in an api But that’s too much for this simple react tutorial 😀
PLEASE HELP !!!!!!! I am getting this warning with compiling "autoprefixer: Replace color-adjust to print-color-adjust. The color-adjust shorthand is currently deprecated. webpack compiled with 1 warning"
Whenever I install bootstrap and add in the bootstrap class names, it doesn't work, and the posters still display vertically rather than scrolling horizontally. Does anyone know why?
I would love some help. I did this tutorial and for some reason reason all my movies are really far apart... I have want through my CSS and don't understand what i did wrong...
Hello @Katherine Scott you will be having the latest version of bootstrap (may be >5), so just follow the command "npm i bootstrap@4.5.3" and it will work well. I was facing the same issue and it worked for me
Can you please let me know how the hell when you put overflow auto the scroll bars doesnt show up ? but you can still scroll to the side PLEAAASE LET ME KNOW
@@ChrisBlakely thanks for your answer but on full screen (desktop) it shows the ugly chrome scroll bar... but when choose like mobile device on chrome it shows nicely like yours
Hi Chris, when you added Toy Story in favourites, and refresh the page, the movies disappear which is fine. But if you research Toy story (which is now in favourite), will toy story button be diabled because we already clicked on it or it is a brand new Toy story to add ?
Hey Aata, With the current setup, we are just taking a "copy" of the movie object that comes back from the search response and saving it ourselves. In a perfect world, the API would let us have an "isFavourited" property or something in the response for a given movie, which would help us identify if the movie is a favourite or not. Since we do not have control over the API, your only option is: - When rendering the list of movies that comes back from the search, check if the movie exists in the favourites - is YES, then disable the button, don't render it etc - if NO, go ahead and render the movie as usual Hope this helps!
@@ChrisBlakely This is exactly the problem I'm facing right now. Instead of favorites, I'm actually giving each movie a rating, so that means that when dowloading the results, I need to check if the movie's been rated (based on the movie's ID and rating value that I stored in an array) and what that rating was, so I can render it along with the results. Right?
nonIterableSpread.js:2 Uncaught TypeError: Invalid attempt to spread non-iterable instance. In order to be iterable, non-array objects must have a [Symbol.iterator]() method. i am getting this error when adding to favorites ..code is exact
hi chris, i have a problem, when i tried to start the proyect, i have an error, i run the npm start command for that npm ERR! code ENOENT npm ERR! syscall open npm ERR! path C:\Users\Juanma\Desktop\AppMoviless\package.json npm ERR! errno -4058 npm ERR! enoent ENOENT: no such file or directory, open 'C:\Users\Juanma\Desktop\AppMoviless\package.json' npm ERR! enoent This is related to npm not being able to find a file. npm ERR! enoent u can help me ? thank you!!
Ah! yeah, probs just want to check if there are any movies stored in localstorage before setting it into state. Check this fix: github.com/chrisblakely01/react-movie-app/commit/14874dc2459caf7ead403e0048e8e2cd61d9d4f5
sure: - Create your own server - Create a database (w/ relational tables) - Fill the database with 1000's of movie record details - movie details, images, meta data etc - Expose an API (including searching) But I wasn't about to do that for this tutorial :)
Hey Gary, Would have to look at the code again to familiarise myself but the basic idea would be: in the addFavouriteMovie(or whatever I've called it) function, you want to check the movie you're about to add doesn't exist in the favourite list before you run the code to add it. If I remember correctly each movie has an imdbId (or some identifier), so you could use this to check if a movie exists in the favourites array, using the filter() array method or something similar. If it doesn't exist, add it by running the existing code. Else, do nothing Hopefully this helps!
Its quite a nice Tutorial, easy, simple and I Learn a lot, Now time to redoing it without watching the video
Hi Chris, thanks for your tutorials and articles ! I am a freshly graduated engineer in electrical engineering from France and self-taught full-stack web developer, now focusing on front-end to start a new job as a junior FE developer :-) !
I just wanted to let you know that what you are doing really help me to better understand front-end development and grasp the different concepts ! Thanks again 💪👏
Awesome, thanks for watching and good luck with your journey into front-end development!
Did you made it?
Your code and explanation is so clear and readable that as a beginner I hope to one day be able to write and explain as well as you! Please, keep it up! :)
hi, are you able to code now?
great vid, as a beginner in react this answered so many of my questions. keep it up
Your explanations are very clear. As a beginner to react I get to learn how the useState and useEffect hooks are used in a real application. Thank you so much for this video. Keep making good stuff. ❤🔥
Glad it was helpful!
Thanks for such an IDEAL tutorial. I have a task to do for my job and it's very similar to this one. I learned a lot of new technologies and gained a huge amount of knowledge thanks to you, Chris. I wish you Health and Happiness!
I needed this, thank you for explaining so well!
Thanks for watching ! 😃
Hello Chris! Thanks for your tutorials, you are doing a great job, keep it up, I know your yt channel will be huge someday.
Thanks for the kind words and for the support 🙌
Thank you bro! I really like your content. Keep it up !
Thankyou bro You are the best, please keep up the good job
Thanks sir, i learnt a lot of things from this project 🙏
This is the best react project and you explained it very well. As a beginner I really enjoyed doing this, you have cleared most of my doubts Thank you so much🙌. Love from India❤
:We can use a if statement in addtofavourites to avoid duplicate entries of movies.
Love the video! I've learnt a lot! Thank you very much for that. You've got a new subscriber now. Great content! Please, keep it up! :)
Hey Chris, when trying to add favorites (especially the part at 33:08) i get this error: "Cannot read properties of undefined (reading 'Poster')", and it points me to MovieList.js line 10 , if i put "movie?.Poster" i can avoid the error but the favorites category has no images, it somehow can't find the path to the images, even though the images appear in the normal movie list, can you help me? P.s this happens when i click the add to favorites overlay.
it could be that your favourites state value is null/empty etc, you can check this by using react dev tools or logging the state value out. If it is you'll have to fix the logic around the areas that set the state (sorry I can't remember the code for this one too well)
Waiting for the next video! please upload one more video like shopping cart kind of application... Thanks!!!
Amazing project thankyou so much for this
Great Chris!
hy Chris, thanks for this tutorial, very helpful, though the pace was something. great job
Nice 😎
600th Subscriber ✌️
Great tut, thanks!
Great tutorial!! Please do a tutorial which includes routing/ multi page application? Thanks in advance
You are the best bro! Please a tutorial about NodeJS Web Scraping would be awesome!
use puppeteer
@@prajwalkv1175 yeah I started with python much easier but thank you bro!
Thanks alot just what i was searching
You're welcome 😊
Nice tutorial. Very useful.
Thank you
Thank you for watching as always Sergio!
This was awesome 👏🏻 Thank you
good content for beginners I liked it bro!!
Thanks for watching ! I appreciate the comment 😄
Thank you Chris the tutorial is overwhelming
this is great! thanks so much
Hi Chris at 7:55 you added 2 bootstrap classes which aligned the movie posters by row className:'container-fluid'
className:'row'
It didn't work for me movies are still being displayed column wise
I checked if bootstrap is working by adding few sample className it worked ...
Hi Vamshi,
Same is the case for me. Did you get the solution ?
@@lakshna2410 instead of using bootstrap i just used css
@@lakshna2410 replicate the css code written after 7:55 for like 30-40 seconds and run the code it should work but it gave me some different styles and scrollbar which was not in the video.
@@vamshikrishnareddy76 let me also try
@@vamshikrishnareddy76 I replicated but still no changes 🙄
this is so cool!!!! What tips do have you if I wanted to add a description of each movie somewhere on the app?
Great video, just one suggestion, maybe it's better you slow down in some parts. But it's amazing what you have to share. Thank you :)
Thanks for watching and for the feedback! very much appreciated :)
Hi!I enjoyed your video 'React movie app tutorial' but can u make a video regarding how to make the same thing but without API please : )
Thanks for the idea!
Great tuto. tanks Chirs for share
Having trouble with the movie posters in a row next to each other. They are too far apart in my project
same problem
@@bewildfreak6727did any of you find a solution?
that really helpfull please make more video
Very good release, crack work, without problems
It's absolutely very interesting tutorial. It would be nice if you tell how to deploy it because the same movie search app is throwing error in my case.
Awesome sir
hi Chris im having a problem with this piece of css code
.movie-app > .row {
overflow-x: auto;
flex-wrap: nowrap;
}
it's not rendering
any idea whats going on
I had the same problem and for me the answer was this - in MovieList.js, inside the return statement, the outermost JSX elements should be not (because it is a React fragment) - when you look at Chris's MovieList.js in video just after we add this bit of CSS you can see what I mean. I had just missed this bit earlier in the video and set it up wrong, oops
Awesome!!! TQVM!!
Thanks for watching!
It would be nice to add error handling as well and also a function to remove favorite movie from localstorage to get updated list fav movies after refreshing the page, for a better UX
Thanks for a video!
he did include this it is at the end of the video 41:50
Amazing, thanks
Glad you liked it!
How to make more restrictions in inuput there? Because if i write something not regarding the name of movie application give me the next error ' Unhandled Rejection (TypeError): props.contries.map is not a function'! Chris can u help me to fix this error?
hey i love this video.
just one question:
right after you started displaying the movie posters they were side by side with no margins.
when i wrote the same code as you are theey were really far one from each other.
is there a solution for that?
thanks
Thanks for the great content! I
Thanks for watching!
@@ChrisBlakely Sure thing. I emailed you hello@jschris.com about an issue I am having 20 minutes into the video with updating state onchange. If you have a moment, can you look at my screen shots?
Would this also work if I wanted to create a film noir movie list app?
Please make a tutorial about using NODE JS
with React (Not class comp)
Yep its on the list - keep an eye on my channel :)
@@ChrisBlakely
Of course! I will 🙂
Hi Chris, what IDE you're using, Could you please share + some useful plugins
Vs code
bro in the sliding menu of movie there's too much gap in my movie posters I cant sort it out.
me too
did you managed to fix that since?
im about 15 minute through, following exactly as you have done but for some reason i'm getting this error, has anyone come up against this,
Warning: Each child in a list should have a unique "key" prop.
it then says
check the render method of 'MovieList'
add key={index} in main div of return method to prevent warning
Please is there a latest project you are working on?
Hey Chris, thanks for the great tutorial! Is there a way to display only one movie? Instead of all the movies that the api brings back?
I'm facing an issue while running this on VS Code. Could you please guide me step by step for running this project?
When i run 1st time this app it is not working it gives me error... because when u run 1st time in your browser it has no favourites movie in the local storage...so favourite component gives an error because map can't use on null or undefined...plz fix this
Hi Chris, I am a complete begginer and I know you said you don't remember this project so good, but I would love for some guidance. When adding the 'container-fluid movie-app'
The movies get sorted in a row- but there is a huge gap between them. Could it be due to bootstrap version? Or something else?
Thanks!
Hey, you’re right this is an old ass video and it’s probably a bit out of date. The bootstrap docs might have some examples on how to arrange things. Alternatively, if you ask ChatGPT it might be able to tell you how it’s done using latest bootstrap. Good luck !
Any tips? I’m a newbie learning
Hi Chris, why you did not use the bootstrap d-flex flex-nowrap inside the element tag, instead of using CSS?
Another question, why you did not use display:flex in css before using flex-wrap:nowrap?
Thanks
1) Didn't think of it at the time :)
2) Didn't need it - probably because the element was already a flexbox container. Can't exactly remember its been a while since I coded this lol
why the application is not showing anything !? is it perhaps the javascript files are not loaded correctly !?
superb !
Thank you so much for watching 🙌
@@ChrisBlakely next time expecting something with react routes
but we can add same into favourites again and again, it must be added only once. What can I do to not add to favourites if it's already added. Thank you
Im hitting a completely different problem with Bootstrap 5...struggling to get it to work (new to bootstrap)
how can i run on mobile apps?thx
The project is working fine in local host but when i deployed it using vercel or netlify the api is not working , when i am searching any movie it is not showing any movie, can anyone tell me what is the problem?
Sir I'm facing one issue during making that movie app.....when i put all the images in a single row then there will be a gap between two images...So how can i remove that gap
sir plzz help me out on this issue.......
.row * {
width: auto;
}
@@aravindlingala6474 I know it's been a year since you wrote this but THANK YOU
what do you do if you want to display the favorite movies on a separate page
I am not able to add a scroll effect. I have written the same code but it's still not working. Some are saying it is because of the version of the bootstrap. Can Someone please help me with this.
Nice tutorial! Why don't use one movie List and check by attribute if this movie is favourite? I want to know because you used two lists separately.
When you do a search the list gets updated and you would lose the attribute that was added. You would have to merge the next search list with your current search list, filtering out any duplicates. And it’s not performant
In a ‘real app’ you would Save the favourite IDS on the server , the server would then go and get all the movies and return that list in an api
But that’s too much for this simple react tutorial 😀
Great video ! Thanks !
Don't skip steps pls ^^ like cleaning the app.js file after its creation
very nice
PLEASE HELP !!!!!!!
I am getting this warning with compiling "autoprefixer: Replace color-adjust to print-color-adjust. The color-adjust shorthand is currently deprecated.
webpack compiled with 1 warning"
Whenever I install bootstrap and add in the bootstrap class names, it doesn't work, and the posters still display vertically rather than scrolling horizontally. Does anyone know why?
Check the boostrap grid documentation. It has been changed since then.
Code for it to work also adding "col": function MovieList(props) {
return (
{props.movies.map((movie, index) => {
return (
)
})}
)
}
Hey Chris ! My all movie Poster is not showing . Can anyone tell me how can i fix it?
I would love some help. I did this tutorial and for some reason reason all my movies are really far apart... I have want through my CSS and don't understand what i did wrong...
Hello @Katherine Scott you will be having the latest version of bootstrap (may be >5), so just follow the command "npm i bootstrap@4.5.3" and it will work well. I was facing the same issue and it worked for me
do you have overflow: hidden? I can't get it out and scrolling with the mouse
I can't remember the CSS off hand, but I think you're right yes. Shouldn't be too much work to add a scroll bar to the row
but.. what if I click on movie twice? It will be add twice to the favourites??
how to handle null for MoviesList.js
ERROR: TypeError: Cannot read property 'map' of null
see fix : github.com/chrisblakely01/react-movie-app/commit/14874dc2459caf7ead403e0048e8e2cd61d9d4f5
@@ChrisBlakely thanks Chris for the solution and the app..It worked!
Sir , solutions didn't work
Can you please let me know how the hell when you put overflow auto the scroll bars doesnt show up ? but you can still scroll to the side PLEAAASE LET ME KNOW
if you look at the finished source code on GitHub you can see how its done. I also show it in the video
@@ChrisBlakely thanks for your answer but on full screen (desktop) it shows the ugly chrome scroll bar... but when choose like mobile device on chrome it shows nicely like yours
Maybe it’s the browser/OS dude, they all have they’re own way of handling scrolling
Does it play the movie if you click on the poster?
Hi Chris, when you added Toy Story in favourites, and refresh the page, the movies disappear which is fine.
But if you research Toy story (which is now in favourite), will toy story button be diabled because we already clicked on it or it is a brand new Toy story to add ?
Hey Aata,
With the current setup, we are just taking a "copy" of the movie object that comes back from the search response and saving it ourselves.
In a perfect world, the API would let us have an "isFavourited" property or something in the response for a given movie, which would help us identify if the movie is a favourite or not.
Since we do not have control over the API, your only option is:
- When rendering the list of movies that comes back from the search, check if the movie exists in the favourites
- is YES, then disable the button, don't render it etc
- if NO, go ahead and render the movie as usual
Hope this helps!
@@ChrisBlakely Okay great thank you.
@@ChrisBlakely How to check whether a movie is already present in the favourites or not...please help me with code snippet or exact idea!
@@ChrisBlakely This is exactly the problem I'm facing right now. Instead of favorites, I'm actually giving each movie a rating, so that means that when dowloading the results, I need to check if the movie's been rated (based on the movie's ID and rating value that I stored in an array) and what that rating was, so I can render it along with the results. Right?
well yeah if you wanna do it primarily
Wait... Can i a guide on the postman tho
thank u so much
bhai project barabar chal rha hai kya
i installed bootstrap but there css classes are not working, what should i do??
did you import the bootstrap stylesheet into your app? Its not enough to just install bootstrap
@@ChrisBlakely Yes I did but still it didn't work.
nonIterableSpread.js:2 Uncaught TypeError: Invalid attempt to spread non-iterable instance.
In order to be iterable, non-array objects must have a [Symbol.iterator]() method.
i am getting this error when adding to favorites ..code is exact
Looks like you're trying to spread something thats not an object/array. Can't help anymore unfortunately without seeing the code!
after using your github code. the project is not working. please help
hi chris, i have a problem, when i tried to start the proyect, i have an error, i run the npm start command for that
npm ERR! code ENOENT
npm ERR! syscall open
npm ERR! path C:\Users\Juanma\Desktop\AppMoviless\package.json
npm ERR! errno -4058
npm ERR! enoent ENOENT: no such file or directory, open 'C:\Users\Juanma\Desktop\AppMoviless\package.json'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent
u can help me ? thank you!!
you mightt need to do npm install first. And make sure you are in the root directory of the project :)
Can the movies be played?
hi i am facing problem is setting up react on my laptop using node can anyone give me an alternate way of doing it?
what error or problem you are facing?
@@paraschauhan9978 hi i fixed the problem now by updating Node thanks for the replay btw
There is an error at the end if we have no favorites added to the localstorage when it is passed to the MovieList component
I am getting the same error. MovieList gives the null ref error when movie list is null
Ah! yeah, probs just want to check if there are any movies stored in localstorage before setting it into state. Check this fix:
github.com/chrisblakely01/react-movie-app/commit/14874dc2459caf7ead403e0048e8e2cd61d9d4f5
@@ChrisBlakely I had understand the problem but I didn't know how to resolve it without you.
Thanks
It is only a simple if 😪
Can anyone send me the endpoint link ? the email thing does not work
how to import bootstrap? Mine is not working
When I host the website on netlify and trying to search the movie the error displaying as "failed to fetch " any solutions
I am facing same problem after deploying on netlify when I search the movie I get error failed to fetch error 401
@@Zenx_shoaib while pasting the api url in the code make sure it is 'https' not just 'http' it will solve the issue
can i watch movie with that?
Why you used api from the site? Wasn't there any way of doing same thing ?
sure:
- Create your own server
- Create a database (w/ relational tables)
- Fill the database with 1000's of movie record details - movie details, images, meta data etc
- Expose an API (including searching)
But I wasn't about to do that for this tutorial :)
@@ChrisBlakely ok. Thanks for replying man. Great tutorial btw.🤗👏🤝
No problem ! Thanks for watching and I’m glad it was helpful !
I get like this when i click the API link:{"Response":"False","Error":"Invalid API key!"}
What to do?
Have you verified your email? If so you might have to try getting another key
@@ChrisBlakely Okay!! Thank you
My bootstrap is not working. Could you please help ?
Code for it to work also adding "col": function MovieList(props) {
return (
{props.movies.map((movie, index) => {
return (
)
})}
)
}
Is this responsive for mobile??
How to prevent from adding same movie 2 times to favourites?
Hey Gary,
Would have to look at the code again to familiarise myself but the basic idea would be:
in the addFavouriteMovie(or whatever I've called it) function, you want to check the movie you're about to add doesn't exist in the favourite list before you run the code to add it.
If I remember correctly each movie has an imdbId (or some identifier), so you could use this to check if a movie exists in the favourites array, using the filter() array method or something similar. If it doesn't exist, add it by running the existing code. Else, do nothing
Hopefully this helps!
sick of it!! !!!! anybody got any tips to help?? close on throwing my laptop out the window! got the Full package on soft feel its a waste of