How I built Kuizzi

A real-time quiz webapp

1

2

Background/The Story

April 2020, my turn to host the team quiz
Kahoot needs 💰
Gaute thinks "Why not just built it myself?"
Extra features
- GIFs
- Custom player icon
- Question text on your own device
Playing with Vue 3 (3.0.0-alpha.10)

3

Tech stack

4

Vue crash course

<div id="app">
  <button @click="count++">{{count}}</button>
</div>

<script type="module">
  import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

  createApp({
    setup() {
      const count = ref(0)
      return {
        count
      }
    }
  }).mount('#app')
</script>

5

<script setup lang="ts">
import { ref } from 'vue'

const count = ref(0)
</script>

<template>
  <button @click="count++">{{count}}</button>
</template>

6

<script setup lang="ts">
import { ref } from 'vue'

const count = ref(0)
</script>

<template>
  <button @click="count++">{{count}}</button>
</template>

<style scoped>
button {
  padding: 0.5rem 1rem;
  background-image: linear-gradient(#e242f9, #4f93f9);
}
</style>

7

<script setup lang="ts">
import { ref } from 'vue'

const count = ref(0)
</script>

<template>
  <button @click="count++">{{count}}</button>
</template>
, computed, watchEffectconst double = computed(() => count.value* 2)watchEffect(() => console.log(count.value))

8

store.ts:

import { ref } from 'vue'

const count = ref(0)

Component.vue:

<script setup lang="ts">
import { count } from './store.ts'
</script>

9

Firebase crash course

Firebase is Google’s application development platform that helps you build, improve, and grow your app.

10

11

import { doc, onSnapshot } from "firebase/firestore"

const unsub = onSnapshot(doc(db, "cities", "SF"), (doc) => {
  console.log("Current data: ", doc.data())
})

12

import { GoogleAuthProvider, signInWithRedirect, signInAnonymously } from 'firebase/auth'

signInWithRedirect(auth, new GoogleAuthProvider())
// or
signInAnonymously(auth)

13

Let’s look at the app, firebase console, and some code!

Firebase

14