Quiz Frontend

A generic quiz engine for serving different types of questions (mcq, subjective, images, audio etc.) in a mobile-friendly webapp. The backend can be found here.

Table of Contents

• Project Setup
  • Pre-requisites
    • Backend
    • Pre-commit
  • Installation
  • Compile and setup hot-reloading for development
  • Build for deployment
    • Staging
    • Production
  • Deployment
  • Run the unit tests
  • Run the end-to-end tests

Project Setup

Pre-requisites

Backend

Ensure that the backend is up and running by following the setup instructions here.

Pre-commit

The project uses pre-commit for identifying and fixing simple issues before you even make a commit.

1. Install pre-commit Use pip to install pre-commit

   pip install pre-commit

   Or using homebrew on macOS

   brew install pre-commit

   For more installation alternatives, check out Pre-commit official documentation.

2. Verify pre-commit installation

   pre-commit --version

Installation

• Install the packages

npm install

• Install pre-commit

pre-commit install

• Copy .env.example to .env.local and set the appropriate values of the environment variables. The list of all environment variables along with their meanings can be found in ENV.md

Compile and setup hot-reloading for development

npm run serve

You can access the web app at http://localhost:8080/quiz/{quizId}?userId={userId}&apiKey={apikey}. Here, {quizId} should be replaced by a valid ID corresponding to an actual quiz created using the backend and {userId} can be any valid user identifier. For now, there are no explicit checks in place for userId. So, you can use any valid string (eg: 20). Please contact the repository developers for {apiKey}.

Build for deployment

Staging

• Copy .env.example to .env.staging and set the appropriate values of the environment variables.

• Run the following command

npm run build -- --mode staging

Production

• Copy .env.example to .env.production and set the appropriate values of the environment variables.

• Run the following command

npm run build

Deployment

The actual deployment happens through Github Actions. Look at .github/workflows/deploy_to_s3_staging.yml for understanding the deployment to Staging and .github/workflows/deploy_to_s3_prod.yml for Production. Make sure to set all the environment variables mentioned in docs/ENV.md in the Production and Staging environments in your Github repository.

Run the unit tests

npm run test:unit

To run unit tests for individual spec files (say, for Header component), use:

npm run test:unit -- Header.spec.ts

Run the end-to-end tests

npx cypress run