I Rebuilt NETFLIX in 60 Minutes With AI (And Made it Better)

6.64k views1953 WordsCopy TextShare
WeAreNoCode
❇️ FREE COURSE - Get Access Now: https://bit.ly/4aBjbaU 🚀 NO-CODE COACHING PROGRAM - https://bit.ly...
Video Transcript:
Netflix is the biggest streaming platform on the planet but did you know that there are things that people universally hate about it so today with the help of this insane AI coding platform I'll be completely rebuilding it from the ground up and fixing these issues once and for all suck at Netflix but before I start building and showing Netflix how it's really done we need to figure out what people hate about our favorite streaming platform so step one Let's Ask Google it has a new AI so it should be able to find some interesting comments
online prioritizing quality over quantity it's content they have thrown everything against the wall and hope it sticks I love that while Netflix has a massive selection I'm not interested in 99% of it okay so potentially showcasing content that people are actually interested in just about everything to do with the user interface okay so it seems like finding the content and the user interface might be able to be improved a bit the infinite scroll means you waste time scrolling up and down I totally agree okay here's a second feature a better rating system for me the
value of 1 out of 10 stars is long over okay and here's a whole article talking about all the hate around autoplay of the trailers they literally created a setting so you can turned them off and here's a onear review that's just called Cleopatra was never black what warning my friends the internet is a toxic place but we've now decided to go with a better rating system killing that endless scroll and prioritizing content you actually care about and finally murdering that autoplay for the trailers so now that we know what we want to build let
me introduce you to the most advanced AI coding platform the name of the platform is Bolt it has very recently been released and I've been playing around with it and I must say I'm quite impressed so let's jump in please build an app like Netflix using nextjs so what this is actually going to do is it's going to create an open a code editor it's going to start coding as you can see but more importantly it's going to start off with creating a page structure you see it's building out this entire thing from just one
prompt so we're going to see the result here and then we're going to use that as a starting point now just to be clear this is still in early phases so we'll probably hit some bugs completely normal but boom just like that I'm able to see that it has already generated a pretty impressive first version of this app and we can see that is trending now we see new releases this already looks really good so the next thing I'm going to do is come back here and start adapting it so the first thing I'm going
to do is to make sure that here for each one of the cards please include the title of the movie the duration and and the overall rating out of five and now it has applied these changes I'm going to come down and we're going to see there you go you can see there's a star system here already which is really cool it seems like the overlay seems to not cover the entire card there was an error processing your request totally fine this happens sometimes we're going to go ahead and click let's go again there you
go now the card is fully covered so we fixed this problem the first thing I noticed is that the first first problem we're trying to solve is relevant content right oh great there's so many cool things so I think this could still be like a feature of like recommended movies at the top so I think that it would be cool if this was kind of a sliding card could we have the hero section be a sliding card so even though we want things that are quite relevant to what we're looking for it's also nice to
kind of have a couple of cool options that have just come out now we're talking check it out boom The Matrix so that works pretty well I like the idea Interstellar now one thing I noticed is the Netflix uh logo at the top could you please align the logo boom and it just realigned it right here so this is perfect now it's aligned here with trending it's exactly what I was looking for now the cool thing here is that it already doesn't have endless scroll right and there are really three sections that I usually care
about when it comes to Netflix I don't know about you but the first one is continue watching so this is exactly what I'm looking for then I would say that the second one is probably uh recommended for you and then the third one could be trending so now I'm actually seeing the things that I want to see inside of this I'm going to continue playing around a little bit to make it kind of perfect I want to make these cards a little bigger I want to make potentially even a search field so it's easier to
find things that I'm looking for excellent I'm glad that this broke here so basically if anything breaks what you want to do is you want to either fix the problem in the chat or you can grab this message and just put it inside and just say fix this issue and has actually embedded an element which is the uh Carousel autoplay so basically so it can scroll through I just thought that might look nice boom let's go so now that we've created this homepage and I think it looks pretty good here I'll probably continue fine-tuning it
but now I want to create detail pages so these detail pages are going to live underneath this and once you click on it it should be able to bring you to one of these detail pages so let's go ahead and do that we have a Details page we can thumbs up it thumbs up doesn't work the share doesn't work play doesn't work work yet perfect but we have a Details page so now let's ask it to improve this Details page so now make sure that these detail Pages include a full description of the movie the
option to watch the trailer and advanced reviews I'm going to put I would like five ratings with the most common rating criteria as found on Rotten Tomatoes I want to see if it's going to understand this it would be quite impressive if it did and I won't you with all this I'm actually just going to continue building it out I'm going to show you the finished product okay so I've adapted this to my likings I've now added the star system and now I want to actually create an admin panel where I can add movies so
that people can actually view them before that let's check out what I built so here we are my friends as you can see here this is the homepage and it's switching between the Cards automatically then we have uh continue watching now the cool thing about these cards is that basically you have the overall star system and some information about them but you also have here how much you've watched right of the movie we also have the recommended one and we have the trending one no more endless scrolling this is it you can scroll to the
right now for each one of these Pages we also have detail pages so if I go to The Dark Knight for example and click on this and we're going to see all the information about The Dark Knight you can rate it you can share it um you can play it obviously um you also have what we said Advanced ratings so basically overall acting visual R Story soundtrack and reviews for each one as well this is already super cool but I want to create another panel that's an admin panel that's going to allow me actually as
the owner of Netflix clone to upload new movies when I own them and to be able to feature them so I'm going to go ahead and create a section around that let's do it so check it out what it added here is a little plus button for me to just add it I would only see this as an admin now here I see that there's a little issue with this so I'm going to fix it but basically you could add all of the different things that we mentioned so let me go ahead and click out
of this and I'm going to ask it to improve that boom add a new movie Christian movie the real movie the best movie on the planet and then I can go ahead and add the movie so this has done exactly what I was looking for here okay so we've now created a better navigation we've also added Advanced feature for the review system and we don't have autoplay in this version which is awesome but one of the most difficult parts of actually launching an app is to get it live to deploy it what that means is
we want to connect it to all the different things right the server we want to basically have it live on a URL at the end of the deployment but this is the most frustrating part for any development team but let me show you how you can deploy in just a couple of minutes without any technical skills required on the top right here we have a button that's called deploy and when we click on deploy it's going to deploy the full application as you may guess now this is actually pushing it from a test environment to
a live environment so it can live on the URL it has failed building the project excellent let's go ahead and figure out why it failed okay it's saying that these random movies that I asked it to grab uh might not be able to Showcase in the live version so we would actually potentially need to have actual data so add a bunch of these uh movies and series to the website and then we'll be able to launch but I'm asking it to simply just fix it fix this issue let's launch anyway let's go and just like
that after a little bit of De bugging as we can see here we have the website Ooh La La go ahead and click on any one of these as well and we're going to be able to see the full details again these are placeholders uh that we would have to actually fill out if we wanted them to appear with the titles and the actual movies that we have so there you go you're welcome Netflix by the way if you want to sign me for a series of building startups with AI and no code just hit
me up for the rest of you if you're looking for the easiest way to build an app without coding no code tool tools are a great option you can check out this video where I break the entire process down subscribe for more fun thanks for watching and my friends let's go
Copyright © 2024. Made with ♥ in London by YTScribe.com