Building a Progressive Quiz App with Vue, Vuex, and Firestore: Part 1

Hello! Welcome to building a progressive quiz app with Vue, Vuex and Firestore. In this tutorial we will learn how to use these technologies together, to create a progressive quiz app. The tutorial will be split into 5 parts:

links:


Project Overview

Our quiz app will be fairly simple. People can login with google and create a quiz. Once the quiz is created it will be public and anyone can take it. The home page will display all quizes as cards. Once a quiz is selected the app will show the quiz screen to start it. Once the user finishes a quiz he will get a score. The picture below explains what we’re aiming for.

a very complicated wireframe

We will use:

Okay, now that we know what we need to do, let’s get start.


Project Setup

Scaffolding

When starting a new project, the first thing to do is to setup the initial project structure, and by that I mean:

  • Folder structure: where we will put our files and how we will group them
  • Build tools: How we’re going to bundle our source files( css, js, …etc)
  • Enviroment separation: a separation between production and development enviroment
  • Test framework, CI, CD, etc… setup ( we wont need those for this tutorial )

Using vue-cli will help us setup those things autmatically.

First we will install vue-cli globally.

npm i -g vue-cli

Then, create a new folder where you want the project to live. We will execute the vue command to generate a new project. The command is:

vue init <template> <folder>

In our case we will use the progressive web app template and we will create the project in the current folder so the command should be:

vue init pwa .

The generator will download the template and then start asking us for options, make sure you choose as follows:

Make sure to choose runtime + compiler for the vue build option

Then after it finishes we need to install the dependencies, we can do that by running;

npm install

Now that our dependencies have been installed, we will remove the intial code generated by the template. Remove the file Hello.vue inside src/components and remove it from the routes file inside src/router like this:

src/router/index.js

We still need to remove it from App.vue too, so update it like this:

src/App.vue

Extra stuff

The project setup is done, but we’re missing few things. We will have a global state so we need to install Vuex. We are also going to use vuetify, the material design library for vue, to make our design beautiful.

npm i -S vuex vuetify

After npm finishes, we need to set them up. We will start with vuetify.

The Layout

To setup Vuetify we will follow the guide on their website. We will import the vuetify dependency and use it inside vue and we will also import the style, we will do this inside the main.js file:

src/main.js

In order for Vuetify to show the material design icons, we need to add the material design font to the head element inside the index.html:

Let’s give it a test, inside App.vue I am going to copy a vuetify layout and add a button inside the content section:

src/App.vue
Initial Screen

The Vuex Store

We’re going to setup the store right now, we will have 2 modules, the user, and the quiz. Instead of adding all of our state in one place inside the root vuex store, we will seperate it by domains with the help of modules.

A module is an object containing a state, getters, mutations and actions. Modules can be namespaced, which will make their getters, mutations and actions self contained and accessible only by using the name of the module, this will help in preventing conflicts.

We will have our modules inside a folder called store inside src, so go ahead an create it. The store itself will be initialized inside a file called index.js that will live in the same folder

src/store/index.js

As you can see, we imported vuex and vue, we registered vuex with the vue.use function. Then we created a vuex store with a state containing a boolean key called awesome. Finally, we exported the store object.

Now we need to use the store inside our vue instance in the main.js file:

src/main.js

If you open the vue devtools inside chrome or firefox and go to the vuex tab you should see our state:

initial store setup

Nice! Let’s setup our modules now, we will place each module in a seperate folder that will contain the module and it’s mutations. We wont add any mutations or actions for now, just simple setup with hardcoded state to see if the module is inside the store or not. Let’s start with the user module:

src/store/user/index.js

The quiz module is similar:

src/store/quiz/index.js

Now let’s add the modules to our store, any module created has to be speciefied inside the store to work. Let’s edit the index.js to include the modules:

And the result in dev tools:

modules are objects inside the global state

Firebase and Firestore Setup

Last thing is to setup firebase and firestore. we will install firebase, firebase authentication and firestore:

npm i -S @firebase/app @firebase/auth @firebase/firestore

We will create a file that will export a firebase initialized app and another file that will export a firestore database instance

src/firebase.js
src/db.js

You can grab the app configuration from the firebase console. Setup is done.

Conclusion

Alrighty, first part is done 💪. I will be releasing each part every monday. See you on the next one 😄.

Like what you read? Give Amenallah Hsoumi a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.