DEV Community

loading...
Cover image for Netflix Clone Using React and TMDb

Netflix Clone Using React and TMDb

Thomas Gilmore
Front End Developer HTML | CSS | JavaScript | React | Node.js | AWS
Updated on ・1 min read

I created a Netflix Clone using React and The Movie Database (TMDb).

The Movie Database API was used to fetch the movie images and posters to populate the Netflix Clone. So the images of the movies will change from time to time when viewing the link based off of what is returned from fetching the api.

LINK: https://gilmore-netflix-clone.netlify.app/

Netflix Clone Version 2

I'm going to make a version 2 of the Netflix Clone to update on how I make the API calls and also add lazy loading. These look like they are the reasons on why it takes so long to load. The current version uses chained ajax calls. I'm planning on using axios in version 2 and hopefully that will help the page load faster.

If you have any other suggestions that you think I should make to the Netflix Clone please let me know.

Netflix Clone Version 2

Discussion (10)

Collapse
hasnaindev profile image
Muhammad Hasnain • Edited

Okay, so chrome downloaded total 40 MBs of files. For some reason, the chrome also was downloading images one by one instead of making simultaneous connections and download several images at once.

Which is strange? Is it the API or is there something in your code that was blocking simultaneous requests? The site also took 120 seconds to load which is a lot!

I also am not the type of guy who simply throws in optimization advices to beginners but you seem like an experienced developer. Also check google pagespeed insights which makes the complaints that I made.

The design looks dope but this still requires a lot of work! Thanks for sharing this.

Collapse
lukeshiru profile image
LUKESHIRU • Edited

There is a new tool by Google that is similar to PageSpeed insights but it gives you a little more information: Web.dev Measure. Is basically Lighthouse in the cloud :D

Collapse
hasnaindev profile image
Muhammad Hasnain

Ooh. Had no idea. Thanks for sharing!

Collapse
thomasgilmore profile image
Thomas Gilmore Author

Thank you for the feedback I will work on making the page faster and I will also edit the post above.

Collapse
hasnaindev profile image
Muhammad Hasnain

Sure. Would love to see an update.

Collapse
lukeshiru profile image
LUKESHIRU

Can we get more details about the initial setup, process of development, the time it took, the tools you used, the ideas you had, the reason behind loading every image after the other instead of doing it in parallel, and so on? Mainly to be more in line with the Content Policy of dev.to and have something more substantial than:

Look at what I did using TMDb: [link]

Cheers!

Collapse
hyggedev profile image
Chris Hansen

Looks awesome. Instantly know it's a Netflix remake. I am getting some sort of bug however. Could be my phone, idk. I get denied scrolling. Trying to scroll, and nothing happens unless I shift my finger to another point on the screen. Great job, and thanks for sharing ✌️

Collapse
devtalhaakbar profile image
Muhammad Talha Akbar

I would strongly recommend lazy loading the images :) But, good work. Hope you learnt something new :)

Collapse
thomasgilmore profile image
Thomas Gilmore Author

Thank you for the recommendation.

Collapse
ats1999 profile image
Rahul kumar

Loading very slow without any traffic?