QuizApp is a free and open-source quiz application that lets you play fully customized quizzes right in the browser.

• React
• Semantic UI
• Open Trivia Database API

To get a local copy of the code, clone it using git:

git clone https://github.com/SafdarJamal/quiz-app.git
cd quiz-app

Install dependencies:

npm install

Click the button and the Azure Portal will prompt for:

• Resource group & region
• namePrefix (used for the Web App and storage account)
• Optional plan SKU (default Basic B1)

After the portal completes:

1. Copy the backendUrl and staticWebsiteUrl from the deployment outputs.
2. Build with REACT_APP_SOCKET_URL=<backendUrl> npm run build.
3. Upload the build/ contents to the static website container of the created storage account (you can use the portal’s “Static website” blade or az storage blob upload-batch).
4. Zip deploy backend if you make changes (zip -r ../backend.zip . -x node_modules/\* build/\* then use the Web App “Deployment Center” to upload).

• Click the badge → “Run workflow”. It will:
  • Deploy infra (Bicep)
  • Build frontend with the backend URL
  • Zip-deploy backend
  • Upload static build
• Requires one-time secret AZURE_CREDENTIALS (service principal JSON with access to your subscription). After that, it’s a button click.

Start the backend (Express + Socket.IO) and the web app in two terminals:

npm run server

and

npm start

Then open http://localhost:3000.

Multiplayer uses websockets. By default the frontend points to http://localhost:4000. If you deploy the backend elsewhere, set REACT_APP_SOCKET_URL to that URL before running npm start or building.

In this project, you can run the following scripts:

QuizApp is built and maintained by Safdar Jamal.

Code released under the MIT license.