Cursor AI: Complete Guide

1] Setup Cursor AI Project:

o Create a project directory: cd ~/YOURDIRECTORY

2] Install Node.js:

o Includes npm, the package manager used to install JavaScript libraries like React.

3] Connect to GitHub:

o Initialize a Git repository

o Connect the project to a GitHub repository

4] Install Dependencies:

o Install React for the front end

o Set up Firebase for the backend

Final Objective:

By the end of this lesson, have a Cursor AI project set up, connected to GitHub, and
configured with React and Firebase.

Have questions? – Use This [ChatGPT Helper] If the link doesn't work, start a new chat with
ChatGPT, paste the Google Doc, and ask your questions!:

https://chatgpt.com/share/85e223bd-8673-472e-a334-4c373706a152

Additional Note: These directions are meant for complete beginners and will work on Mac,
Windows, and Linux.

1. Create a New Directory and Navigate to It

Mac and Linux:

  Open Terminal and Create Directory:
mkdir ~/YOURDIRECTORY
cd ~/YOURDIRECTORY

 Open the Directory in Cursor AI:

code .

Windows:

 Open Command Prompt (or PowerShell) and Create Directory:

mkdir %USERPROFILE%\aurora-ai
cd %USERPROFILE%\ aurora-ai

 Open the Directory in Cursor AI:

code .

Additional Note:
In this step, you are creating a new folder (or directory) on your computer where all your
project files will be stored. Navigating to this directory ensures that all subsequent
commands and actions take place within this specific project folder. Opening the directory
in Cursor AI (your code editor) allows you to start coding and managing your project files
conveniently from a graphical interface.

2. Install Node.js (Required for React) and Initialize a New React Project

Mac:

1. Install Homebrew (if not installed): /bin/bash -c "$(curl -fsSL

https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

2. Add Homebrew to your PATH: (echo; echo 'eval "$(/opt/homebrew/bin/brew

shellenv)"') >> /Users/YOURNAME/.zprofile eval "$(/opt/homebrew/bin/brew
shellenv)"

3. Install Node.js using Homebrew: brew install node

 4. Initialize React App: npx create-react-app .

Linux:

1. Update package list: sudo apt update

2. Install Node.js: sudo apt install nodejs npm

3. Initialize React App: npx create-react-app .

Windows:

1. Download and Install Node.js from the o icial website:

Go to https://nodejs.org/ and download the installer.

2. Open Command Prompt and Initialize React App: npx create-react-app .

Additional Note:
Node.js is a runtime environment that allows you to run JavaScript on your computer
outside of a web browser. It's essential for building modern web applications, including
React apps. By installing Node.js and using the npx create-react-app command, you are
setting up the foundational structure for your React project, enabling you to start
developing your web application.

3. Connect to GitHub

Mac:

1. Install Git using Homebrew: brew install git

2. Initialize Git Repository: git init

3. Add a README File: echo "# YOURREPO" >> README.md

git add README.md
git commit -m "first commit"
git branch -M main

4. Add Remote Repository and Push (Using Personal Access Token): git remote add
origin https://github.com/YOURUSERNAME/YOURREPO.git
git remote remove origin
git remote add origin
https://YOURUSERNAME:<YOUR_PERSONAL_ACCESS_TOKEN>@github.com/YOU
 RUSERNAME/YOURREPO.git
git push -u origin main

Linux:

1. Install Git: sudo apt install git

2. Initialize Git Repository: git init

3. Add a README File: echo "# YOURREPO" >> README.md

git add README.md
git commit -m "first commit"
git branch -M main

4. Add Remote Repository and Push (Using Personal Access Token): git remote add
origin https://github.com/YOURUSERNAME/YOURREPO.git
git remote remove origin
git remote add origin
https://YOURUSERNAME:<YOUR_PERSONAL_ACCESS_TOKEN>@github.com/YOU
RUSERNAME/YOURREPO.git
git push -u origin main

Windows:

1. Download and Install Git from the o icial website:

Go to https://git-scm.com/ and download the installer.

2. Open Command Prompt and Initialize Git Repository: git init

