React Movie App Tutorial

[@Abogida11]

Its quite a nice Tutorial, easy, simple and I Learn a lot, Now time to redoing it without watching the video

[@RachidaBNYC]

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 💪👏

[@ChrisBlakely]

Awesome, thanks for watching and good luck with your journey into front-end development!

[@zerqPROSPIELER]

Did you made it?

[@rashenfernando539]

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. ❤‍🔥

[@ChrisBlakely]

Glad it was helpful!

[@altravels7426]

great vid, as a beginner in react this answered so many of my questions. keep it up

[@leobardopineda102]

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

[@ulviazizli5480]

hi, are you able to code now?

[@kacperkurek1947]

Hello Chris! Thanks for your tutorials, you are doing a great job, keep it up, I know your yt channel will be huge someday.

[@ChrisBlakely]

Thanks for the kind words and for the support 🙌

[@shakirasalazar6872]

I needed this, thank you for explaining so well!

[@ChrisBlakely]

Thanks for watching ! 😃

[@kirilltrubin4847]

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!

[@vamshikrishnareddy76]

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]

Hi Vamshi, Same is the case for me. Did you get the solution ?

[@vamshikrishnareddy76]

@@lakshna2410 instead of using bootstrap i just used css

[@vamshikrishnareddy76]

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

[@lakshna2410]

@@vamshikrishnareddy76 let me also try

[@lakshna2410]

@@vamshikrishnareddy76 I replicated but still no changes 🙄

[@dariusandone3636]

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.

[@ChrisBlakely]

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)

[@renangaldino6538]

Thankyou bro You are the best, please keep up the good job

[@MightyKingKala]

Thank you bro! I really like your content. Keep it up !

[@mahesh2me]

Waiting for the next video! please upload one more video like shopping cart kind of application... Thanks!!!

[@myytkn8526]

Great Chris!

[@dineshshinde4691]

Thanks sir, i learnt a lot of things from this project 🙏

[@masfooks35]

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.

[@nwakakizito4572]

Nice 😎 600th Subscriber ✌️

[@sylvesterjengwa7941]

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

[@jld41]

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

[@kristianwilley7289]

Having trouble with the movie posters in a row next to each other. They are too far apart in my project

[@bewildfreak6727]

same problem

[@saltycraig1865]

@@bewildfreak6727did any of you find a solution?

[@dankorse]

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

[@mazwrld]

this is so cool!!!! What tips do have you if I wanted to add a description of each movie somewhere on the app?

[@rishilahoti]

bro in the sliding menu of movie there's too much gap in my movie posters I cant sort it out.

[@orytzhakian9326]

me too did you managed to fix that since?

[@atefbenbelgacem402]

why the application is not showing anything !? is it perhaps the javascript files are not loaded correctly !?

[@sonalkhapre5716]

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.

[@PavanSibal]

Great tutorial!! Please do a tutorial which includes routing/ multi page application? Thanks in advance

[@khushisuri4954]

Amazing project thankyou so much for this

[@abhaykamath2988]

This was awesome 👏🏻 Thank you

[@ilhamsamudra1281]

how can i run on mobile apps?thx

[@MelodyMastiIndia]

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

[@wintanmi]

hy Chris, thanks for this tutorial, very helpful, though the pace was something. great job

[@adityagangurde2511]

I'm facing an issue while running this on VS Code. Could you please guide me step by step for running this project?

[@danilsviridenko6565]

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?

[@biswajitadhikary_0807]

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?

[@r0ck3th76]

Thanks alot just what i was searching

[@ChrisBlakely]

You're welcome 😊

[@chafikthewarrior]

You are the best bro! Please a tutorial about NodeJS Web Scraping would be awesome!

[@prajwalkv1175]

use puppeteer

[@chafikthewarrior]

@@prajwalkv1175 yeah I started with python much easier but thank you bro!

[@carlosl-f2433]

Im hitting a completely different problem with Bootstrap 5...struggling to get it to work (new to bootstrap)

[@muskanmittal9158]

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

[@muskanmittal9158]

sir plzz help me out on this issue.......

[@aravindlingala6474]

.row * { width: auto; }

[@veronikaturner3406]

