Cursor: Apps with Data
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.
Setup
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.
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.
​
Version Control
As you develop software, you need to store versions of your code for documentation and for potential rollbacks. Learn how using this GitHub Tutorial
​
Deploy
Once your software is ready for public consumption, you need to deploy it to a cloud server. Learn how using this