web-2024-template

KO | EN

gitlite — search

#python #ai #llm #go #android #machine-learning #deep-learning #macos #cli #awesome-list #vue #pytorch #security #open-source

web-2024-template

(★ 97)

Front-end skills aren't needed anymore to create a web application. Use the Cursor IDE, it'll write the code for you. ⬇️⬇️⬇️ Scroll down to see the guide 👇👇👇

web-2024-template Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

![379113570-98bff411-e1e5-4de1-affe-dde8a27920f9 copy](https://github.com/user-attachments/assets/95aa1733-f495-4871-a2c1-fe4e6c0bc54f)

[8 year old girl codes with Cursor AI](https://www.youtube.com/watch?v=o5uvDZ8srHA)

In this guide you'll develop your own web application from scratch using plain English in various AI coding assistants. 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 4 hours of your time.

- [Idea](#idea)
- [Online IDEs](#online-ides)
  * [v0.dev](#v0dev)
  * [lovable.dev](#lovabledev)
  * [Bolt](#bolt)
  * [Replit Agent](#replit-agent)
  * [Claude](#claude)
- [A simple html app](#a-simple-html-app)
- [A React app](#a-react-app)
  * [Get the tools ready](#get-the-tools-ready)
  * [Run locally](#run-locally)
  * [Make changes](#make-changes)
  * [Save changes (commit)](#save-changes-commit)
  * [Deploy](#deploy)
  * [Bring your idea](#bring-your-idea)
  * [Tips](#tips)
  * [React vs Vanilla JS](#react-vs-vanilla-js)
- [Do I need a backend?](#do-i-need-a-backend)
  * [Adding Firestore to the project](#adding-firestore-to-the-project)
  * [Rules](#rules)
- [How to create a Telegram bot?](#how-to-create-a-telegram-bot)
- [Troubleshooting](#troubleshooting)
    + [Git authenticity](#git-authenticity)
    + [Empty commit message](#empty-commit-message)
    + [First time Git configuration](#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. You may also google "ideas for web application", idk.

Write down a short one-line description of your application in a file - you'll copy-paste this prompt to several tools to compare results. Start with "create a web application that ...". Don't elaborate all the details yet - LLMs are smart at making good guesses.

# Online IDEs

First, we're gonna try five online tools: v0.dev, lovable.dev, Bolt, Replit Agent and Claude. They look great at first, however, they may quickly fail and disappoint. Good luck!

## v0.dev

Go to [v0.dev](https://v0.dev/) and sign up first. If the email doesn't work, create an account at [GitHub](https://github.com/signup) and sign up to v0 using your GitHub account.

Once you've signed in, paste your idea into a text box.

If the first version doesn't work at all, ask v0 to "fix" and describe how exactly it does not work. Remember: LLMs can't look at the screen as good as you can.

If you still have free requests, iterate several times: ask to add some features. Once you're bored, move on to next section. If you're not bored, don't stop :)

These are all paid tools, so they'll give you only a few requests to try them out.

## lovable.dev

Do the same on https://lovable.dev/

## Bolt

Then try https://bolt.new/: paste your prompt directly to the main input box. You'll probably need to sign up for it to work.

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"
- do it several times

Free tokens deplete after ~5 prompts a day. Once you ran out of them, go to the next step.

## Replit Agent

Then, try Replit Agent. It doesn't have a free trial. Ask me privately for credentials.

## Claude

Ask a https://claude.ai/ to make you a React app with your idea.

https://madewithclaude.com/ - you may browse this gallery and remix something.

# A simple html app

The rest of the workshop is about Cursor. It's a lower-level tool - it's a standalone IDE, and you'll need to run your app on your own on your local computer. However, in practice it's more useful, once you learn how to use it.

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](https://www.cursor.com/), **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? You may search for "cursor ide alternatives" and "cursor ide competitors" – there are tons of them, and you can jump between free versions of them for a while.
3. 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.
5. Press `Cmd/Ctrl+I` to open a Composer. Select **agent** in the "normal / agent" picker at the bottom. Ask Cursor to make a _simple html website_. **Include the words `simple html website` in your prompt**. Paste your own idea here - the one you've tried all other tools with. 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.
```
<img width="599" alt="Screenshot 2024-10-02 at 13 06 38" src="https://github.com/user-attachments/assets/6df0cba6-da1f-4ec2-8f01-d9d1434a0aab">

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:
<img width="874" alt="Screenshot 2024-10-02 at 13 07 19" src="https://github.com/user-attachments/assets/1db29fba-8814-4290-ad67-4830d9315301">

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.
<img width="588" alt="Screenshot 2024-10-02 at 13 10 37" src="https://github.com/user-attachments/assets/75d2b489-c4bd-4c70-9f60-8fb3b52d3e40">

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.
```
<img width="871" alt="Screenshot 2024-10-02 at 13 11 56" src="https://github.com/user-attachments/assets/5fee8527-c21e-4a1d-a35e-523665f6d2d5">

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](https://chatgpt.com/share/670e3c1b-bc88-800f-959a-7ff1b8c7ec9d)
- [git and deployment](https://chatgpt.com/share/670e3d41-dc34-800f-ae6b-c181e6b06cb7)

## Get the tools ready

1. Go here -> [and install Node.js](https://nodejs.org/en/download/prebuilt-installer) 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": ![dont](https://github.com/user-attachments/assets/4a6bf53a-05c9-436c-9663-64bc2b8fffeb)

5. [Log into Github](https://github.com/login)

Optionally watch [my stream in Russian](https://www.youtube.com/live/NVnHvsuc5Fc)

## Run locally
Scroll this page all the way up and 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](https://desktop.github.com/download/). 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.

![Screenshot_5 (2)](https://github.com/user-attachments/assets/d27adef4-6004-4db3-92a4-a29ad62fdaec)

Then open this project (`web-2024-template`) in Cursor (`File -> Open Folder...`), open `package.json`, hover `dev` on line 7 and click `Run Script`. Don't hover `script` on line 6, hover `dev` on line 7 instead:

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:

![photo_2024-10-09_16-53-07](https://github.com/user-attachments/assets/088e8782-a9d0-46b1-a1cd-56f2d1120d0d)

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` to open a Composer, then type your request or paste a screenshot of a desired UI.
```
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](https://chatgpt.com/share/66fbdfda-a314-800f-997d-1cedbc9f4f92)

Hit Enter, then once it's done - click `[Acccept All]` and reload your live demo in the browser.

## Save changes (commit)

See [troubleshooting](#troubleshooting) if anything fails.

Once you've changed anything, open <img width="263" alt="372839934-8672006e-9198-4399-9169-0086bf01e961" src="https://github.com/user-attachments/assets/371824e8-420c-4143-8de1-b1b310d78cd5">
 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](#empty-commit-message).

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](https://t.me/vitalypavlenko) and please star [the original guide](https://github.com/vpavlenko/web-2024-template/):

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

- 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:
   <img width="675" alt="Screenshot 2024-10-19 at 14 32 38" src="https://github.com/user-attachments/assets/0ef8f876-8eb2-4798-9886-788796866da5">
- 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](https://www.youtube.com/watch?v=1kPr1vy0-QY)
- Read about [features](https://www.cursor.com/features)
- Read [the docs](https://docs.cursor.com/)
- https://cursorcasts.com/
- https://github.com/PatrickJS/awesome-cursorrules and https://cursor.directory/
- https://v0.dev/ and [shadcn/ui](https://ui.shadcn.com/)

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

# 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](https://firebase.google.com/)

If you need authorization, ask Cursor to use [Firebase Authentication](https://firebase.google.com/). 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](https://firebase.google.com/)

## 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](https://en.wikipedia.org/wiki/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:

```js
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:

```yaml
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 [cxielamiko@gmail.com](mailto:cxielamiko@gmail.com) or [Vitaly Pavlenko on Telegram](https://t.me/vitalypavlenko) 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:

![Screenshot_6](https://github.com/user-attachments/assets/12e1d0cc-38f6-4ac8-a2af-c129ee0d9f5f)

![photo_2024-10-14_13-42-25](https://github.com/user-attachments/assets/4b8179fd-9d88-4cc4-a87b-79db4d00ba19)

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 "YOUR_EMAIL@gmail.com"
```
```
git config --global user.name "JANE DOE"
```

web-2024-template

web-2024-template Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

web-2024-template

web-2024-template Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README