How to Launch Your App with Cursor AI - Beginners Guide | Lesson 6

Key Concepts

• App Security: Protecting backend functions from unauthorized external calls.
• Firebase Authentication (Anonymous): Identifying users anonymously with unique identifiers.
• Firebase App Check (reCAPTCHA v3): Verifying users are human and not bots in the background.
• HTTP Callables: Firebase Functions that can be called from client-side code.
• CORS Errors: Cross-Origin Resource Sharing errors that can occur when making requests from a different domain.
• SEO (Search Engine Optimization): Optimizing website content and structure to improve search engine rankings.
• Helmet: A React component used to manage the document head, including title and meta tags.
• Environment Variables (ENV files): Files used to store sensitive information like API keys and project IDs.
• Marketing Strategies: Methods for acquiring initial users, including targeted demos and specific value propositions.

Securing the App

Goal

Prevent unauthorized access to backend functions, ensuring they are only called by legitimate users on the intended website (tubestamp.com).

Security Checks

1. Firebase Authentication (Anonymous):
   • Uses anonymous sign-in to generate a unique identifier (UID) for each user.
   • Confirms the user is accessing the application from the intended website.
   • Implementation:
     • Enable anonymous authentication in Firebase console (Build -> Authentication -> Get Started -> Add new provider -> Anonymous).
     • Update firebase.js to include Firebase authentication with anonymous sign-in and onAuthStateChanged.
     • Export the auth instance from firebase.js.
2. reCAPTCHA v3:
   • Works in the background to verify users are human and not bots.
   • Implementation:
     • Set up reCAPTCHA v3 in Google reCAPTCHA (using the same email as Firebase).
     • Add the website domain (e.g., localhost for testing, tubestamp.com for production).
     • Copy the secret key from Google reCAPTCHA and add it to Firebase App Check.
     • Add the site key to the .env file.
     • Update firebase.js to include Firebase App Check with reCAPTCHA v3.
     • Ensure isTokenAutoRefreshEnabled is set to true.

Code Implementation

1. firebase.js:

   • Initialize and export auth and appCheck.
   • Configure reCAPTCHA v3 provider with the site key from the .env file.
   • Example:

   import { initializeApp } from "firebase/app";
   import { getAnalytics } from "firebase/analytics";
   import { getFunctions, connectFunctionsEmulator } from "firebase/functions";
   import { getAuth, connectAuthEmulator, onAuthStateChanged, signInAnonymously } from "firebase/auth";
   import { initializeAppCheck, ReCaptchaV3Provider, getToken } from "firebase/app-check";
   
   const firebaseConfig = {
       apiKey: process.env.REACT_APP_API_KEY,
       authDomain: process.env.REACT_APP_AUTH_DOMAIN,
       projectId: process.env.REACT_APP_PROJECT_ID,
       storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
       messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID,
       appId: process.env.REACT_APP_APP_ID,
       measurementId: process.env.REACT_APP_MEASUREMENT_ID
   };
   
   const app = initializeApp(firebaseConfig);
   const analytics = getAnalytics(app);
   const functions = getFunctions(app);
   const auth = getAuth(app);
   
   if (location.hostname === "localhost") {
       connectFunctionsEmulator(functions, "http://127.0.0.1:5001");
       connectAuthEmulator(auth, "http://localhost:9099");
   }
   
   let appCheck;
   
   if (!window.appCheck) {
       window.appCheck = initializeAppCheck(app, {
           provider: new ReCaptchaV3Provider(process.env.REACT_APP_RECAPTCHA_SITE_KEY),
           isTokenAutoRefreshEnabled: true
       });
   }
   
   appCheck = window.appCheck;
   
   signInAnonymously(auth)
       .then(() => {
           // Signed in..
       })
       .catch((error) => {
           const errorCode = error.code;
           const errorMessage = error.message;
           console.log(errorCode, errorMessage)
       });
   
   export { functions, analytics, auth, appCheck };
   

2. functions/requirements.txt:

   • Add firebase-admin to the list of requirements.
   • Run pip install -r requirements.txt in the functions directory to install the package.