3. Add a README File: echo "# YOURREPO" >> README.md

git add README.md
git commit -m "first commit"
git branch -M main

4. Add Remote Repository and Push (Using Personal Access Token): git remote add
origin https://github.com/miguelsalcedo01/aurora-ai-web.git
git remote remove origin
git remote add origin https://miguelsalcedo01:
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
@github.com/miguelsalced01/aurora-ai-web.git
git push -u origin main
Additional Note:

This step connects your local project to a remote repository on GitHub, allowing you to
back up your code, track changes, and collaborate with others. By initializing Git, you’re
setting up version control for your project. Pushing your code to GitHub makes it accessible
from anywhere and ensures you have a safe backup.

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

4. Run the React Application

Start the React Development Server:

npm start

Verify Localhost:

 Open your browser and navigate to http://localhost:3000.

 You should see the default React welcome screen.

Additional Notes:

 If you're using Windows and encounter any issues, try running your command
prompt or terminal as an administrator.

 Ensure that no other processes are using port 3000, or React will prompt you to use
a di erent port.

 This step launches your React application locally, allowing you to see and interact
with your app in a web browser. Running the development server on your machine
provides a preview of how your app will function when it’s live, and it automatically
refreshes as you make changes to the code.
5. Set Up Firebase

Additional Note:
Firebase is a platform by Google that allows you to host your website, store data, and
manage user authentication easily.

Install Firebase:
npm install firebase

Set Up Firebase Project:

 Go to the Firebase Console at https://console.firebase.google.com and log in.

 Create a new project by following the prompts.

Add Firebase to Your Web App:

 Click on the Web icon (</>) to add Firebase to your web app.

 Register your app by giving it a nickname (e.g., YOURPROJECT).

 Click "Register app" and then "Continue to console."

 Copy your Firebase configuration.

Configure Firebase in Your Project:

Create a firebase.js file in the src directory:

For Mac and Linux:

touch src/firebase.js

For Windows:

Open a terminal (or Command Prompt), navigate to your project directory, and run:
type NUL > src\firebase.js

Add Firebase configuration to firebase.js:

Open the firebase.js file and add the following code, replacing the placeholder values with
your Firebase configuration:
 // src/firebase.js
import { initializeApp } from 'firebase/app';
import { getFirestore } from 'firebase/firestore';
import { getAuth } from 'firebase/auth';

const firebaseConfig = {
apiKey: "YOUR_API_KEY",
authDomain: "YOUR_AUTH_DOMAIN",
projectId: "YOUR_PROJECT_ID",
storageBucket: "YOUR_STORAGE_BUCKET",
messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
appId: "YOUR_APP_ID"
};

const app = initializeApp(firebaseConfig);

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

export { db, auth };

6. Deploy to Firebase Hosting

Install Firebase CLI (if not already installed):

npm install -g firebase-tools
Login to Firebase:
firebase login

Initialize Firebase in Your Project:

firebase init

 Choose "Hosting" from the options.

 Select the project you created in the Firebase Console.

 Set the public directory to build.

 Configure as a single-page app by answering Yes to the relevant prompt.

 Do not overwrite index.html.

Build Your React App:

npm run build

Deploy Your App to Firebase Hosting:

firebase deploy

Additional Note:

In this step, you're preparing your React app to go live on the internet. First, you install the
Firebase CLI to interact with Firebase from your terminal. Then, you log in and set up
Firebase Hosting for your project. After building your React app for production, you deploy
it to Firebase Hosting, making it accessible via a live URL.

7. Verify Firebase Hosting

Open your deployed site URL (provided after deployment) to ensure it displays correctly.

Recap of the Lesson:

 Created a new project directory and initialized a React app.

 Connected the project to a GitHub repository using a personal access token for
authentication.

 Verified the React app runs on localhost.

 Set up Firebase, installed necessary dependencies, and configured Firebase in the

project.
  Built the React app and deployed it to Firebase Hosting, ensuring everything is
correctly set up.

By following these steps, you have successfully set up a React project with Firebase and
connected it to GitHub, ready for further development.

BOOM - you are done!

Wanna see more?

https://x.com/webcafeai