Let's get started by making sure we have the system requirements and tools needed to develop this project. The runtime in which we are going to develop our application is Node.js, which makes this an absolute requirement to have installed on your machine. You can verify your installation by running the command node-v in your terminal, which should output the version of Node which you currently have. If you're wondering which Node version you're supposed to have to be able to develop this project, the best way to check is to go to next.js documentation inside of installation and find the system requirements. And in here you will find the minimum Node.js version.
As you can see it says 20.9 which means as long as you have this Node version or higher, you are good to go. So you don't need to have the same version as me and you don't need to have the latest long-term support version. It's only important that you don't have a version lower than 20.9. The second requirement is some kind of version control. The one you are probably familiar with, which is also the most commonly used one, is Git.
You can verify whether you have that by running git dash v. This will be very important for us to have so we can maintain proper version control so we don't lose the progress of our project's development. Next step is to cascade a brand new Next.js project. Now, usually what I would do is I would direct you to the documentation of Next.js, tell you to find the installation, and guide you through the quick start installation script. But recently I found myself doing something else.
As some of you might know, every time I set up Next.js, the second thing that I do is immediately add ShatCN UI design system. And I've recently found out that we can actually save us a step by initializing a brand new project using ShatCN installation script instead. So instead of running npx create-next-app, you can actually run npx ShatCN latest init. But instead of using latest, I would highly recommend that you use the same version that I'm currently on, 4.12.0, which is the current latest version. The reason I recommend doing this is because depending on when you're watching this tutorial, a new breaking change can be introduced in the later versions, which I have no control over.
So to make this tutorial easier for you to follow, I would recommend being on the exact same version as me so we have the exact same code base. Let's go ahead and initiate this command. Let's select a template, Next.js. Let's select no for the monorepo option. Select Radix for the component library, Nova for the preset and let's go ahead and call our project Browser Automation.
And now let's go ahead and let it install. Once the installation is complete, go ahead and open that project in your IDE. You might be greeted with a banner like this one. Restricted mode is intended for safe code browsing. Trust this folder to enable all features.
So just go ahead and find the restricted mode button and in here you can verify that you trust this folder. There we go. And that will enable you to manage this project and its code base completely. Once you open your project in your IDE, it's also important that you enter this project in your command line interface. If you're using the CLI which is built in into your IDE, chances are you are automatically going to be in that folder.
But for those of you who are using a CLI outside of this project, make sure to do change directory and then enter the correct project. This way, if we do a command like npm run, you're not going to be greeted with script not found, but instead It's going to read from this project's package. JSON and it's going to find that exact script. So just make sure that in whatever command line interface you are using, you have entered the correct project. And once you've established that you are inside of your project, go ahead and run npm run dev.
What this is going to do is it's going to start this project on localhost 3000. And if you visit that in your browser, it's going to look something like this. A message, project ready. You may now add components and start building. We've already added the button component for you.
Clicking the button does nothing but clicking the letter D on your keyboard will toggle between dark and light mode, which is pretty cool. They've built in that for us. So if you take a look at the app folder, page.tsx is exactly where you're going to find the code from that homepage. So project ready and then the two paragraphs describing that we can now add components. At this point I would recommend creating a new repository so that we can commit this project and start keeping track of every single change that we do.
So let's go ahead and give this repository name something like browser automation app. I'm going to keep it private and I'm going to click create repository. Once you've created a repository go ahead and copy the second option. Push an existing repository from the command line. Then let's go ahead inside of here, make sure that you have no uncommitted changes.
If by any chance you do, you are going to have to do git add and then you're going to have to do git commit with a message inside. But if you have done all the steps like I did, you're not going to have any uncommitted changes and you will have just one commit, which is the initial commit, which was added once we run the command npx chat-cn init. So the only thing you actually have to do is within this project go ahead and paste those three commands. What this is going to do is it's going to push this entire project into this GitHub repository. So from now on we can create branches, we can create commits, we can backtrack and most importantly we ensure that we don't lose changes to this project.
Now that we have a Git repository set up we can safely add all components from Shazian UI. So I would once again recommend using the exact version as me, which is also the same version we used to cascade this project. The reason we are adding all components at once is so that we don't waste time adding components whenever we need a new one and so we don't have to remember this version every single time. Once we finish the project, we can easily use AI and agentic coding to simply remove all components which we are not using. So let's go ahead and execute this command in our project.
After the command finishes, you might see a couple of messages like these which are basically instructions for components which need a little bit additional setup like adding them to the root layout. We can forget about this for now and we can add this when we actually need this component. You can also see one information here that it skipped a button file because the file is identical. So what does that mean? Well if you remember, inside of our app page.tsx, we already used the button component from components UI button.
So that was one component which was already added for us. So now if you go inside of your UI folder inside of components, you should see a bunch of new components available here. And it's normal that some of them have some kind of lint errors. You don't really have to worry about this for now. We can easily resolve that later.
So if you go ahead and just, you know, play around with them, There is a chance some of them have some type errors or things like that. You don't have to worry about that. We are going to resolve if any of those are actually breaking our build. For now, it's just important that you have added all of these components here. So as you can see I have 62 changes and I would suggest and I mean I would guess that you have a similar amount if not exactly the same.
You can even see that we have one hook added use mobile which is quite useful even outside of these components which have been added. But as I said, you can see that some of these files have some lint errors. We can ignore that for now and what we are going to do is just commit these changes so that we are starting to utilize this GitHub repository which we have just initialized. So I'm going to go ahead and do git add, git commit, and I will do feature add all chatcny components. As simple as that.
And let's do git push so all of that is on our main branch and if you go ahead and refresh your github repository you will see that the latest commit is that we have added all Shatzian UI components brilliant That brings us to the end of this first chapter. In the next chapter, we're going to learn how to set up a Gentic coding for this project. Now that our GitHub repository is set up it's the perfect time to connect it to Railway. So every push we make from here on gets deployed automatically. One thing that really sets Railway apart is that they are running on their own infrastructure instead of simply reselling AWS.
That gives them much tighter control over performance, pricing, and scaling, so you can start with a single instance and grow all the way to a globally distributed deployment without the usual cloud complexity or pricing. If you'd like to follow along, you can use the link on the screen to get $20 in Railway credits on a new account. Once you've created your Railway account, head into the dashboard and create a new project. You can use the GitHub repository feature to find the new repository we just created and pushed our files into. Once you select it, it will automatically detect that this is a Next.js application and start building it.
Once your app has deployed, go inside of settings and scroll down until you find networking. In here, you can click on the button generate domain and go ahead and enter 8080 for the port and click generate domain. That's going to create a public domain that anyone can now access. Visiting that domain will give you the exact state of the application we've had so far, along with a fully working light and dark mode toggle. From now on, every commit you push to this repository is going to be automatically rebuilt and redeployed.
If for whatever reason your builds are not succeeding and have similar errors like this, rest assured that we are going to fix all of that in periodical checks throughout this tutorial. What's important right now is that you have established a connection from your GitHub repository to Railway, so regardless if your builds are succeeding or failing, rest assured we are going to have several chapters dedicated to resolving any build errors that our app might have.