3. functions/main.py:

   • Import firebase_admin.
   • Initialize the Firebase Admin SDK.
   • Enforce App Check and Auth Guard in the generate_timestamps function.
   • Increase the timeout for the function to 120 seconds (2 minutes).
   • Example:

   import firebase_admin
   from firebase_admin import credentials, firestore, auth
   from firebase_functions import https_fn, options
   from firebase_admin import initialize_app
   
   options.set_global_options(region=options.SupportedRegion.US_CENTRAL1)
   initialize_app()
   
   @https_fn.on_request(
       enforce_app_check=True,
   )
   def generate_timestamps(req: https_fn.Request) -> https_fn.Response:
       # Existing logic here
   

Deployment

1. Log out and log in to Firebase with the correct account (firebase logout, firebase login).
2. Build the React application (npm run build).
3. Deploy the Firebase project (firebase deploy).

Testing and Logging

1. Use the browser's developer console to check for any errors or messages.
2. Check the Firebase Functions logs in the Google Cloud Console to see the output of the print statements in main.py.
3. Verify that the UID is being generated and passed correctly.
4. Confirm that App Check is passing and the app token info is valid.

CORS Errors

• If you encounter CORS errors, avoid using AI-generated solutions that involve importing cors.
• Ensure Firebase is correctly configured within the React application to handle CORS.

Marketing Strategies

Acquiring First 100 Users

1. Create Targeted Demos:
   • Use tools like Loom to record short (2-3 minute) demos showcasing the value of the application.
   • Focus on demonstrating how the software solves a specific pain point.
   • Example: For a Facebook ad creation tool, show a successful Facebook ad campaign created with the software.
2. Identify Target Market:
   • Understand the specific needs and pain points of the target audience.
   • Tailor marketing messages to resonate with that audience.
   • Example: For a YouTube timestamp tool, target YouTubers who need timestamps for long videos.
3. Specific Value Proposition:
   • Communicate the value of the software in specific terms.
   • Example: "Tube Stamp is made for YouTubers that need timestamps on long videos."

SEO Importance

Optimizing Website Structure

1. index.html:
   • Ensure the title in index.html accurately describes the product.
2. Helmet Component:
   • Use the Helmet component to dynamically update the title and meta description for each page.
   • This allows for more specific and relevant information to be displayed in search results.
   • Example: For a pricing page, include "Pricing" in the title and a description of the plans and features.
3. H1 Tags:
   • Use H1 tags to provide a clear and concise description of the content on each page.
   • This helps search engines understand the topic of the page.

Using the Provided Code

Downloading the Repo

1. Click the link to the public GitHub repository.
2. Clone the repository using git clone <repository_url>.

Resolving Errors

1. Missing Environment Variables:
   • Create .env files in the root directory and the functions directory.
   • Add the necessary environment variables (API keys, project IDs, etc.) to these files.
   • Copy the variable names from the code and assign the corresponding values from the Firebase project.
   • Use search to find all references to REACT_APP_ variables and ensure they are defined in the .env file.
2. Missing Dependencies:
   • If you encounter errors related to missing dependencies (e.g., font-awesome), copy the error messages.
   • Use Cursor AI to generate the install commands for the missing dependencies.
   • Run the install commands in the terminal.
   • For Python dependencies in functions/requirements.txt, run pip install -r requirements.txt in the functions directory.

Personal Mistakes and Lessons Learned

• The video mentions a "don't make this mistake" episode available in the builder console logs community.
• These mistakes cost the creator months of development time.
• The community offers exclusive content and direct access to the creator for questions and feedback.

Conclusion

This video provides a comprehensive guide to launching a real-world software application, covering essential aspects such as security, marketing, and SEO. It emphasizes the importance of securing backend functions, attracting initial users with targeted demos, and optimizing website structure for search engines. The video also offers practical advice on using the provided code and avoiding common mistakes. By following the steps and strategies outlined in this video, developers can increase their chances of successfully launching and growing their software applications.