That's a huge commit if you ask me

.gitignore

@@ -26,3 +26,5 @@ coverage
 *.njsproj
 *.sln
 *.sw?
+
+.env

.prettierrc

@@ -0,0 +1,5 @@
+{
+  "tabWidth": 4,
+  "useTabs": true,
+  "semi": false
+}

README.md

@@ -8,6 +8,17 @@ This template should help get you started developing with Vue 3 in Vite.
 npm install
 ```
 
+### Environment variables
+
+```
+VITE_apiKey=
+VITE_authDomain=
+VITE_projectId=
+VITE_storageBucket=
+VITE_messagingSenderId=
+VITE_appId=
+```
+
 ### Compile and Hot-Reload for Development
 
 ```sh

firestore.rules

@@ -2,7 +2,7 @@ rules_version = '2';
 service cloud.firestore {
   match /databases/{database}/documents {
     match /{document=**} {
-      allow read, write: if false;
+      allow read, write: if true;
     }
   }
 }

package.json

@@ -10,7 +10,8 @@
     "type-check": "vue-tsc --noEmit"
   },
   "dependencies": {
-    "firebase": "^9.17.0",
+    "firebase": "^9.17.1",
+    "firebase-admin": "^11.5.0",
     "pinia": "^2.0.28",
     "vue": "^3.2.45",
     "vue-router": "^4.1.6"

src/components/nicknameSelection.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { useSessionStore } from "@/stores/useSessionStore"
+import { ref } from "vue"
+
+const sessionStore = useSessionStore()
+const nickname = ref("")
+
+function setNickname() {
+	sessionStore.nickname = nickname.value
+}
+</script>
+
+<template>
+	<h2>Group {{ sessionStore.groupId }}</h2>
+
+	<form @submit.prevent="setNickname">
+		<label for="nickname">Nickname</label>
+		<input type="text" id="nickname" name="nickname" v-model="nickname" />
+		<button type="submit">confirm</button>
+	</form>
+</template>
+
+<style scoped></style>

src/router/index.ts

@@ -1,5 +1,13 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import GroupSelection from '@/views/GroupSelection.vue'
+import { doc, getDoc } from "firebase/firestore"
+import { db } from '@/utils/firestore'
+import { useSessionStore } from '@/stores/useSessionStore'
+
+async function isGroupOk(id: string): Promise<boolean> {
+	const docSnap = await getDoc(doc(db, "groups", id))
+	return docSnap.exists()
+}
 
 const router = createRouter({
 	history: createWebHistory(import.meta.env.BASE_URL),
@@ -10,12 +18,15 @@ const router = createRouter({
 			component: GroupSelection
 		},
 		{
-			path: '/group',
+			path: '/group/:groupId',
 			name: 'Group',
-			component: GroupSelection,
-			// beforeEnter: (to, from) => {
-			// 	return '/'
-			// }
+			component: () => import('@/views/Chat.vue'),
+			beforeEnter: async (to, from) => {
+				const sessionStore = useSessionStore()
+				const userAllowed = await isGroupOk(to.params.groupId as string)
+				if (!userAllowed) return '/'
+				sessionStore.groupId = to.params.groupId as string
+			}
 		},
 	]
 })

src/stores/useSessionStore.ts

@@ -0,0 +1,9 @@
+import { defineStore } from "pinia"
+import { ref, type Ref } from "vue"
+
+export const useSessionStore = defineStore('session', () => {
+    const groupId: Ref<string | undefined> = ref(undefined)
+    const nickname: Ref<string | undefined> = ref(undefined)
+
+    return { groupId, nickname }
+})

src/utils/firestore.ts

@@ -0,0 +1,14 @@
+import { initializeApp } from "@firebase/app"
+import { getFirestore } from "@firebase/firestore"
+
+const firebaseConfig = {
+    apiKey: import.meta.env.VITE_apiKey,
+    authDomain: import.meta.env.VITE_authDomain,
+    projectId: import.meta.env.VITE_projectId,
+    storageBucket: import.meta.env.VITE_storageBucket,
+    messagingSenderId: import.meta.env.VITE_messagingSenderId,
+    appId: import.meta.env.VITE_appId,
+}
+
+const app = initializeApp(firebaseConfig)
+export const db = getFirestore(app)

src/views/Chat.vue

@@ -1,11 +1,86 @@
 <script setup lang="ts">
+import NicknameSelection from "@/components/nicknameSelection.vue"
+import { useSessionStore } from "@/stores/useSessionStore"
+import { db } from "@/utils/firestore"
+import {
+	addDoc,
+	collection,
+	onSnapshot,
+	QuerySnapshot,
+	type DocumentData,
+} from "@firebase/firestore"
+import { onMounted, ref, type Ref } from "vue"
 
+const sessionStore = useSessionStore()
+const messages: Ref<Array<DocumentData>> = ref([])
+
+const currentMessage = ref("")
+const lastUserMessageId = ref("")
+
+const messagesPath = collection(
+	db,
+	"groups",
+	sessionStore.groupId as string,
+	"messages"
+)
+
+interface Message {
+	author: string
+	message: string
+}
+
+async function postMessage(): Promise<void> {
+	const message: Message = {
+		author: sessionStore.nickname as string,
+		message: currentMessage.value,
+	}
+
+	const messageReference = await addDoc(messagesPath, message)
+	lastUserMessageId.value = messageReference.id
+}
+
+function updateMessages(querSnap: QuerySnapshot<DocumentData>): void {
+	console.log(querSnap.docs) // TODO
+}
+
+onMounted(() => {
+	if (!sessionStore.groupId) return
+
+	onSnapshot(messagesPath, updateMessages)
+})
 </script>
 
 <template>
+	<NicknameSelection v-if="!sessionStore.nickname"></NicknameSelection>
 
+	<template v-else>
+		<div class="messages">
+			<div>
+				<h3>Author</h3>
+				<p>Author's message</p>
+			</div>
+		</div>
+
+		<form @submit.prevent="postMessage">
+			<label for="message">Message</label>
+			<input
+				type="text"
+				name="message"
+				id="message"
+				v-model="currentMessage"
+			/>
+			<button type="submit">Send</button>
+		</form>
+	</template>
 </template>
 
 <style scoped>
+.messages > div {
+	padding: 16px;
+}
 
+.messages > div h3,
+.messages > div p {
+	margin: 0;
+}
 </style>

src/views/GroupSelection.vue

@@ -1,24 +1,37 @@
 <script setup lang="ts">
-import { initializeApp } from "firebase/app"
+import { useSessionStore } from "@/stores/useSessionStore"
+import { db } from "@/utils/firestore"
+import { collection, addDoc, type DocumentData } from "firebase/firestore"
+import { ref } from "vue"
+import { useRouter } from "vue-router"
 
-const firebaseConfig = {
-	apiKey: "AIzaSyDVyP3WELYiQL8OBGFaLpCkZr8gA9cVu-4",
-	authDomain: "spacemessenger-fsylvain.firebaseapp.com",
-	projectId: "spacemessenger-fsylvain",
-	storageBucket: "spacemessenger-fsylvain.appspot.com",
-	messagingSenderId: "103202352459",
-	appId: "1:103202352459:web:c41f6a1e35492bbd8e4cce"
+const router = useRouter()
+const sessionStore = useSessionStore()
+
+const group = ref("")
+
+async function getGroup(): Promise<DocumentData | undefined> {
+	try {
+		return await addDoc(collection(db, "groups"), {})
+	} catch (error) {
+		console.error("Error adding document: ", error)
+		return undefined
+	}
 }
 
-const app = initializeApp(firebaseConfig)
+async function createGroup() {
+	const group = await getGroup()
 
+	if (group?.id == undefined) return
+
+	sessionStore.groupId = group.id
+	router.push(`/group/${group.id}`)
+}
 </script>
 
 <template>
 	<h1>Space Messenger</h1>
-	<button>create a group</button>
+	<button @click="() => createGroup()">create a group</button>
 </template>
 
-<style scoped>
-
-</style>
+<style scoped></style>

src/views/NicknameSelection.vue

@@ -1,11 +0,0 @@
-<script setup lang="ts">
-
-</script>
-
-<template>
-
-</template>
-
-<style scoped>
-
-</style>