00:00:02 Hey, welcome back.

00:00:03 Another setup lesson.

00:00:05 I know, we've been setting things up for a long time now, but this is the last one.

00:00:10 And if we properly set up our code base and development environment, trust me, the process of actually coding out the logic and the design of our application

00:00:18 is going to be so much simpler.

00:00:20 In this setup lesson, we'll talk about the assets and the metadata.

00:00:24 Let's start with the assets.

00:00:26 You see this logo image right here?

00:00:28 We need to get it from the Figma design to our code.

00:00:32 Same thing for all of these custom icons.

00:00:35 You have to select it.

00:00:36 You have to go right here and export it as a PNG, SVG, or whatever.

00:00:42 See, there is one here.

00:00:44 Two, three, four, five, six, seven.

00:00:46 There is the magnifying glass.

00:00:48 There's also these icons right here.

00:00:50 There's a lot of icons and a lot of images in general.

00:00:54 And as a challenge for you, you now need to go through this entire Figma design and download all the assets that you think are needed.

00:01:02 Everything from the icons to these badges right here.

00:01:06 No need to download these, because these will be dynamically generated, as the user tags are also user-generated.

00:01:12 You'll need to get this trash and edit, and even some of these, like there's no question to show illustrations, as well as the background image for the

00:01:20 auth that'll appear right behind it.

00:01:22 Also, some icons might need to change colors depending on the mode.

00:01:26 So you can now take a couple of minutes, go through the entire design, and download all the assets with the proper naming convention.

00:01:34 That's super important.

00:01:36 When you're downloading these, make sure to give them proper names, because that's gonna be super important when we need to use them within our code later on.

00:01:44 I'll even leave some important information about how to name those assets below this lesson, so you can practice that.

00:01:50 So when you download them, where are you going to place them?

00:01:53 Well, you might know that based on what I taught you in the introduction, where I told you what all of the files and folders are for.

00:02:00 In this case, the public folder right here is for the assets.

00:02:04 So you would need to delete everything that is currently on there and then start moving your assets in there.

00:02:11 Once you fully do it, or once you download a couple and you feel like it's enough, you can then get the full public folder from below this lesson and then

00:02:19 copy and paste it here.

00:02:21 It's gonna look something like this.

00:02:23 It's gonna contain our Favicon, some other SVGs, and then all the images like Auth Dark, Auth Light, Dark Illustration, Default Logo,

00:02:32 Light Illustration, Logo.png, and then all the different icons we'll be using.

00:02:38 There's quite a lot, as you can see here.

00:02:40 So even though you might have started downloading it, might be a good idea to just get this public folder, just so we have the exact same naming for different arrows,

00:02:48 avatars, medals, and so on.

00:02:50 Once you have them all here, we can test it out.

00:02:53 And we'll test it out by using the smallest of them all, which is the favicon.

00:02:57 What you have to do is drag and drop the current Favicon to the app folder, which is going to replace the old one with the new one.

00:03:06 After that, we can focus on the metadata.

00:03:08 So if you scroll down, you'll see that Next.js exports a metadata object.

00:03:13 Metadata contains information about your site that helps search engines understand its content.

00:03:19 It's not something that users usually see, but it's embedded into the website's code.

00:03:24 For example, the title tag tells search engines the title of the website, while description provides a brief description of the site.

00:03:32 This helps with SEO by improving visibility, it boosts click-through rate because users know exactly what they're clicking into,

00:03:40 and it improves the accessibility.

00:03:42 In short, Next.js metadata helps search engines rank and show your site to the right audience.

00:03:49 We have the static metadata, or you can even use dynamic ones to make it different for each page.

00:03:55 So let's improve our metadata a bit.

00:03:57 I'll go ahead and modify the description a bit, saying that DevFlow is a community-driven platform for asking and answering programming questions.

00:04:05 Get help, share knowledge, and collaborate with other developers from around the world.

00:04:10 Explore topics in web development, mobile app development, algorithms, data structures, and more.

00:04:15 This is useful for search engine optimization.

00:04:18 We can also go a step further and choose icons, icon, and set that to point to images, site-logo.svg.

00:04:28 Now, if you go back to the browser, changes won't be immediately apparent, but you can see right here that we have a new favicon and the title.

00:04:37 And with that, we also have 59 new changes.

00:04:40 I think this is the most that we'll have in a single commit, as we have just added all of the necessary assets for the entirety of the project.

00:04:48 So let me just enter the message, assets and metadata, commit and sync.

00:04:54 Before we finish with the setup, there's one cool thing that I like to do to clean up my file tree even further.

00:05:00 And to do that, we can go into the .vscode and then right at the bottom, You can say something like this, files.exclude,

00:05:10 and you can exclude the .vscode, the .next folder as well, maybe even the node modules as we don't have to see it that often.

00:05:17 We can also exclude this next-env.d.ts.

00:05:23 You can see how simple it is.

00:05:24 Now, if you save it, you can see that now we have a bit of a cleaner work tree.

00:05:28 This is also possible on other editors, but VS Code makes it super simple.

00:05:33 And with that, we're completely done with the setup and are ready to dive straight into the app folder and start implementing our app's first functionalities.