00:00:02 To get started developing your app, we'll use Next.js, the React framework for the web used by some of the world's largest companies.

00:00:11 So just head over to Next.js and click get started.

00:00:15 Head over to installation and copy the installation command.

00:00:23 Then create a new empty folder and open it up within your text editor or an IDE.

00:00:28 In this case, I'll be using WebStorm.

00:00:31 WebStorm is a super powerful JavaScript and TypeScript IDE.

00:00:35 that, as of recently, became completely free for non-commercial use.

00:00:40 Before, you had to pay quite a lot to be able to use it even for hobby projects, but now, you can experience everything it offers completely for free.

00:00:49 So later on, while I'm developing the project, if you see some smart things that my ID does and your text editor doesn't,

00:00:56 that's most likely because I'm using WebStorm.

00:00:58 So, if you want to try it out, I'll leave the link down in the description.

00:01:02 But with that said, whatever you're using, make sure to open up a built-in integrated terminal, and then paste the Next.js installation command.

00:01:10 And if you're already in an empty folder, like I am, add the dot slash at the end so it initializes the app within the current folder.

00:01:18 It'll ask you a couple of questions, such as, would you like to use TypeScript?

00:01:23 We're going to say yes to get all of the type safety benefits that it offers.

00:01:27 Would you like to use ESLint?

00:01:29 That's another strong yes to make our codebase more clean and scalable.

00:01:33 Tailwind CSS is a strong yes for me.

00:01:36 We don't need a source directory, it's not needed.

00:01:40 The app router will definitely be here as it's a recommended option.

00:01:44 TurboPack will speed up our development, so I'm gonna say yes.

00:01:48 And then there's no need to customize the import alias, the default one will do us just fine.

00:01:53 Once you do all of that, you'll see that the Next.js CLI is installing just three main dependencies, React and React DOM,

00:02:01 as well as Next.js.

00:02:03 And then we have a couple of dev dependencies such as TypeScript, Tailwind, and ESLint.

00:02:09 In a couple of seconds, you'll see that our new repository has been initialized with, most importantly, the app folder right here containing our homepage.

00:02:18 So let's go ahead and run it within our browser by opening that same terminal and running npm run dev.

00:02:25 This will spin it up on localhost 3000. So you can just open it up and you'll see a boilerplate page that looks something like this.

00:02:32 Of course, this is just the code that we won't need.

00:02:35 So what do you say that we clean it up a bit?

00:02:37 Within our homepage, I will delete absolutely everything and I'll just type RAFCE.

00:02:44 This stands for React AeroFunction Expert Component, which will create a super simple empty page.

00:02:50 Just to test out Tailwind here, I can say H1 and give it a class name of text-to-excel underline.

00:02:59 And within it, we can say welcome.

00:03:02 And within it, we can say welcome to Loom.

00:03:06 Now, back within the browser, you should be able to see something that looks like this.

00:03:11 And if you don't know what Loom is, it is a super simple platform that allows you to do one thing.

00:03:17 Take a screen recording and share it with others.

00:03:20 And today, you'll learn how to implement functionalities very similar to those of Loom.

00:03:25 So now that our homepage has been cleaned up, let's also clean up the rest of the things right here, such as this globals.css.

00:03:33 We don't need any additional styling.

00:03:35 I'll just keep the Tailwind CSS import.

00:03:37 And while we're cleaning things up, we'll also have to remove the current public folder, which contains some dummy icons we don't need.

00:03:44 But instead, we'll have to replace it with a new public folder containing all of the icons we'll need to make this project look as good as it should.

00:03:52 So, for that reason, in the video kit down below, I've prepared the complete Figma design of the application that we'll develop.

00:03:59 It includes all of the pages, everything from auth, to homepage, and even profile pages.

00:04:06 These pages contain a lot of different icons, some bigger ones such as these dummy thumbnails, to the smallest of icons such as this link,

00:04:15 three dots, or this magnifying glass right here.

00:04:18 So just so you don't have to manually download each one of these icons, in the video kit down below, I also provided you with the starting assets we'll

00:04:27 need to build this project.

00:04:28 So click the assets right here, and then just download them.

00:04:32 Don't worry if it says that it can't scan it for viruses.

00:04:35 I'm definitely not including any viruses in here.

00:04:38 Once you download it, simply unzip it, and then here you'll see some of the starting files.

00:04:43 You can see that even the app is in here.

00:04:45 and it contains three pages, but all of these are just the starting code.

00:04:49 So what I'll do is get back to my code, delete the public folder if you haven't already, as well as the app folder, and then I'll simply drag and drop

00:04:59 those files and folders right into the root of my application.

00:05:02 There we go.

00:05:04 So now we have the same application that we had before, just an empty page.

00:05:08 We're even missing an H1 right here, but that's okay for now.

00:05:11 We have an empty layout, and then globals is where things will get interesting.

00:05:16 Here, I've taken some CSS variables from the Figma file, such as the background and the foreground, and set them as theming variables.

00:05:24 Same thing goes for the fonts.

00:05:26 and other colors that we're going to use throughout the rest of the application.

00:05:30 Here, if you scroll down, you'll also notice that we have a lot of these utility helper classes.

00:05:35 These styles allow us to more easily style our applications without having to necessarily write all of these classes by ourselves within the JSX.

00:05:44 So if you want to learn more about Tailwind or how I made this, you might want to check out our detailed Tailwind guide.

00:05:51 If it's created by the time that I'm recording this video, I will leave it down below.

00:05:55 But with that in mind, let's just make sure that our fonts are taken care of.

00:05:59 Head over to fonts, font.ts.

00:06:03 And make sure that we have all the variations of the Satoshi font, which we're using right here in the globals.

00:06:09 And then we just have to import those fonts right here within our layout as well.

00:06:13 We're importing Satoshi from Fonts font, as well as Carla from NextFont Google.

00:06:19 And then we're using those two as variables right below.

00:06:22 So we can put it to the test by heading back to our homepage.

00:06:27 Bringing back our H1 that says welcome to Loom clone, and we can style it by giving it a class name of text-2xl and font-carla to see whether this font

00:06:39 family will be applied.

00:06:41 So now if I head back right here, you can see that it'll have this playful welcome to Loom clone font applied.

00:06:47 And you can also notice that within the public folder, we now have a lot of different icons that we can use, as well as the images for dummy thumbnails,

00:06:57 people, and even check marks.

00:06:59 But I also decided to include the samples of these thumbnails in case you want to replicate and have exactly what I'm having.

00:07:06 But more on that later.

00:07:08 What matters the most is that now our code base has been set up and we are ready to dive right in.

00:07:13 What do you think we should start with?

00:07:16 the homepage, or should we maybe do Auth first?

00:07:19 Well, I always like to make things visual, so we could focus on the homepage first and implement the UI of the entire homepage with dummy thumbnails and

00:07:30 cards so that later on, as soon as we authenticate the users, we can very easily take the user data, create the Auth form and upload video functionality,

00:07:40 and then just replace those dummy cards with the real videos that we'll upload.

00:07:45 So let's focus on the home page of the UI next.