Lesson 2: Setting up your first Cursor Project

Setting Up Your Development Environment

Before diving into app development, we need to configure our environment. In this lesson, we'll set up Cursor, React Native with Expo, and Firebase to prepare for building the MealSnap app.

Video Lesson

Step-by-Step Setup Guide

1. Installing Cursor Editor

Let's start by installing Cursor, the AI-powered code editor we'll use throughout this course:

• Visit the Cursor website and download the appropriate version for your operating system
• Follow the installation instructions
• Launch Cursor and sign in or create an account

2. Setting Up React Native with Expo

Next, we'll configure React Native using Expo, which simplifies mobile development:

• Make sure you have Node.js installed (v14 or higher recommended)
• Install Expo CLI globally

npm install -g expo-cli

Create a new project directory and initialize a React Native app:

mkdir MealSnap
cd MealSnap
npx create-expo-app .

3. Configuring Firebase

We'll set up Firebase to handle authentication and data storage:

• Go to the Firebase Console and sign in with your Google account
• Create a new project named "MealSnap"
• Enable Authentication (Email/Password and Google Sign-in)
• Set up Firestore Database
• Create a Web App and copy the configuration

Install the Firebase SDK in your project:

npm install firebase

Create a firebase.js file in your project:

// firebase.js
import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
import { getFirestore } from "firebase/firestore";

const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_PROJECT_ID.appspot.com",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID"
};

const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const db = getFirestore(app);

export { app, auth, db };

4. Configuring Cursor AI Rules

To maximize AI assistance, we'll set up Cursor rules for our project:

1. Create a .cursor-rules file in your project root
2. Add your project-specific rules

// .cursor-rules
{
  "language": "javascript",
  "component_style": "functional",
  "css_framework": "react-native",
  "file_naming": "lowercase-with-dashes",
  "architecture": {
    "state_management": "react-hooks",
    "api_layer": "firebase"
  },
  "folder_structure": {
    "components": "src/components",
    "screens": "src/screens",
    "services": "src/services",
    "utils": "src/utils"
  }
}

Practice Exercise