@@aravindlingala6474 I know it's been a year since you wrote this but THANK YOU

[@orytzhakian9326]

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

[@samfallowfield3000]

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'

[@masfooks35]

add key={index} in main div of return method to prevent warning

[@attinderpalsingh5745]

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

[@TheLoOPerMAN]

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!

[@ChrisBlakely]

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 !

[@Cocolo_TV]

Would this also work if I wanted to create a film noir movie list app?

[@dktran7799]

Hi Chris, what IDE you're using, Could you please share + some useful plugins

[@LINQI]

Vs code

[@luisdomingues3469]

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 :)

[@ChrisBlakely]

Thanks for watching and for the feedback! very much appreciated :)

[@tamjidhossain64]

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?

[@tomasburian6550]

Check the boostrap grid documentation. It has been changed since then.

[@je2587]

Code for it to work also adding "col": function MovieList(props) { return ( {props.movies.map((movie, index) => { return ( ) })} ) }

[@shauryathakur8802]

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.

[@sergiob3698]

Nice tutorial. Very useful. Thank you

[@ChrisBlakely]

Thank you for watching as always Sergio!

[@ismoil5750]

good content for beginners I liked it bro!!

[@ChrisBlakely]

Thanks for watching ! I appreciate the comment 😄

[@dsb5417]

what do you do if you want to display the favorite movies on a separate page

[@Street_Food_Adventuress]

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

[@ChrisBlakely]

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

[@deepanshuujjainia9805]

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"

[@WillSmith-qt7me]

Great tut, thanks!

[@Ashwini243]

how to handle null for MoviesList.js ERROR: TypeError: Cannot read property 'map' of null

[@ChrisBlakely]

see fix : github.com/chrisblakely01/react-movie-app/commit/14874dc2459caf7ead403e0048e8e2cd61d9d4f5

[@Ashwini243]

@@ChrisBlakely thanks Chris for the solution and the app..It worked!

[@MonikaSingh-ee6yv]

Sir , solutions didn't work

[@danilsviridenko6565]

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 : )

[@ChrisBlakely]

Thanks for the idea!

[@whicencer8819]

but.. what if I click on movie twice? It will be add twice to the favourites??

[@sohamsarde]

after using your github code. the project is not working. please help

[@woofcode3383]

this is great! thanks so much

[@sixteenthnotephotography1454]

Any tips? I’m a newbie learning

[@sportshome6504]

Please is there a latest project you are working on?

[@saurabhrana8040]

Hey Chris ! My all movie Poster is not showing . Can anyone tell me how can i fix it?

[@williamgehrke8025]

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?

[@animeshjain634]

i installed bootstrap but there css classes are not working, what should i do??

[@ChrisBlakely]

did you import the bootstrap stylesheet into your app? Its not enough to just install bootstrap

[@animeshjain634]

@@ChrisBlakely Yes I did but still it didn't work.

[@digigoliath]

Awesome!!! TQVM!!

[@ChrisBlakely]

Thanks for watching!

[@michealboluwatife7195]

Thank you Chris the tutorial is overwhelming

[@katherinescott3360]

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

[@mithiljogi05]

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

[@rockrock2587]

Please make a tutorial about using NODE JS with React (Not class comp)

[@ChrisBlakely]

Yep its on the list - keep an eye on my channel :)

[@rockrock2587]

@@ChrisBlakely Of course! I will 🙂

[@jumbo999614]

Does it play the movie if you click on the poster?

[@GhostRiderX7]

Can the movies be played?

[@dewanshanand1395]

how to import bootstrap? Mine is not working

[@mounisri9797]

Awesome sir

[@emanueltejadacoste2250]

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]

if you look at the finished source code on GitHub you can see how its done. I also show it in the video

[@emanueltejadacoste2250]

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

[@ChrisBlakely]

Maybe it’s the browser/OS dude, they all have they’re own way of handling scrolling

[@trantin2570]

Very good release, crack work, without problems

[@axeldrax007]

Great tuto. tanks Chirs for share

[@sonavijapure]

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

[@ChrisBlakely]

Looks like you're trying to spread something thats not an object/array. Can't help anymore unfortunately without seeing the code!

