Cursor AI: Building a Full‑Stack App from Scratch

Overview

In this walkthrough you will:

1. Create an empty project folder and open it in Cursor.
2. Use Composer to scaffold a Next.js front‑end and a Node/Express back‑end.
3. Prompt Cursor to add Tailwind CSS, TypeScript, and a MongoDB connection.
4. Add Firebase authentication via Composer prompts.
5. Deploy the app to Vercel with a single command.

Prerequisites

• Cursor AI installed (free trial or Pro subscription).
• Node.js (v18+) and npm installed.
• MongoDB Atlas account and connection string.
• Firebase project with Authentication enabled.
• Vercel account for deployment.

Step‑by‑Step Instructions

1. Create a New Project Folder

1. Open Cursor.
2. Click File → New Folder and name it fullstack-demo.
3. Open the folder in Cursor.

2. Scaffold the Project with Composer

1. Press Ctrl+Shift+P (or Cmd+Shift+P on macOS) to open the Composer prompt.
2. Type: "Create a new Next.js + Express full‑stack app" and hit Enter.
3. Accept all suggested changes. Cursor will generate:
   • app/ for Next.js pages.
   • server/ for Express API.
   • package.json with required dependencies.

3. Add Tailwind CSS

1. In the Composer prompt, type: "Add Tailwind CSS to the Next.js app".
2. Accept the changes. Cursor will install tailwindcss, postcss, autoprefixer and add the necessary config files.
3. Verify globals.css imports @tailwind base; @tailwind components; @tailwind utilities;.

4. Configure TypeScript

1. Prompt: "Convert the project to TypeScript".
2. Cursor will rename .js files to .tsx/.ts and add tsconfig.json.

5. Set Up MongoDB Connection

1. In the server/ folder, open index.ts.
2. Prompt: "Add a MongoDB connection using the connection string from Atlas".
3. Paste your Atlas connection string when prompted. Cursor will add mongoose and create a db.ts file.

6. Create API Endpoints

1. Prompt: "Create a CRUD API for a Post model with fields: title (string), content (string), createdAt (date)".
2. Cursor will generate models/Post.ts, routes/posts.ts, and update index.ts to use the router.

7. Add Firebase Authentication

1. Prompt: "Integrate Firebase Auth into the Next.js app".
2. Paste your Firebase config when prompted. Cursor will add firebase.js and update _app.tsx to provide the auth context.

8. Build the Front‑End UI

1. Prompt: "Add a page at /posts that lists all posts and a form to create a new post".
2. Cursor will create pages/posts.tsx with a simple UI using Tailwind.
3. Verify the page fetches data from /api/posts and posts new entries.

9. Test Locally

1. In the terminal, run npm run dev from the project root.
2. Open http://localhost:3000 and verify the front‑end and back‑end are working.

10. Deploy to Vercel

1. Commit all changes to a GitHub repo.
2. In Vercel, click New Project → Import Git Repository and select your repo.
3. Set environment variables:
   • MONGODB_URI – your Atlas connection string
   • NEXT_PUBLIC_FIREBASE_API_KEY, NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN, etc.
4. Click Deploy.
5. Once deployed, visit the Vercel URL to see the live app.

Tips & Gotchas

• Composer Prompts: Keep prompts concise; Cursor performs best with short, clear instructions.
• Environment Variables: Never commit your MongoDB or Firebase secrets; use Vercel’s UI to set them.
• TypeScript Migration: After converting to TS, run npm run build to catch any type errors early.
• Firebase Auth: Ensure the Firebase project allows the sign‑in methods you plan to use (e.g., Email/Password).
• Vercel Build Output: If the build fails, check that the next.config.js includes output: 'standalone' for server‑side API routes.
• Cursor Pro vs Free: Composer’s advanced prompts require a Pro subscription; the free tier offers basic code generation.
• Debugging: Use the Chat pane in Cursor to ask for error explanations or to refactor problematic code.

Happy coding with Cursor!