How to Get Your App Ready for Development with Cursor AI (No Coding Experience) | Lesson 2

Key Concepts

• React: A JavaScript library for building user interfaces.
• Node.js: A JavaScript runtime environment that allows you to run JavaScript on the server-side.
• Git: A distributed version control system for tracking changes in source code.
• GitHub: A web-based platform for version control and collaboration using Git.
• Firebase: A backend-as-a-service (BaaS) platform that provides various tools and services for building web and mobile applications.
• API Key: A code used to identify and authenticate an application or user when accessing an API.
• SSH Key: A cryptographic key pair used for secure identification.
• Terminal: A command-line interface used to interact with the operating system.
• Homebrew: A package manager for macOS that simplifies the installation of software.
• NPM (Node Package Manager): A package manager for Node.js that allows you to install and manage dependencies.
• Localhost: A hostname that refers to the local computer.
• High-Risk Variables: Sensitive data, such as API keys and passwords, that should be protected from unauthorized access.
• .env file: A file used to store environment variables, which are configuration settings that can be used to customize the behavior of an application.
• Firebase CLI (Command Line Interface): A tool for managing Firebase projects from the command line.
• Firebase Hosting: A service for hosting web applications and static content.
• Monorepo: A software development strategy where all projects and their dependencies are stored in a single repository.
• Polyrepo: A software development strategy where each project and its dependencies are stored in separate repositories.

Setting Up the Development Environment

Creating Accounts on Relevant Platforms

1. Firebase and GCP (Google Cloud Platform):
   • Go to firebase.com and click "Get started."
   • Create an account or log in. It's free to start.
2. Bumpups:
   • Go to bubs.com and create an account.
   • Enable the API in settings and create an API key (e.g., "tube stamp").
   • Consider restricting the API key by endpoint for security.
   • New users get $5 of free API credits.
3. GitHub:
   • Go to github.com and sign up with your email.
   • It's free to start.
4. Monetization (Future):
   • Google Ads will be used for monetization in later episodes.
   • Alternative: Stripe for subscription-based models (e.g., $20/$40 per month or annual plans).

Installing Dependencies

1. Node.js: Required for using React.
2. Git: Required for using GitHub.
3. Firebase: Required for connecting to the backend.
4. Detailed Instructions:
   • A Google Doc with commands for Mac, Linux, and Windows is provided in the description.
   • Use a terminal window.
   • Mac: Search for "terminal."
   • Windows: Search for "terminal."
5. Homebrew (Mac Only):
   • Install Homebrew using the provided command.
   • Add Homebrew to the path using the provided command, replacing "your name" with your actual Mac username.
   • Install Node.js using brew install node.
6. Creating the Code Folder:
   • Right-click and create a new folder.
   • Name the folder in lowercase with no spaces or special characters (e.g., "tube stamp prod").
   • Place the folder in a known location (e.g., Documents).
   • Open the folder in Cursor AI (or VS Code, etc.) using "Open Project."

Creating a React App

1. Accessing the Folder in Terminal:
   • Option 1 (Within Cursor AI): Open the terminal within Cursor AI. The terminal should display the folder name (e.g., "tube stamp prod").
   • Option 2 (Separate Terminal Window):
     • Open a new terminal window (command+N on Mac).
     • Use the cd command to navigate to the folder: cd ~/Documents/tube stamp prod (replace with your actual path).
2. Creating the React App:
   • Use the command npx create-react-app . (the dot specifies the current directory).
   • This will install the necessary React files and dependencies.
3. Running the React App:
   • Use the command npm start in a separate terminal window.
   • This will render the app in localhost:3000.
   • Changes made to the code will be reflected live in the browser.

Connecting to GitHub

Creating a Private Repository

1. Go to your GitHub account and click "New."
2. Name the repository (ideally the same as the local folder, e.g., "tube stamp prod").
3. Choose "Private" for the repository visibility.
4. Click "Create repository."

Setting Up SSH Keys

