Introduction to Firebase

In this activity, you will learn how to build a complete web application using Firebase for authentication and database storage. You'll create a Profile Saver app where users can register, login, and save their favorite things to share with others.

What you'll learn

• How to create a Firebase project
• How to use Firebase Hosting, Authentication & Firestore
• How to deploy your site online
• How to build real-time web apps!

Before You Begin ⏱️ (10 minutes)

1. Create a Firebase account at Firebase Console
2. Use this StackBlitz template as your starting point: Firebase Web Template
3. Reference the Firebase guideline: Firebase Guideline - Use this as a guide only, do NOT use their StackBlitz template as it comes pre-filled with code

tip Keep the Firebase Console open in a separate tab - you'll need to switch between it and your code editor frequently!

:computer: Activity Steps ⏱️ (45-60 minutes)

Part One: Initialize Firebase ⏱️ (10 minutes)

1. Open your StackBlitz template
2. Create a new Firebase project in the Firebase Console
3. Copy your Firebase configuration
4. Initialize Firebase in your index.js file

Part 2: Set Up Authentication ⏱️ (15 minutes)

1. Enable Google Authentication in Firebase Console
2. Add authentication code to your project
3. Create login and logout buttons
4. Test the authentication flow

tip Common Challenge If Google sign-in doesn't work, check that you've added your StackBlitz URL to the authorized domains in Firebase Console under Authentication > Settings.

Part 3: Create Database ⏱️ (10 minutes)

1. Enable Firestore Database in Firebase Console
2. Set up security rules for authenticated users
3. Create a collection for user profiles

Part 4: Build Profile Features ⏱️ (20 minutes)

1. Create a user profile form with fields for:
   • Name
   • Favorite hobby
   • Favorite food
   • Favorite color
2. Add a "Save to Database" button
3. Implement the save functionality
4. Display saved profiles on the page

tip Use console.log() to debug your database operations - it helps you see what data is being saved!

Video Tutorial :emoji:

Follow this guide to complete your activity:

Troubleshooting Common Issues :wrench:

Authentication Problems

• Google sign-in not working: Add your StackBlitz URL to authorized domains
• User not staying logged in: Check that persistence is set correctly
• Permission denied errors: Verify your Firestore security rules

Database Issues

• Data not saving: Check browser console for error messages
• Can't read data: Make sure you're authenticated before accessing the database
• Missing fields: Verify all form inputs have values before saving

Project Submission ⏱️ (5 minutes)

:warning: Important! Before submitting, test these features:

• :white_check_mark: Users can sign in with Google
• :white_check_mark: Profile data saves to database
• :white_check_mark: Saved profiles display on the page
• :white_check_mark: Users can sign out successfully

When you have completed your "Firebase Profile Saver" project, submit it using the link below:

Submit Your Projects Here

:information_source: Info Submission Checklist

• Your StackBlitz project is saved
• All features work correctly
• You've tested with at least 2 different user accounts
• Your project URL is ready to share