Quick Lecture Overview
Subscribing gives you access to a brief, insightful summary of each lecture to stay on track.
About the Project
Loading...
By logging in, you'll unlock full access to this and other free tutorials on JSM Pro.
Why? Logging in lets us personalize your learning experience, track your progress, and keep you in the loop with new workshops, coding tips, and platform updates.
You'll also be the first to know about upcoming launches, events, and exclusive discounts.
No spam—just helpful content to level up your skills.
If that sounds fair, go ahead and log in to continue →
Enter your name and email to get instant access
##Looks like we found a thief monkey By the way, I liked the trick how you reached till here. You have a good sense of humor. You will improve a lot if you join our course with this passion.
var (function-scoped, outdated)let (block-scoped, modern and recommended)const (block-scoped, cannot be reassigned)_, or $let let = 5; is invalid)myVar and myvar are different)string, number, boolean, null, undefined, bigint, symbolObjects, Arrays, FunctionsSubscribing gives you access to a brief, insightful summary of each lecture to stay on track.
00:00:00 This is a single-page application where you can view all movies from an external API with pagination.
00:00:06 Plus, there's a search feature that lets you find any movie you're interested in.
00:00:11 But here's the cool part.
00:00:13 We'll simulate Netflix's top trending list.
00:00:16 Unlike the movies pulled from the API, these rankings are based on actual user searches within the app.
00:00:24 The more users search for a particular movie, the higher its count grows, and the more likely it is to show up as the top searched movie.
00:00:33 We are actually building a small algorithm here.
00:00:36 We'll do it using AppRide.
00:00:38 So, if you haven't yet signed up, now's the time to do so.
00:00:41 Just click the link in the description.
00:00:43 And of course, this app is fully responsive across all devices.
00:00:48 The main goal of this course is to teach you all the most important React.js concepts so you can implement them within your code,
00:00:55 within this project, and all of your future projects.
00:00:59 Alongside building the app, I'll also teach you how to deploy it to the internet so that everyone can see what you've done.
00:01:05 See, the app you'll build today isn't just a project.
00:01:09 It's a career asset designed to showcase everything you're capable of, making you an attractive candidate for any job.
00:01:17 I highly recommend Hostinger, so I'll put a link down in the description.
00:01:21 I'll go with the premium plan as it allows me to host a hundred websites with free SSL for HTTPS security, free email for that professional touch,
00:01:32 and even a free domain name to give your website a good name.
00:01:35 And because I've partnered with Hostinger, you'll get an even bigger discount.
00:01:39 Click the special link in the description, click Claim Deal, and add to cart.
00:01:44 Choose the period of our hosting.
00:01:46 I'll choose 48 months to save the most.
00:01:48 And then, next to your payment method, you can enter your JavaScript Mastery coupon code, which will give you the biggest discount available.
00:01:55 Once you've purchased, we are ready to set everything up.
00:01:58 Let's start with Hostinger's guided setup.
00:02:00 In this case, we'll create a new website.
00:02:03 And we won't use WordPress.
00:02:04 We want to have an empty HTML website, which of course will turn into a React website.
00:02:09 As you can see, I use Hostinger for all of my domain names.
00:02:13 So if you want to choose your domain name right now, you can do that.
00:02:16 But if you want to do it at the end, you can click Use temporary domain.
00:02:20 You can choose the server that is closest to you.
00:02:23 And that's it.
00:02:23 Our setup is being initialized.
00:02:25 While our hosting is setting up, I just want to quickly let you know that there's a GitHub repo containing the entire code for this project.
00:02:32 So if you ever get stuck, just make sure to visit the GitHub page and compare your code with the code that's on there.
00:02:38 There's also a free complete Figma design for this project in case you want to develop it on your own.
00:02:43 And let's not forget the extra lessons and pro courses on jsmastery.pro.
00:02:48 With that in mind, our hosting has been set up and at the end of the course, we'll simply change our domain to a real one and then deploy it using the
00:02:56 file manager.
00:02:57 With that said, let's dive straight into the code.