8 year old girl codes with Cursor AI

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.

• Idea
• Agents
• A simple html app
• A React app
  • Get the tools ready
  • Run locally
  • Make changes
  • Save changes (commit)
  • Deploy
  • Bring your idea
  • Tips
  • React vs Vanilla JS
• This is so tough, can I do it simpler?
• Do I need a backend?
  • Adding Firestore to the project
  • Rules
• How to create a Telegram bot?
• Troubleshooting
  • Git authenticity
  • Empty commit message
  • First time Git configuration

Idea

Come up with an idea of a web application that you'll try to develop today. You may look at your browser history, look at apps in your phone, or type single letters to a browser search box ('a', 'b', 'c' etc.) to see which websites you're actually using a lot.

Agents

First, try https://bolt.new/ . If you get stuck on a blank screen:

• try using Chrome instead of Firefox
• ask in the chat "I see the blank screen, please fix"

Then, try Replit Agent. (Ask me privately for credentials.)

Then come back and read further instructions. The rest of the workshop is about Cursor. It's a lower-level tool - it's not an AI agent. However, in practice it's more useful, once you learn to use it.

A simple html app

Before we dive into React, let's spend 10-20 minutes in a simpler setup - a simple html website in a single index.html file. Don't fork, clone or open the repo locally yet (in case you already know what that means).

1. Install Cursor IDE, select any options during the first run (you can change them afterwards in Settings... -> Cursor Settings), then log in. If you had it installed before, Cmd/Ctrl+Shift+P "Attempt Update" to get the latest update.

   This tutorial assumes you use either Cursor's free trial (first two weeks on a new account, limited to 50 requests in total) or Cursor Pro ($20/month). Yes, this tutorial is built around a paid product. Not ready to pay? If your free trial has expired, you may create a new account using a new email (or a [email protected] - notice the plus hack) - and your trial will likely restart

2. Create an empty folder on your computer outside of Cursor. Then, in Cursor open it using File -> Open Folder....

   The first run opens .cursor-tutor folder - you may well just work inside it. To locate it on your computer, hover over its name in Cursor - the tooltip will show you the path to it.

3. Press Cmd/Ctrl+I and ask Cursor to make a simple html website. Include the words simple html website in your prompt. Ask for any functionality and UI. Try asking in your language (Spanish, Polish etc.) - it may perform on par with English or worse. Here is the example, feel free to ask for your own website idea at this very stage:

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. This file will be added to the context - it'll be shown above the text box where you type instructions.

Hint: you can also drag'n'drop screenshots of a reference UI to the Composer and ask it to copy the existing style/functionality.

4. Click [Accept All]. Trust Cursor, don't read the code that it generated – it's not relevant for this task:

5. Open this file index.html in your browser. What? See below:
   • In Chrome/Firefox/Safari select File -> Open or press Cmd/Ctrl+O.
   • To see where this file is on your computer, hover over its name in Cursor's left pane.

6. 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:

7. 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.

8. 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.

A React app

Now we'll make a new app from scratch using a modern, more scalable approach - by using a React framework and a handy tooling around it: TypeScript and Vite.

Instructions below exploit many concepts that may be less clear to non-programmers. You don't need to understand them to complete this tutorial. However, if you wish to understand them deeper, consult an LLM of your choice:

• simple html vs React
• git and deployment

Get the tools ready

1. 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.
   • On Windows, don't "automatically install the necessary tools":

2. Log into Github

Optionally watch my stream in Russian

Run locally

Fork this very repo (say what? see a screenshot below):

A fork is your own complete copy of this repo that's stored on Github. You save code changes to it. Git and Github help you not to lose any interim code state, should you wish to roll back to it at any time.

Then clone it locally using GitHub Desktop. To do that, install it and log into your Github account using File -> Options Sign into Github.com. As you see yourusername/web-2024-template in the list of repos, press Clone, then select For my own purposes:

A clone is your copy of a source code from Github servers to your local computer. Your repo's home is online at Github servers. You can clone it to any of your computers. If your repo is public, everyone can fork and clone it. You can make it private.

