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

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.

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.
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

avantifellows/quiz-frontend