Vue.js Basic Quiz App

Prerequisites

• Download Docker Community Edition - https://www.docker.com/community-edition
• NPM (version 6.10.0 and above) - https://www.npmjs.com/get-npm

Details

This is a basic Vue.js app using various utilities/libraries.

Below are the various libraries used in the app.

• Vuetify - Vuetify is a Vue UI Library with beautifully handcrafted Material Components.
• Vue Router - Vue Router is the official router for Vue.js.
• Vuex - Vuex is a state management pattern + library for Vue.js applications.
• Axios - Promise based HTTP client for the browser and node.js.
• Charts - vue-chartjs is a wrapper for Chart.js in Vue.
• Vue test utils - Vue Test Utils is the official unit testing utility library for Vue.js.
• Vue circular count down timer - Count down timer library for vue.js.

Installation

Docker based installation

Use the docker docker-compose to install Vue.js Quiz App

docker-compose up -d --build

Normal installation

Use the npm to install Vue.js quiz app

npm install
npm run serve

We should be able to access our Vue.js quiz app on localhost:8080. You can change the host and port parameters in vue.config.js file if needed.

For docker, port can be changed in docker-compose.yml file.

Testing

Frontend Testing

Frontend testing uses Vue test utils with Jest.

Running tests

To run tests: npm run test

To run tests in docker

docker-compose exec frontend /bin/sh
npm run test

To run a specific test: npm run test -t TestName

Configurations

You can configure the countdown timer limit and total number of questions from the config file located at config/index.js.

For total number of questions, you can change the TOTAL_QUESTIONS parameter and for countdown timer limit, change the TIMER_LIMIT value.