Let's get started and let's configure our Next.js application. In order to do that we first have to check if we have the necessary system requirements. So head inside of your terminal and write node-v to print out your current node version. After you're confirmed that you have the necessary system requirements, go ahead and run the command for automatic installation. I'm going to go ahead and copy the command and I'm going to paste it inside of my terminal.
After you've pasted the command, you're going to get prompted to enter your app name. So I'm going to write Lingo. I'm going to be using TypeScript, so I recommend that you do the same and select yes for this option. Same for S-Lint. Tailwind CSS as well.
Source directory, I'm going to select no. I recommend you do the same so you have the exact same results, at least during the first time you're doing this tutorial. App router, it's very important to select yes here as well and I'm not going to change the default import alias. If you know what you're doing you can change it but again I recommend that you do the exact settings that I did so that you have the best results And now let's wait a minute for this to install. After the project has been successfully installed, you're going to see this success message at the bottom of your terminal.
So let's go ahead and let's open our new project. After you've opened the project, if you're using Visual Studio Code, you might get a prompt which will ask you do you trust the authors and you can press yes if you get that prompt. When you're inside of your application you should see a structure similar to this. You should have the app folder with a favicon, globals, layout and page.tsx. You should have the node modules, the public folder and some configuration files.
Most important ones are the Tailwind config because we're going to be using Tailwind for styling, the PostCSS which enables Tailwind and TSConfig which is used for TypeScript. Before we run this project I want to add a library which we are going to use to build our own component library. For that we're going to be using a Shed CN UI. If you head into the documentation you're going to see that it says that this is not a component library. It's a collection of reusable components that you can copy and paste in your apps.
And what they mean by saying that it's not a component library is that you do not install this as a dependency. So we are only going to install specific components that we need and they are not going to be stored inside of node modules as you might expect. So let's go ahead and actually do the installation so you can see what I'm talking about. Head to the installation tab and select Next.js or you can just follow my steps here. So we already have a Next.js project so we can skip the first step and let's go immediately into the second step.
Let's run the CLI command to initialize chat CNUI. So I'm going to be using NPN throughout this tutorial so every command I run is going to be for NPM. Make sure that you are inside of your project and open the terminal again. Confirm again inside the terminal that you are inside of the project you want and paste the npx chatcnui latest init command. I recommend that you select the default style because if you select the New York style that is going to give you different packages to work with, specifically for icons.
So again, if you want the best results from this project, do it exactly as I am. So I'm going to use the default style and I'm going to choose the slate color. I'm going to select yes for the CSS variables and now let's wait a few seconds for this to install. There we go. Once this has been installed we can go ahead and do npm run dev.
This will run your project on localhost 3000. So let's go ahead and visit this application. You should be seeing a screen similar to this. What I want to do now to wrap up this first chapter where we set up our project is change the font of our application and then I want to go ahead and add a button component. So we'll learn how to do that.
So let's go ahead and change the font. We're going to use the Nunito font for this project. So let's go inside of the app folder and let's go inside of the layout file. Inside of here we can see that we have a predefined inter font from Google. So what I'm going to do is change this import to be Nunito.
Then I'm going to use the Nunito here in this constant and I'm going to change the constant name to something more generic like a font and now I have an error inside of my body element so let's go ahead and paste that here and let's go ahead and save our project and in a few seconds you should see the changed font inside of your application. Now what I want to do is clear out this entire page. This code, the code for this page is located inside of app folder page.tsx. So I'm going to go ahead and close this return method and I'm gonna completely remove it. And then I'm gonna remove the import image as well because we do not need it.
And let's go ahead and return a div which is gonna very simply say hello lingo. And there we go. I'm going to go ahead and zoom in. And we now have a text which says, hello, lingo. So now I want to try if my Tailwind is working and I want to show you a useful Tailwind CSS extension.
Let's go ahead and give this a class name of text green 500. After I save, you should see the change as well. If you're wondering how come I have this little box here which indicates the color and how come when I hover over my classes, I can see the exact CSS inside? That is thanks to the Tailwind library. So go ahead and search for Tailwind inside of your extensions tab and the very first is the extension that I am talking about.
So besides having this little useful color indicators and hover displays the CSS, we also have an autocomplete. For example, font dash and you can see all the options which you can do. So I'm gonna do font bold and there we go. Once I save you can see that my font has changed to bold. You can also use this extension to verify whether a class name in Tailwind exists.
For example, text extra small exists and I can see that because when I hover I can see the exact underlying CSS. But if I change this to something like 20xl and then hover you can see that this doesn't exist so nothing is displayed. Great! So let's go ahead and do the following to add a button from ShadCN UI. I'm gonna go ahead and open a new terminal.
Again just make sure that you're inside of your app and run npx ShadCN UI add latest. And I'm gonna go ahead and write add button. After a few seconds the button component will be added inside of our project. So let's go ahead and find where it was installed. Go ahead and visit your components folder, UI folder and now you should have a new button folder.
As you can see, this button file was not added in our node modules. Instead, we have the actual source code inside of our project. This is going to be extremely useful because we're going to build our own component library to give our app that cartoonish 3D look that the Duolingo application has. So let's go ahead and use this button. I'm going to go back inside of my home page here, I'm gonna remove this and I'm gonna add a button component from at slash components UI button and I'm gonna right-click me and there we go.
You can now see how we have a nice button And you can see how it already gave us some predefined button variants using the class variants authority library. So we have the default variant, the destructive, outline, secondary, ghost and link. And we also have the sizes. This size and variant keys inside of this object are translated to props when used as a component. So I can change the size to be large and I can change the variant to be destructive.
Like that. And I can very easily modify a variant. So I can change this from BG destructive to BG green 500 for example. And there we go. That immediately changed the color.
So I'm gonna undo this change and leave it like this, you can just as easily add a new one. For example, premium. Let's make this BG Indigo 500 and text white. I can now go back inside of my page.vsx and you can see how I'm gonna have type safety here and I can select the premium variant and there we go now it's purple. This is exactly what we are going to do to build our own component library later on because we're gonna have to style our components to have a 3D cartoonish look.
Great, great job.