Getting Started with Cursor

Cursor is a Text-to-code AI tool that can generate complete apps from English commands. Unlike some AI code completion tools, Cursor is aware of your entire code base and will create/modify multiple files based on your instructions.

You'll start by building some simple web apps, then proceed to building React web apps with users and persistent data. Even if you've never coded before, you can complete the tutorials and learn to develop real software.

0. Set-Up

1. Build a Trivia App

2. Build Apps with Users/Data

Setup

1. Go to cursor.com.

2. Click on 'All Downloads'.

3. Select the correct version based on the specs of your machine.

Note: Cursor provides you two-week free trial of their Pro version when you sign up. After that, it is $20/month.

Tutorial 1: Build a Trivia App

1. In your Finder app, create a folder named 'CursorProjects'. Within that folder, create a sub-folder named 'TriviaApp'.

2. Open the Cursor app.

3. Click on 'Open Folder' option within the "File" tab of the top menu. Open your 'TriviaApp' folder.

4. Open the Cursor Composer chat window by selecting its icon in the right corner. Make sure "Agent" is chosen as the mode.

5. In the Composer AI panel, enter, “Build a simple quiz app that lets a user answer the following questions: ‘What is the capital of California’ and ‘What is the capital of Texas’. Tell the user if their answer is correct or not and provide the right answer if not. Please create the app with simple vanilla HTML, CSS, and Javascript.”

6. Composer will generate some code and an “Accept All” button will appear towards the bottom of composer. Click that button. You should see some files, including index.html, created in your folder in the left panel.

7. Run your app: open your Finder/File Manager app, navigate to the folder where the generated code is, and double-click on the generated file named "index.html". A browser should open showing your web page. Click the button on the web page-- does it change color to red?

Alternative run method: from the "Run" tab in Cursor's top menu, choose "Run without Debugging". You may get an option to create a new file called 'launch.json'-- ignore this.

8. Customize the quiz:

Prompt Cursor's chat to change to the questions and answers you want for your quiz.
Prompt to keep score in some manner (e.g., track the number correct or number of misses)
Try out some feature ideas of your own.

Troubleshooting

If your app isn't loading or working as expected, it might be a coding error. Chrome's JavaScript Console helps you see error messages and figure out what's wrong with your app.

Open the JavaScript console: from the browser window showing your app, choose “View” from the top menu, then “Developer | Javascript Console”. The console provides information about any running app. Errors are marked in red.

If you see an error, copy-paste it into Cursor and ask Cursor to fix it..

tutorial2

Tutorial 2: Apps with Users and Data

Set-Up

In this tutorial, you’ll build a more sophisticated web app with users and a database. The generated code will be a node.js React app that uses Firebase to handle both user authorization and the persistent data for the app. You'll run the app differently, and you'll need to run some terminal commands, with Cursor's help.

To prepare for this tutorial, learn some basics on using the command-line terminal on your computer. Check out the following: Learn Basic Terminal Commands

You also need to install node.js.

Install Node.js

Once you have completed these steps, you are ready to build the following apps.

MyPeeps App

MyPeeps is a simple app for storing people in your interest network. Like a customer relations manager (CRM) you can add people and organize them into groups. You can also add articles and "people-tag" the articles.

1. Create a new Node.js vite starter app named “mypeeps”. This is just a boilerplate app that you'll start all your apps with.You can manually create the starter app. Open a terminal and make sure you are in your CursorSamples folder (use cd to get there). Then enter the following command:

% npm create vite@latest my-peeps --template react

Don’t enter the “%”, that is just the system prompt (yours will be different).

If you have any issues creating the starter app, check out the more detailed instructions in this tutorial.

If you are successful, a new folder is created named my-peeps with the generated code for the starter app.

Note: alternatively, you can ask Cursor to "within my cursorSamples folder, create a vite node.js app named my-peeps". It will suggest operations which you can follow.

2. Back in Cursor, open the newly generated code. Choose 'Open Folder' from the File tab in Cursor's top menu, and choose the new folder that was just created for the starter app.

3. Now you're ready to instruct Cursor to build the "mypeeps" app. In Cursor's chat panel, enter the following prompt: “This app is a node.js vite starter app. Please modify it to be an app that lets the user keep track of important persons they come across in their research. The home page should list the persons already entered. The home page should also have a + button that when clicked opens a second window, which allows a new person to be added.”

Cursor will generate a lot of code, a process which will take a minute or two. Once it completes, click on the "accept all" within the chat panel.

4. Ask Cursor to run your app. Follow the instructions Cursor suggests.

You can also run the app manually by opening a terminal, navigating to your folder (with "cd" commands), and typing in the following commands:

% npm install
% npm run dev

Note: The “%” signs above denote the terminal prompt. % is not part of the commands.

The app should open in a browser. As the test user, see if you can add a person and if that person is added to the list. Enter additional prompts to tweak the look and feel.

Add User Registration and Login

Almost all apps allow users to login and set basic profile information. In this section, you'll setup Google’s Firebase to setup simple user authorization through Google:

1. Follow this tutorial to setup your Firebase project.

2. Before closing Firebase, copy the settings for your Firebase project.

3. In the terminal, make sure you are in your project folder, then run:

% npm install firebase

4. In Cursor, request the following changes within the composer dialogue: "add user registration and login to the app, and change the app to use persistent data with a Firebase Firestore database. Make it so the data is user specific-- each user has their own list of persons that they can record. Use the following Firebase project settings: [add your Firebase settings]"

5.When Cursor finishes, choose “accept all” and re-run the app.

Add People Collections to the App

1. Request the following from Cursor: "Change the app so that the user can add groups and put persons into groups. The app should have tabs for 'People' and 'Groups'. When the user clicks on a group it should open a page showing the group title and a list of the persons in the group. Clicking on a person should generate a popup that allows the user to add the person to any of the groups."

2.Accept the changes then test the app to see if you can now add groups and place persons in groups.

Add Images to the People Cards

You can ask composer to add whatever fields you’d like to the profiles for each person. One you most likely want is a profile picture. You need a place in the cloud to store uploaded media files. One tool with a nice free tier is Cloudinary-- you can upload media files there and use the URL the tool assigns, and you can have your app use their API to do the same. If you don't have a free account at cloudinary.com, get one.

Ask composer to refine the app to let the user add profile pictures for the persons added. In your request, explicitly tell Cursor that you want to use Cloudinary. You'll need some information from your Cloudinary account, and Cursor will walk you through the steps. You can also follow these instructions:

Login at cloudinary.com
Choose the settings icon in near the bottom of the left-side menu.
Choose "Upload" in left menu.
Click "Add Upload Preset"
Set signing mode to "Unsigned".
Copy the preset name
Back in the composer chat, let Cursor know your preset info

Add Update and Delete

CRUD is an acronym for database operations. For most apps, the use should be able to C (create) R (read) U (update) and D (delete) the data items. The app thus far has creation and reading. Think of how you want update and delete to work, then instruct Cursor accordingly.