CodingBowl

A visual guide to configuring the Firebase Console. Learn how to enable Authentication, initialize the Firestore Database, and open a Cloud Storage bucket for your React Native images.

1. Create Your Firebase Project

Before you can code, you need a project container on Google's servers.

• Go to the Firebase Console.
• Click "Add Project" and give it a name (e.g., "MyExpoApp").
• Disable Google Analytics for now to keep the setup simple.
• Click "Create Project."

2. Enable Authentication (Email/Password)

This allows your app to recognize individual users and give them their own private data.

• In the left sidebar, click Build > Authentication.
• Click "Get Started".
• Under Sign-in method, select Email/Password.
• Enable the first toggle and click Save.

3. Initialize Firestore Database

Firestore will store your image titles, descriptions, and user IDs.

• In the sidebar, click Build > Firestore Database.
• Click "Create Database".
• Location: Choose the region closest to your users (e.g., us-central1).
• Security Rules: Select "Start in test mode" for now. (Note: We will update these to "Production Rules" before launching).
• Click Enable.

4. Set Up Cloud Storage for Images

Cloud Storage is the "Hard Drive" where your actual .jpg and .png files will live.

• In the sidebar, click Build > Storage.
• Click "Get Started".
• Click Next through the default settings.
• Once the bucket is created, click the Rules tab and ensure it allows "read, write: if request.auth != null;".

5. Get Your Config Keys

Now you must "invite" your Expo app to use these services.

• Go to Project Settings (the gear icon near the top left).
• In the "Your apps" section, click the Web icon ().
• Register the app with a nickname (e.g., "ExpoWeb").
• Copy the firebaseConfig object. This is the code you will paste into your firebaseConfig.js file.

// Example of what your copied config will look like:
const firebaseConfig = {
  apiKey: "AIzaSyA...",
  authDomain: "your-app.firebaseapp.com",
  projectId: "your-app",
  storageBucket: "your-app.appspot.com",
  messagingSenderId: "123456789",
  appId: "1:123456789:web:abcdef"
};
    

Conclusion

Your backend is now ready! Your app has a "brain" (Auth), a "memory" (Firestore), and a "warehouse" (Storage). You can now proceed to writing the React Native code to connect them.

---

Managing Image Metadata: Saving Titles and Descriptions in Firestore

This guide explains how to store titles and descriptions in Firestore and connect them to files in Cloud Storage.

1. The "Linked" Concept

In Firebase, an image and its description live in two different places. We connect them using a Download URL.

• Firebase Storage: Stores the physical image file.
• Firestore Database: Stores a "Document" containing the Title, Description, and the URL link to that file.

2. Creating the Collection

You do not need to "create" fields in the Firebase Console. Instead, you define them in your JavaScript object when you call addDoc. The first time you run this code, Firebase will automatically create the collection and the fields for you.

// This object defines your database structure
const postData = {
  title: "My Vacation",        // The title string
  description: "At the beach", // The description string
  url: downloadURL,            // The link from Firebase Storage
  createdAt: new Date(),       // Timestamp for sorting
  uid: auth.currentUser.uid    // The ID of the user who posted it
};
    

3. Step-by-Step Implementation

To set this up, your upload function must follow these three steps in order:

1. Upload: Send the image to Storage to get a downloadURL.
2. Capture: Grab the text from your TextInput state variables.
3. Sync: Save everything as one "Document" in the posts collection.

4. How to view your setup in the Console

Once you have successfully run your upload code at least once:

• Open the Firebase Console.
• Click Firestore Database.
• You will now see a collection named posts.
• Inside, you will see a unique ID for your post. Clicking it will reveal your title, description, and url fields.

Conclusion

By saving the text and the image link together in Firestore, you make your images searchable and organized. This is the foundation of every modern social media feed.