1. Go to GitHub settings -> SSH and GPG keys.
2. Click "New SSH key."
3. Generating the SSH Key (Terminal):
   • Open a new terminal window.
   • Use the command ssh-keygen -t ed25519 -C "[email protected]" (replace with your GitHub email).
   • Press enter for all prompts (accept defaults).
   • Use the command cat ~/.ssh/id_ed25519.pub to display the public key.
4. Adding the SSH Key to GitHub:
   • Copy the entire public key.
   • Paste the key into the "Key" field on GitHub.
   • Give the key a title (e.g., "MacBook key").
   • Click "Add SSH key."
5. Installing Git:
   • Use brew install git (if you have Homebrew).
6. Connecting Local Code to GitHub:
   • git init (initializes a Git repository in the folder)
   • git remote add origin <repository_URL> (replace with your repository URL from GitHub)
   • git add . (adds all files to the staging area)
   • git commit -m "First commit" (commits the changes with a message)
   • git branch -M main (renames the branch to main)
   • git push -u origin main (pushes the code to the GitHub repository)

Committing Changes

1. Make changes to the code.
2. git add .
3. git commit -m "Your commit message"
4. git push origin main

Connecting to Firebase

Creating a Firebase Project

1. Go to Firebase and click "Create Firebase project."
2. Name the project (e.g., "tube stamp prod").
3. Enable Google Analytics (optional).
4. Create a Google Analytics account or select an existing one.
5. Choose "Web app" as the platform.
6. Name the app (e.g., "tube stamp").
7. Set up Firebase Hosting.
8. Register the app.

Connecting Local Code to Firebase

1. Install Firebase:
   • npm install firebase
2. Create firebase.js:
   • Create a new file named firebase.js in the src folder.
   • Copy the Firebase configuration code from the Firebase console and paste it into firebase.js.
3. Create .env:
   • Create a new file named .env in the root directory.
   • Store high-risk variables (API keys, etc.) in the .env file.
   • Example: REACT_APP_API_KEY=your_api_key
4. Update firebase.js:
   • Modify firebase.js to reference the variables from the .env file using process.env.REACT_APP_API_KEY.
5. Create .gitignore:
   • Create a new file named .gitignore in the root directory.
   • Add .env to the .gitignore file to prevent it from being committed to GitHub.
6. Install Firebase CLI:
   • npm install -g firebase-tools
7. Login to Firebase:
   • firebase logout (if you've logged in before)
   • firebase login
   • Choose the email associated with your Firebase account.
   • Allow Firebase CLI to access your account.
8. Use the Correct Project:
   • firebase use <your_project_id> (replace with your Firebase project ID)
9. Initialize Firebase:
   • firebase init
   • Select "Hosting."
   • Use "public" as the public directory.
   • Configure as a single-page app: No
   • Overwrite index.html: No
10. Deploy to Firebase Hosting:
    • npm run build (builds the React app)
    • firebase deploy (deploys the app to Firebase Hosting)
11. Troubleshooting White Screen:
    • If you get a white screen, create firebase.json and firebase.erc files in the root directory.
    • firebase.json:

      {
        "hosting": {
          "public": "build",
          "ignore": [
            "firebase.json",
            "**/.*",
            "**/node_modules/**"
          ],
          "rewrites": [
            {
              "source": "**",
              "destination": "/index.html"
            }
          ]
        }
      }
      

    • firebase.erc:

      {
        "projects": {
          "default": "<your_project_id>"
        }
      }
      

    • Replace <your_project_id> with your Firebase project ID.
    • Redeploy: firebase deploy

Final Commit

1. git add .
2. git commit -m "Firebase get react all set up"
3. git push origin main

Conclusion

The video provides a comprehensive guide to setting up a development environment for coding with AI, covering essential tools and platforms like React, Node.js, Git, GitHub, and Firebase. It includes step-by-step instructions for installing dependencies, creating a React app, connecting to GitHub using SSH keys, and deploying the app to Firebase Hosting. The video also emphasizes the importance of securing high-risk variables and provides troubleshooting tips for common issues. The final result is a fully functional development environment with version control and a live website link.