In this chapter, we're going to go ahead and set up our project. This will include configuring Next.js, confirming our environment, installing ShadCNUI, and finally pushing our project to GitHub to introduce some Git workflows. Let's start with Next.js. From their official installation guide, we can find some system requirements. Let's go ahead and confirm that we have the proper Node.js version.
Per their instructions, it needs to be at least 18.18 or higher than that. You can go inside of your terminal and run node-v. If you have a lower version or you've gotten an error running this command, you most likely have to reinstall nodejs. You can head to nodejs.org and simply install the latest long-term support version, which is in my case 22.15.1, the exact same I'm using. After that, you can restart your terminal and run the command again to confirm.
And while you are there, it's a good idea to also confirm these two commands npm and npx. These two commands come alongside node, so you will automatically have them installed, but it's always good to double check. Once you have confirmed those three commands you are ready to install Next.js. In their automatic installation chapter they instruct you to use the Create next app with the at latest version. The latest version at the time of me building this tutorial is 15.3.2.
So instead of using at latest this is what I'm going to do. Npx create next app at 15.3.2. The reason I'm doing this is that you, the viewer, is completely aware of the version that I am using. Because I don't know if you found this video six months from now or a year from now. In that case, the at latest will be significantly different than the one I am using.
So my advice to you, if you want to follow this tutorial exactly as I am, use the exact same versions that I'm using. So I'm gonna be using create next app at 15.3.2. Let's call our project Meet AI and now we have to select some options. You can use arrow keys to select between yes or no. For TypeScript, select yes.
This is crucial. SLint is also yes. Tailwind is also yes. Source directory should also be yes. Make sure to change it if no is default.
AppRouter also yes, TurboPack also yes, and the only option I will leave at no is to customize the import alias. I don't want to customize it, I will leave it the default. Let's wait for the dependencies to install. Once you get the success message you can go ahead and enter the new directory change directory meet AI and inside you can enter ls command which should list all the files and folders inside. Now that you've done that, before we run the project let's quickly set up our IDE.
In my case that will be Visual Studio Code. So I'm going to select open and I will select the MeetAI repository. If you get a big prompt asking if you want to trust the authors you can select yes here. Now let's quickly go inside of package.json and confirm the versions. React 19, Next 15.3.2, TypeScript 5, and Tailwind version 4.
Now let's quickly confirm our config files. Tsconfig, postcssconfig, nextconfig, and slentconfig. There is no Tailwind config because thanks to Tailwind version 4 we have one less config file which is absolutely amazing. And also confirm that you have the public folder, confirm that you have the source folder, and inside the app folder with Favicon, Globals, layout, and page. Once you have confirmed all of that, you are ready to start the app using npm run dev and you can head to localhost 3000 to see the result.
Depending on the light or dark mode you might see a white or black background. Now let's go ahead and learn how to change something. Go inside of the amp-folder, page.tsx. And you can remove everything from the return method and you can remove the image import. And instead, just return a hello world.
And there we go. You should see your change the moment you save your file. Now let's quickly try out Tailwind. So I'm gonna go ahead and write some class names. Text for Excel, font bold and text green 500.
And you have probably immediately noticed that I have some help writing this Tailwind. I have auto-complete, I have the color helper and when I hover over classes I can see the actual CSS. If you're interested in having the same help, go ahead and install the Tailwind CSS IntelliSense. This package right here. It is immensely helpful when writing Tailwind.
Go ahead and save this file and immediately you should see your new Tailwind changes. Perfect! What we have to do next is we have to install ChatCNUI. What is ChatCNUI? So it is a set of beautifully designed, accessible components and a code distribution platform.
But it is not a component library. Instead, it is how you build your component library. Let's go ahead and add it to our project to understand a bit better. I'm going to click installation, next.js and instead of using add latest I'm first going to confirm what is the actual latest version so you can use the same version as I am. So I will just do dash dash version here and there we go 2.5.0.
So npx chat-cn at 2.5.0 init. Make sure you're doing this inside of your project. Go ahead and select neutral for the base color and go ahead and select dash dash legacy peer depths as the solution in case some packages fail. Why would any packages fail? Because we are using React 19.
React 19 is the latest React version at the time of recording this video, but not all packages have adapted their peer dependencies to support React 19. And while they're still probably working inside of React 19, installing them throws warnings, in some cases errors, which completely break the installation cycle. So you have to override them by using either dash dash force or dash dash legacy peer depths. In our case we will use dash dash legacy peer depths so select the arrow keys and choose dash dash legacy peer depths and wait for the installation to complete. Once the installation is completed you'll be able to go back to your project and you will notice some new files here.
If you're wondering exactly which files are new you can click in on this little source control icon and you will see everything that has changed. So some of this was changed by us. For example, this page which now only displays Hello World. So obviously we are not interested in this but we are interested in the new utils file, which seems to have added a new function called a CN, which is actually short for a class name or class names, which we will be using to safely merge, combine, and dynamically add tailwind classes. It's gonna come in very very handy.
So that's one of the files that our chat.cn init command has added. Another thing it has modified is our globals.css. What it modified it with is adding an actual theme for our project. And we will be able to modify this theme and then our project will look unique later on. And it also installed a couple of packages like class variance authority, CLSX, Lucid React, Tailwind Merge, and I believe one more Tailwind Animate CSS.
Everything else was already here, but it might have moved position like next. You can see the next version didn't change, it just moved the position. So don't worry, the next version was not modified. And we also have the components.json, which you can think of as a config file for Shadcny. And I didn't mention, but also, or did I?
Lucidream. These are our icons which we will use for the project. But we still can't really see any components here and they instruct us to add a button component here. So while we can do that, two things that will annoy us throughout this project is first of all remembering what is our version and the second one is remembering to choose dash dash legacy peer depths every time. So instead, how about we add all components at once and then later just get rid of those we don't need.
So we only have to remember the Shattian version one more time and we only have to select dash dash legacy peer deps one more time as well. So I will select this and I will select dash dash legacy peer depths one last time. And let's wait for this to install all dependencies. And there we go. All of these components have now been added to our project.
You can go inside of your source components UI, and you will see all of them here. And that's the power of Shazam UI. They are not just added as npm packages. Instead, they are actual coded components inside of your project, which gives you the power to customize every single last bit of them. And that's exactly what we will do in this tutorial.
So let's go and try one component out. Let's go inside of the app folder page. Instead of returning a div, let's return a button from components UI button. In case it's your first time seeing the add sign, it's basically an alias, which makes it easier for us instead of doing this all the time. So basically, the alias sign moves the import to source, if that makes sense.
You will see it will make more sense later as we work with the project. And now let's go ahead and add ClickMe inside. Once you save this and go ahead and npm run dev your project again, instead of the hello world you should now see a ClickMe button. And if you add a variant here, like destructive, it will change its color. But the cool thing is, if you click Command or Control and click on the button to enter it, or of course manually go inside of source components UI button, you will be able to add or change any variant.
For example, after link, make sure you have a comma and add custom. Text white, background purple 500, border 2, and let's do border red 500. Now let's go back to the page, and what you will notice now is that it has automatically been added to the types here. There we go. We now have our funky new variant.
Of course, we just used that for demonstration. You can remove that now and you can see how you immediately get an error here. Great! So we now learned how to add ShadCN components and how to use them, and we've also learned the difference between your usual component libraries and ShadCN, which allows us to actually see the code behind each component and modify it to our liking. One more thing we have to do is push this project to GitHub.
So before we do that, we have to commit all of our changes. And there's quite a lot of them here. Since I'm using visual studio code, I will click on the source graph here, and I will simply use the plus icon to add or stage all of these changes. This is equivalent to git add dot command. Once all of these have been staged, you will find them under the staged changes accordion.
And then you have to enter a commit message. In my case, I follow the following convention. This is chapter 01 setup. So I'm going to call this 01 setup as well. And I will simply click commit.
That's it. I'm not going to touch anything else. We still haven't pushed this to GitHub, but now we are ready to do so so go ahead and click create new new repository and you will see this screen I'm to call this meet AI and I will select it to private and I will create a repository after that I'm gonna go ahead and select the second option, which is push an existing repository from the command line. So just copy these three lines here, go inside of your terminal, you can shut down the app. You shouldn't have any numbers here or anything because nor should you have any numbers here.
Basically, it should all be committed and just paste those three lines. And once you've done that, refresh and there we go. Your project is now on GitHub and you are ready to follow the proper Git workflows and you can create pull requests, branches, everything. Perfect! You can go ahead and check inside of your source app page and inside of here you should have a button with click me.
Perfect! So I think that wraps up our setup chapter. We have set up Next.js, we confirmed our environment, we installed Shazian UI, and we pushed our project to GitHub. Amazing job and see you in the next chapter.