[@rosarioscarlata4178]

do you have overflow: hidden? I can't get it out and scrolling with the mouse

[@ChrisBlakely]

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

[@georgesword2012]

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!

[@J-mk1cg]

he did include this it is at the end of the video 41:50

[@seemaprasad2915]

that really helpfull please make more video

[@feriduncanselen9047]

Can anyone send me the endpoint link ? the email thing does not work

[@kauanmocelin]

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.

[@ChrisBlakely]

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 😀

[@SaiKumar-ru8wb]

When I host the website on netlify and trying to search the movie the error displaying as "failed to fetch " any solutions

[@Zenx_shoaib]

I am facing same problem after deploying on netlify when I search the movie I get error failed to fetch error 401

[@SaiKumar-ru8wb]

@@Zenx_shoaib while pasting the api url in the code make sure it is 'https' not just 'http' it will solve the issue

[@tonybengue]

There is an error at the end if we have no favorites added to the localstorage when it is passed to the MovieList component

[@Ashwini243]

I am getting the same error. MovieList gives the null ref error when movie list is null

[@ChrisBlakely]

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

[@tonybengue]

@@ChrisBlakely I had understand the problem but I didn't know how to resolve it without you. Thanks

[@tonybengue]

It is only a simple if 😪

[@lakshna2410]

My bootstrap is not working. Could you please help ?

[@je2587]

Code for it to work also adding "col": function MovieList(props) { return ( {props.movies.map((movie, index) => { return ( ) })} ) }

[@codeaway9742]

I get like this when i click the API link:{"Response":"False","Error":"Invalid API key!"} What to do?

[@ChrisBlakely]

Have you verified your email? If so you might have to try getting another key

[@codeaway9742]

@@ChrisBlakely Okay!! Thank you

[@azuboof]

Wait... Can i a guide on the postman tho

[@carljay2177]

can i watch movie with that?

[@rosarioscarlata4178]

Amazing, thanks

[@ChrisBlakely]

Glad you liked it!

[@piyushsingh6318]

Why you used api from the site? Wasn't there any way of doing same thing ?

[@ChrisBlakely]

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 :)

[@piyushsingh6318]

@@ChrisBlakely ok. Thanks for replying man. Great tutorial btw.🤗👏🤝

[@ChrisBlakely]

No problem ! Thanks for watching and I’m glad it was helpful !

[@Street_Food_Adventuress]

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 ?

[@ChrisBlakely]

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!

[@Street_Food_Adventuress]

@@ChrisBlakely Okay great thank you.

[@santhoshsudhaan7957]

@@ChrisBlakely How to check whether a movie is already present in the favourites or not...please help me with code snippet or exact idea!

[@tomasburian6550]

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

[@abhinagarkoti8681]

Is this responsive for mobile??

[@siddharthjames7096]

hi i am facing problem is setting up react on my laptop using node can anyone give me an alternate way of doing it?

[@paraschauhan9978]

what error or problem you are facing?

[@siddharthjames7096]

@@paraschauhan9978 hi i fixed the problem now by updating Node thanks for the replay btw

[@juanmaluzzi5423]

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

[@ChrisBlakely]

you mightt need to do npm install first. And make sure you are in the root directory of the project :)

[@garysanderson3250]

How to prevent from adding same movie 2 times to favourites?

[@ChrisBlakely]

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!

[@prithabanerjee4705]

superb !

[@ChrisBlakely]

Thank you so much for watching 🙌

[@prithabanerjee4705]

@@ChrisBlakely next time expecting something with react routes

[@kfc7968]

Thanks for the great content! I

[@ChrisBlakely]

Thanks for watching!

[@kfc7968]

@@ChrisBlakely Sure thing. I emailed you [e-mail] 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?

[@AyollarKiyimlari]

respect 💣💣💣💣💣💣💣💣

[@qcmira2024]

Great video ! Thanks !

[@ezequielbento9866]

well yeah if you wanna do it primarily

[@ImamNurArifinHA]

very nice

[@ishwarshelke128]

thank u so much

[@sohamsarde]

bhai project barabar chal rha hai kya

[@mintumanoj913]

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