Build React web app in minutes using Cursor AI

hello I'm Nick today I will show you how to build a simple react web app in just a few minutes using cursor AI it will be fun I will use nextjs framework to

create the web app nextjs is built on top of the react and it also handles routing rendering and interaction with the back end first let's create a new

directory called Hotel dashboard I'm building a dashboard with business matrics and kpis for a hotel chain now we can jump to the ceri open this newly

created directory let's show the bottom panel with the terminal window and the first thing I do is check not GS version nextjs requires not GS to run and the

minimal required version for the node GS right now is 18 so I will type node V to check the current version since I have the version 22 installed on my machine I

can create a next G GS project I will use command line command to do that next GS will ask me to name the project let's name it Hotel

Dash next GS uses a wizard to create a new project in my case I will go with the default settings suggested by the wizard once I finish it next GS will

start creating a new project for me the file that I'm interested in is called page TSX and it's located in the source directory now no syntax errors so far

now let's test our project to do that I will need to open a new directory that nextjs created for me that contains actual

files navigate to the Hotel Dash and type npm run def the project was built successfully this is a URL that you can open to see

the Project's homepage once I open it in my browser I can see this page and the most important thing here is this path it

tells me where the source code of the page is located it's the same file we viewed before knowing that we can start interacting with the I assistant in the

right side panel you can already see that I've added homepage to the context it happened the moment I opened the page now I need to do a few things to

make the most of my interaction with the assistant first click on the tag icon and select docs here you can see all

docs indexed by csor AI for this project I want to add nextjs as you probably guessed it's a nextjs official documentation it's already indexed for

me because I've created a few next GS projects so I will choose it from the list but if it would be the first time I would choose the option add a new Doc

second we need to add cursor rules rules that AI assistant will follow when writing code to do that I navigate to settings and rules tab scroll down to

ensure that include cursor rules file is enabled now we can create the actual file with the rules for our project I will create a file in the home directory

of the project open cursor rules file and now is a question what should I type here I have two options either describe what rules I think the assistant should

follow based on my experience or use existing description created by the dev Community I will go with the second option let's open the browser and

navigate to the cursor directory website this is a website with a cursor rules crafted by the dev community in the search field type next

GS and click on the second option from the list as you can see rolles instructions written in a natural language that

explain what AI should or shouldn't do when generating code if you like the instructions you can copy them and paste in a csor rules file save the file now

we are ready to prompt the assistant I think that the most important part of the process is writing initial prompt the key thing to remember when writing a prompt is to clearly explain what you

want to build in my case I provide a description of six charts that I want to see along with details for each individual chart I also mentioned that I wanted to see these charts on the page

TSX this prevents cursor eii from creating a new project or adding unnecessary files in existing project let's copy this prompt and paste it into

the AI window click Send C REI starts to analyze our prompt and the project it's working with it's

suggest adding dependencies for the project and as you can see the cursor AI suggest changing the package Json the file that lists project dependencies

after that it starts to generate code for the actual charts this code is intended for the page TSX homepage of our project and the file we've mentioned

in the prompt at this point cseri Didn't introduce any changes but provided suggestions for the code changes that are highlighted with a different color

pale yellow and now it invites us to install actual dependencies new libraries to this project it provides a shortcut

command for us by clicking this button we will introduce changes to the package Json and add the new libraries to our project let's run the command and after

we did it we now see error messages but don't worry we can quickly fix this problem just wait for the final output of the change changes from the

cursor click accept all to accept all changes that cursor suggests to introduce we have a moment to review the suggestions again one by one so we can

navigate back to the top of the output and see changes cursor suggested you can accept changes one by one by clicking on

this icon at this point my assumption is nextjs didn't install dependencies properly and cursor actually suggested The Next Step try to install the

dependencies and even provide a command for that let's run the command looks like the dependencies were installed properly now and here is additional information

that cursor provides for us so we can understand what exactly it did now we can run the project to see if it's working the project is running now and

we can visit the URL to see the p page but at the same time I see that the page TSX is colored in red it means that there are syntax errors in this file

looks like we have objects that are declared but not used let's navigate to the browser to see what's going on and here we can see error message

line is not registered element line is a line chart that we are going to show let's copy this message and navigate back to the cursor type fix

and paste this error message and since we have other Undeclared objects such as bar donut we can add an other

errors cursor starts to analyze the code and suggest changes let's accept all suggestions good news we no longer have syntax

errors in the page TSX file let's ask cursor to run the project it provides us a shortcut command for that run command

and and navigate to the provided URL looks good now there are even some elements of interactivity available for the charts but overall the look and feel

of the charts is very average UI that cursor generated looks a bit ugly let's fix it navigate back to the csor and ask AI to make UI

beautiful csor AI once again starts to redo the PSX file great news that we don't have syntax errors let's run the

project nextjs refreshed the page and now it looks much better the interactivity also works well we have nice on Mouse hover effects we

did a good job creating a fully functional page that will be very valuable for the hotel business owners that's all for now please share your

experience creating web apps with a course Ori in the comments thank you