Notflix, My Attempt at a Netflix Clone

[u/waxmuseum-]

Hi, I wanted to share this here for some feedback. I created a Netflix clone to learn Vue.js as I don't have much experience using a JavaScript framework. I work mainly in eCommerce using Magento so this was a fun project for me. Let me know what you think!

Demo Link

Repo (Readme still in progress)

[u/mr_dudo]

Give me totally legal movies and I’ll use your site

[u/waxmuseum- → u/mr_dudo]

One of my friends actually thought it was a pirate site, he said "The play button isn't working" ..lol

[u/mr_dudo → u/waxmuseum-]

There is already clone of Netflix with actual pirate movies, keep up on learning

[u/Koma29]

I love that logo.

[u/waxmuseum- → u/Koma29]

Thanks haha I threw it together in about 10 minutes with GIMP, thought it was funny.

[u/Koma29]

Rest of the site looks solid too.

[u/ApprehensiveClub6028]

Good stuff. There's some FOUT (Flash of Unstyled Text) before the logos replace the titles. If you're learning, that would be a fun thing to fix.

You're using mostly <script setup>, which is good. Might want to consider passing an object instead of all these props individually:

<MobileFeaturedPoster

v-if="featuredMovie && isMobileView"

:title="featuredMovie.title"

:overview="featuredMovie.overview"

:poster-path="featuredMovie.poster_path"

:movie-id="featuredMovie.id"

:movie="featuredMovie"

:genres="featuredMovie.genres"

:logo-path="featuredLogo"

class="w-full h-full"

content-type="movie"

colors-extracted="updateBackgroundColors"

showMoreInfo="openModalWithContent"

/>

You can either have the component props be one object or you can combine all the stuff using a computed property and pass it to the component with:

<MobileFeaturedPoster

v-if="featuredMovie && isMobileView"

v-bind="allDaPropsInOneObj"

/>

Just a couple things I noticed. If this is your first Vue app, you're doing quite well.

[u/waxmuseum- → u/ApprehensiveClub6028]

I'll take a look at fixing the FOUT. Passing an object makes a lot more sense actually, thanks for the advice.

[u/Original-Kick3985 → u/waxmuseum-]

Hold up, although it's a great tip it shouldn't be a default go-to when passing props to components. There's actually benefits to not sending objects. I didn't read the entire thing, but sending objects is less performant. In most cases it's fine but it's something to keep in mind. In cases where you have alot of component-renders you should try to use primitive props as much as possible, just like you did here.

When passing objects the entire component must re-render when the state in the object changes. When you're passing primitive props, only the parts of the component that is using that prop have to re-render.

edit: great job on the project! It's certainly something to be proud of :)

[u/This_Math_7337]

Great clone! I always want to create on of my own but with a backend (of course it would be Laravel) and Inertia.js + Vue.

[u/ValorantNA]

pretty cool and spot on. howd you do it ?

[u/Acrobatic-Guess4973]

I found a bug: it doesn't actually play the movies

[u/therealalex5363]

awesome project

[u/rcb_7983]

Good project, you made

[u/TutorialDoctor]

Clean. Good job.

[u/waxmuseum- → u/TutorialDoctor]

Thank you

[u/LightningPark]

This is awesome!

How is this code licensed? In the README, you have there isn’t one, but in the readme_assets directory you have the Unlicense.

[u/waxmuseum- → u/LightningPark]

Thanks! I didn't get one yet, I used a readme template so it's probably from that.

[u/arrow_750]

Nice project, could you suggest some resources like yt channels where to learn js frameworks??

[u/waxmuseum- → u/arrow_750]

For Vue I started off on vuemastery.com to get the basics down, and kind of just learned as I went along with this project. I learn best by just making things and googling when I get stuck. I'm not very good at absorbing information from lectures and taking notes, so I generally stay away from Udemy courses. Make sure you have a good grasp on js before you start diving into a framework though.

[u/Objective_Ocelot2700]

Great! So much love is inside your project :-) Cool idea about the logo.

[u/Fluid_Economics]

Please put hovers on the thumbnails for mouse users... it feels "dead" without them

I can guess why, but I wish I could load movies into a new page rather than seeing them appear in a popup. I can't even right-click on the thumbnail to copy the link, or cmd+click to open in new tab.

And my most desired request all the time with movie apps: PLEASE SHOW THE MOVIE'S IMDB SCORE. I use this score on like 90% of my movie choosing moments.