Juan Andrés Núñez

Frontend Engineer

Content creator at

Real Time Vue.js
with Firebase 🔥

Why Firebase?

Google Firebase provides a powerful, fully managed BaaS that simplifies app development.

It lets developers focus on building features without worrying about infrastructure. 

How to install?

# Intall dependencies
npm install firebase
npm install -g firebase-tools

# Auth
firebase login

# Start project scaffolding
firebase init

# You can also add services 
# in particular
firebase init hosting

How to install?

// Use the credentials form Firebase console
import { initializeApp } from "firebase/app";

const firebaseConfig = {
  apiKey: "your-api-key",
  authDomain: "your-auth-domain",
  projectId: "your-project-id",
  storageBucket: "your-storage-bucket",
  messagingSenderId: "your-messaging-sender-id",
  appId: "your-app-id",
};

const app = initializeApp(firebaseConfig);

The demo

  • As vanilla as possible:
    • Vue 3 + Typescript.
  • Focus on core Firebase features:
    • Auth.
    • Cloud Firestore (real-time db.).
    • Cloud Hosting.
    • Cloud functions.

Auth

  • Simplifies the process to authenticate users in your application.
     
  • Multiple Sign-in Methods, Easy Integration, Real-time Updates are only some of its features.

Cloud Firestore

  • Scalable and Flexible NoSQL Database. Easily manage and sync your app's data.
     
  • Real-Time Updates, Offline Support, and Advanced Querying are just a few of its powerful features.

Firestore rules

  • Granular Access Control. Define who can read and write data with fine-tuned rules.
     
  • Customizable and Scalable. Tailor rules to your app's needs and enforce security at the database level.

Cloud Hosting

  • Fast and Secure Hosting. Deploy static and dynamic content with global CDN support.
     
  • Easy Deployment and Custom Domains. Effortlessly deploy multiple sites and test versions.

Deployed App

https://firetalk-887d2.web.app/

Cloud Functions

  • Serverless Backend Logic. Run your code in response to triggers without managing servers.
     
  • Event-Driven and Scalable. Automatically scale with your app’s needs and integrate seamlessly with Firebase services.

Improvements

  • Profile view.
  • Testing.
  • Throttling (FE & rules).
  • Better rules checks.
  • Comment/appreciate.
  • PWA.
  • Flag questions (Cloud Function).
  • The list goes on...
  • VueFire.
  • Don't reinvent the wheel.

Resources

Resources

Thank you 🙏

Realtime Vue with Firebase

By Juan Andrés Núñez

Made with Slides.com

Realtime Vue with Firebase

  • 29

More from Juan Andrés Núñez