// 作品 / 詳情

Project Gamma

專案的簡介與使用的技術。

技術棧

vuefirebase

SCREENSHOT_001.png

概述

Project Gamma 是一個 Vue.js 應用程式，整合 Firebase 實現即時資料同步和身份驗證。

主要功能

Vue 3 Composition API — 現代響應式模式
Firebase Firestore — 即時資料庫
Firebase Auth — Google 和電子郵件身份驗證

技術亮點

即時同步功能是這個專案中最有趣的部分。Firebase 的 Firestore 讓跨客戶端的即時更新實作變得簡單。

<script setup>
import { ref, onMounted } from 'vue';
import { collection, onSnapshot } from 'firebase/firestore';

const items = ref([]);

onMounted(() => {
  onSnapshot(collection(db, 'items'), (snapshot) => {
    items.value = snapshot.docs.map(doc => ({
      id: doc.id,
      ...doc.data()
    }));
  });
});
</script>