In this guide you'll develop your own web application from scratch using plain English in the Cursor IDE. Cursor is the leading AI-powered code editor, capable of instantly making code changes in complex projects across multiple files.
The development process is changing rapidly. Instead of learning programming languages and frameworks, you'll now need to carefully decompose projects into tasks, provide sufficient context to LLM helpers, and know how to recover from dead ends. Once you master this, you'll be able to start projects outside your area of expertise, even without any developers.
This React+TypeScript+Vite+MUI template allows you to run it locally in a Cursor IDE. Replace it with your logic and deploy to web.
This guide will take around 1 to 2 hours of your time.
- How to Cursor in React
- This is so tough, can I do it simpler?
- Do I need a backend?
- How to create a Telegram bot?
- Troubleshooting
- Backup
Before we dive into React, let's spend 10-20 minutes in a simpler setup.
- Install Cursor IDE. If you had it installed before, Cmd+Shift+P "Attempt Update" to get the latest update
- As you're in a
.cursortutorproject (or in any other empty folder opened as a project), pressCmd+I(Ctrl+I) and ask Cursor to make a simple website. Ask for any functionality and UI. Try asking in your language (Spanish, Polish etc.):
Create a simple html website with easy conversion between 7 main time zones.
Time in all of theme is displayed simultaneously, and I can change hh and mm
in any of them in one click or by typing.
If that fails for some reason, create a new file index.html in Cursor, open it, then repeat the generation.
- Click
[Accept All]. Trust Cursor, don't read the code that it generated – it's not relevant for this task:
- Open this file
index.htmlin your browser.- In Chrome/Firefox/Safari select
File -> Openor pressCmd/Ctrl+O. - To see where this file is on your computer, hover over its name in the left pane.
- In Chrome/Firefox/Safari select
- In the same Composer chat, ask for changes:
Make a solid-looking modern UI, draw real clock faces for each,
align them horizontally, also draw HH:MM numbers.
Again, click [Accept All] when available and refresh your page in the browser:
- Try different ideas. You may retry from scratch with a completely different idea in mind. How would you prompt to get that? Research prompt techniques online.
- This was a simple single-file application. The true power of Cursor comes in instantly making changes throughout many files in a big project. This allows you to build complex features. For that, we need to use a React library and some tooling - which is what this template's files provide.
- Go here -> and install Node.js version 20
- On Windows, do it directly to Windows, NOT to WSL-Ubuntu.
- Don't try installing via your package manager, or you can get an outdated Node version like v12. You need at least v18 for Vite.
- Log into Github
Optionally watch my stream in Russian
Fork this repo:
Then clone it locally using GitHub Desktop
Then open this project (web-2024-template) in Cursor (📁 Open a folder), open package.json, hover dev on line 7 and click Run Script:
Then open the link it gives in your browser.
On Windows, you may get errors for npm not being found. Try opening a "Command Prompt" type of terminal in Cursor and run npm run dev in it.
If npm is still not found there, it usually means that your installation of Node.js hasn't added a path to npm to your PATH variable. Ask Cursor's Chat (or a GPT4/Claude.ai/Bing Copilot/Gemini) on how to debug that.
Open src/App.tsx, then press Cmd+I (or Ctrl+I), then type your request or paste a screenshot of a desired UI. Eg.
Instead of a todo list app, make an app to store and edit recipes for dishes.
Allow to recalculate number of portions for each dish.
Populate with 5 boilerplate dishes.
Make funky styling.
You can write your mother tounge (Spanish, Polish etc.) - it'll understand
Hit Enter, then once it's done - hit Acccept All and reload your live demo in the browser.
See troubleshooting if anything fails.
Once you've changed anything, open 
in Cursor, write a commit message in the Message field (a short summary of your changes).
If you wrote a message, press [Commit], then press [Sync].
The UI here is annoying and humiliating, I know.
You may also do it from GitHub Desktop.
If you're lost, open a Terminal, press Cmd+K (Ctrl+K) and describe what you want from Git in plain English.
Open package.json and run a deploy script:
If you get errors during deployment, copy them from terminal, paste them to Cursor's Composer, and it'll try to fix. Then retry deploying until it succeeds.
Then enable the website link on Github: uncheck and check back the ✅ Use your GitHub Pages website:
You should see your changes live.
Now you can change this template into any front-end idea that you'd like to create. Depending on your feature set, you may or may not need a back-end - see below for suggestions.
- Break down new functionality into smallest possible bits. Don't bundle several unrelated features: if you get an error for one of them, you'll lose more time retrying
- Once a Cursor made any small step in the right direction - commit
- Press "+" to start a new Composer and erase unnecessary previous context. Cursor knows what you did before because it looks into the current code
- If Cursor broke things: either Reject All, press "+" and start from the last commit; or try 2-3 attempts at sending error messages to it and ask to fix
- Use
@Codebaseand also mention all files that might have a relevant context - Ask Cursor to add a debug output and paste it to composer
- Ask Cursor to add a debug UI at the right place in your application. Ask to print out all relevant app state there
- Try attaching reference screenshots and mockups as images to Composer
- Try building anything with OpenAI API, use
@OpenAI - Use
@Docsand@Web - Search Youtube for tips
- Read about features
- Read the docs
- https://cursorcasts.com/
- https://github.com/PatrickJS/awesome-cursorrules and https://cursor.directory/
- https://v0.dev/ and shadcn/ui
Why do we need a framework like React if the generation works nice even in a plain HTML?
My instinctive answer would be "because it scales better": as you grow your app, add more features, libraries, complexity, pages, sections, state - React manages it better. But that's a dev's answer - because React helps you manage the complexity of reasoning about your code and debugging it.
LLMs take the long generation for granted. However, that doesn't mean it's always error-prone. A result depends so much from precise wording, a thoroughly explained mental model of your app and your features, a lot of debug output added at a right time etc.
So I'd still bet on that with React+TypeScript you'll be able to integrate whatever you need - modern UI kits, payment processing, maps, animations, nav, charts, drag&drop, optimistic updates, dynamic loading - easier and faster.
You can try Replit Agent, although this will cost you $25 (no free trial). UX/vision-wise, it's mind-blowing. However, I can't get any meaningful results out of it so far. Also, it's heavily leaning towards Flask.
Worth trying, but it's 2024, so LLMs can still be silly.
If you simply want to persist data, ask Cursor to save data in local storage.
If you need to persist it across users or devices, ask Cursor to use Firestore
If you need authorization, ask Cursor to use Firebase Authentication
If you need a logic to process user's data on the backend - start with Firebase Cloud Functions
- Ask Cursor:
Save data to Firestore
- Log into https://console.firebase.google.com/
- Create a project.
- Select "Cloud Firestore", create a database in test mode:
- In
⚙️ Project Settingscreate a web app </> (no Firebase Hosting needed):
- Copy
firebaseConfigto the file that Cursor created for it:
const firebaseConfig = {
apiKey: "AIzaNdPrtYYZO3Mo9gmNTQFwqI8fSdn-jKTuWA",
authDomain: "your-app-43gh9.firebaseapp.com",
projectId: "your-app-43gh9",
storageBucket: "your-app-43gh9.appspot.com",
messagingSenderId: "783999999999",
appId: "1:783553619737:web:dff6fce9589deaf34",
measurementId: "G-JL7GNDPV6V"
};- Reload your app, make sure it has saved the data to the database.
- Open your database and try to see it there:
- If something breaks, ask Cursor to add a debug output for all Firebase requests.
- Create an empty folder on your computer.
- File -> Open Folder it in Cursor.
Cmd+I(Ctrl+I), typecreate a simple telegram bot.- Read carefully what it tells you to do
- If something doesn't work, replace
pipwithpip3andpythonwithpython3 - You need to kill (Ctrl+C) and rerun your
python3 bot.pyafter every code change - since python scripts don't automatically reload after their code has been changed.
If you encountered a tricky situation while running this guide, please send screenshots to cxielamiko@gmail.com or Vitaly Pavlenko on Telegram so I can add the fix for it to
Type yes, Enter.
Type fix in the file COMMIT_EDITMSG (on line 1), then Save the current file.
Next time write a commit message right in the message box:
- Type
gitto your terminal. If git is not found, install git - If you never committed to git on this machine, run in the terminal with your own name and email:
git config --global user.name "Your Name"
and
git config --global user.email "youremail@example.com"