Then open this project (web-2024-template) in Cursor (File -> Open 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.

• Restart Cursor after installing Node.js
• Try opening a "Command Prompt" type of terminal in Cursor and run npm run dev in it. If it works, you may configure "Command Prompt" as your default Terminal Profile in Cursor:

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.

Make changes

Open src/App.tsx, then press Cmd/Ctrl+I, then type your request or paste a screenshot of a desired UI. Use @Codebase to help Cursor find all relevant files. Eg.

@Codebase 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 - click [Acccept All] and reload your live demo in the browser.

Save changes (commit)

See troubleshooting if anything fails.

Once you've changed anything, open in Cursor and write a commit message in the Message field (a short summary of your changes). Don't leave this field blank, type anything - like, 1.

Once you wrote a message, press [Commit], then press [🔄 Sync Changes ... ↑].

If prompted like this, press [Always] for simplicity:

The UI here is annoying and humiliating, I know. You may fail.

You may also do it from GitHub Desktop.

If you're lost, open a Terminal, press Cmd/Ctrl+K and describe what you want from Git in plain English.

Deploy

Open package.json and run a deploy script:

When you "deploy", you make your website hosted in the internet so that it gets a direct link and becomes available for everyone to open in their browser, even when you turn your computer off.

If you get errors during deployment, copy all of them from terminal (Ctrl/Cmd+A Ctrl/Cmd+C Ctrl/Cmd+V), paste them to Cursor's Composer, ask fix (it won't generate for an empty prompt), and it'll try to fix. Then retry deploying until it succeeds: Run Script deploy, check if there are errors, copy. It should say Published when it succeeds.

Alternatively, try closing Cursor and opening it again.

Then refresh the browser tab with your fork. After the refresh, enable the website link on Github: uncheck and check back the ✅ Use your GitHub Pages website:

You should see your changes live.

Once your website is online, send its link to me and please star the original guide:

Hint: You don't need to deploy to test every single change - for that you can still run a dev script. Deploy when you made a new version that's tested and is ready to replace the old one.

Bring your idea

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.

Tips

• First two weeks of Cursor are free, unless you use it too much. Can you log out and start a new trial with another email like [email protected]? Depends on your attitude towards capitalism.
• 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, immediatelly commit to save changes for the future
• You may ··· -> Open composer as pane. However, never open CHAT instead:
• If you want to go back to a previous version of your source code, scroll up the Composer's chat and press checkout below any of Cursor's replies
• Press "+" to start a new Composer and erase unnecessary previous context. Cursor knows what you did before because it looks into the current code
• Cursor's context is limited: you can't mention a file that's 3 MB long
• 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 @Codebase and 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. Ask it to recreate a design based on a screenshot you've provided
• Try building anything with OpenAI API, use @OpenAI
• Use @Docs and @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

React vs Vanilla JS

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.

This is so tough, can I do it simpler?

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.

Do I need a backend?

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. I recommend you to start with just the Google authorization - it's the easiest to support in the long term.

If you need a logic to process user's data on the backend - start with Firebase Cloud Functions

Adding Firestore to the project

1. In your repo, ask Cursor to generate a code to save data to Firestore:

Save data to Firestore

It will generate relevant code. Also, it'll tell you to run an installation command in the terminal - since you'll require a firebase library. You need to run this command manually in a new terminal. Cursor doesn't run any commands in your terminal on its own due to security reasons - to defer an AI takeover by several weeks.

2. Log into https://console.firebase.google.com/
3. Create a project.
4. Select "Cloud Firestore", create a database in test mode:

6. In ⚙️ Project Settings create a web app </> (no Firebase Hosting needed):

7. A previous step should finally show you your own firebaseConfig. Copy it to the file that Cursor created for it:

const firebaseConfig = {
  apiKey: "YOU_SHOULD_GET_THIS_KEY_AT_THE_PREVIOUS_STEP",
  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"
};

8. Reload your app, make sure it has saved the data to the database.
9. Open your database and try to see it there:

10. If something breaks, ask Cursor to add a debug output for all Firebase requests. Also, open a Console tab and a Network tab in your browser's Dev Tools and see if there are any errors in red.

Rules

If you fail to select a test mode in the step 4, you need to go to Rules and allow all reads and writes:

rules_version = '2';

service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if true;
    }
  }
}

This will allow anyone in the internet to read or write (or erase) any data in your Firestore. If you need any protection - eg. via user authentication - ask a GPT4 to design a strategy of your data protection in Firebase using your authentication strategies, user roles in your app and data schema you have in your Firestore.

How to create a Telegram bot?

1. Create an empty folder on your computer.
2. File -> Open Folder it in Cursor.
3. Cmd/Ctrl+I, type create a simple telegram bot.
   • Read carefully what it tells you to do
   • If something doesn't work, replace pip with pip3 and python with python3
   • You need to kill (Ctrl+C on Mac/Windows) and rerun your python3 bot.py after every code change - since python scripts don't automatically reload after their code has been changed.

Troubleshooting

If you encountered a tricky situation while running this guide, please send screenshots to [email protected] or Vitaly Pavlenko on Telegram so I can add the fix for it to

Git authenticity

Type yes, Enter.

Empty commit message

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:

First time Git configuration

If you see this:

Then open any terminal and enter these two lines, modifying their values with your personal data. This marks commits wherever you push your code - most likely, on Github:

git config --global user.email "[email protected]"

git config --global user.name "JANE DOE"