Using Template 2
- Download Link LINK TO TEMPLATE:
- Set up Firebase *(1)
- Hook up Cursor to Replit * (2)
- Set Up Deepgram API and place in secrets folder in replit
- Use this as Cursor prompt 1:
Follow the instructions in @voice-notes.md and create a voice note-taking app. Use existing files and APIs wherever possible.
- Based on the results of this prompt make adjustments and follow good principles.
[1] Set Up Firebase
1. Go to Firebase in your browser.
2. Create an account if you don’t have one already.
3. Click “Go to console” after logging in.
4. Start a new project by clicking “Create a project” or “Add project”.
5. Name your project (e.g., “first template project”) and click “Continue”.
6. Turn off Google Analytics for the project and click “Create project”.
7. Once the project is created, click “Continue”.
8. Click on the “</>” (web app) icon to add a web app to your project.
9. Register your app by giving it a name (e.g., “first project”) and click “Register app”.
10. You’ll see a page with configuration details. You don’t need to follow the npm install instructions as they’re already handled in the template.
11. Copy the Firebase configuration object (API keys and other details) and paste them into the “Secrets” section in Replit. Make sure to match each key to the corresponding secret in Replit.
12. Set up Firestore Database:
a. Click on “Firestore Database” in the Firebase console.
b. Click “Create database”.
c. Choose “Start in test mode” and click “Next”.
d. Select a location for your database and click “Enable”.
13. Set up Storage:
a. Click on “Storage” in the Firebase console.
b. Click “Get started”.
c. Choose “Start in test mode” and click “Next”.
d. Click “Done”.
14. Set up Authentication:
a. Click on “Authentication” in the Firebase console.
b. Click “Get started”.
c. Go to “Sign-in method” tab.
d. Enable Google authentication:
– Click on “Google”.
– Toggle the “Enable” switch.
– Add your email as the support email.
– Click “Save”.
e. Add authorized domains:
– Go to the “Settings” tab.
– Click “Add domain”.
– Add your Replit.dev domain (copy from the Replit webview URL).
[2] Setting up Cursor:
1. Go to cursor.so and download the Cursor application.
2. Install Cursor on your computer.
3. Open Cursor and install the following extensions (4 square icon – top left):
– Terminal
– Remote Explorer
– Any other “Remote” extensions available
4. Generate an SSH key for Replit:
a. In Cursor, press Command+K (or Ctrl+K on Windows).
b. Type “generate an SSH key for replit. Name it replit and copy the public key to my clipboard”.
c. Press “y” if you’ve done this before or given a yes or no question, Press Enter, then enter (leave the passphrase empty), press enter again
5. Add the SSH key to Replit:
a. Go to Replit and open a new window and type ssh key
b. Click “Add SSH key”.
c. Paste the copied public key.
d. Name it (e.g., “template project 2”).
e. Click “Add SSH key”.
6. Connect Cursor to Replit:
a. In Replit, click “Connect” and copy the SSH connection string.
b. In Cursor, click “Open with SSH”.
c. Paste the copied SSH connection string.
d. Click “Add new host”. paste in that same string again
e. Select the newly added host.
f. Click “Connect” when prompted.
7. Open the project folder in Cursor:
a. Once connected, click “Open folder” in Cursor.
b. Select the folder that matches your Replit project.
c. Click “OK” to open the folder.
After completing these steps, your Firebase project will be set up with the necessary services (Database, Storage, and Authentication), and Cursor will be connected to your Replit project. This allows you to use Cursor’s AI-powered coding assistance while working on your Replit project, with the changes syncing between the two platforms.
