feat: add prerequisites (#2)

This includes deploying the project to Vercel, adding necessary
folders and files to .gitignore, implementing linting using ESLint, code
formatting with Prettier, bundling with Webpack, and testing with Jest.
It also sets up automation workflows, templates for issues and pull
requests, and a pull request labeler.

.babelrc

@@ -0,0 +1,3 @@
+{
+	"presets": ["@babel/preset-env"]
+}

.eslintrc

@@ -0,0 +1,33 @@
+{
+	"env": {
+		"browser": true,
+		"es2021": true,
+		"jest": true
+	},
+	"extends": "eslint:recommended",
+	"parserOptions": {
+		"ecmaVersion": 12,
+		"sourceType": "module"
+	},
+	"globals": {
+		"global": "readonly",
+		"document": "readonly",
+		"window": "readonly",
+		"HTMLElement": "readonly"
+	},
+	"rules": {
+		"indent": ["off"],
+		"linebreak-style": ["error", "windows"],
+		"quotes": ["error", "single"],
+		"semi": ["error", "never"]
+	},
+	"ignorePatterns": [
+		"node_modules/",
+		"webpack.config.common.js",
+		"webpack.config.prod.js",
+		"webpack.config.dev.js",
+		"dist/",
+		"coverage/",
+		"vercel/"
+	]
+}

.github/ISSUE_TEMPLATE/01-bug-report.yaml

@@ -0,0 +1,79 @@
+name: Report Bug
+description: Help us improve by reporting a bug
+labels: ['🐛 bug']
+body:
+  - type: textarea
+    id: description
+    attributes:
+      label: 📝 Description,
+      description: A clear and concise description of the bug.
+    validations:
+      required: true
+  - type: textarea
+    id: expected
+    attributes:
+      label: 🎯 Expected Behavior,
+      description: A clear and concise description of what you expected to happen.
+      placeholder: e.g. It should export a JSON file when clicking the button.
+    validations:
+      required: true
+  - type: textarea
+    id: actual
+    attributes:
+      label: 🚫 Actual Behavior,
+      description: A clear and concise description of what actually happened.
+      placeholder: e.g. It just does not work when clicked.
+    validations:
+      required: true
+  - type: checkboxes
+    id: browsers
+    attributes:
+      label: Browser,
+      description: In which browser(s) are you experiencing the issue? You may select more than one.
+      options:
+        - label: Chrome/Chromium,
+        - label: Firefox,
+        - label: Safari,
+        - label: Edge,
+        - label: Opera,
+        - label: Kiwi,
+        - label: SPIN,
+        - label: Brave,
+        - label: Other/not relevant
+    validations:
+      required: true
+  - type: checkboxes
+    id: operating-systems
+    attributes:
+      label: Operating system,
+      description: In which operating systems are you experiencing the issue? You may select more than one.
+      options:
+        - label: Windows,
+        - label: Linux,
+        - label: macOS,
+        - label: iOS,
+        - label: Android,
+        - label: Other/not relevant
+    validations:
+      required: true
+  - type: textarea
+    id: stepsToReproduce
+    attributes:
+      label: Steps to reproduce,
+      description: Please provide a detailed guide on how this issue can be reproduced.
+      placeholder: |
+        1. I opened the modal by clicking the more button.
+        2. I clicked on the export JSON button.
+        ...
+    validations:
+      required: true
+  - type: checkboxes
+    id: checklist
+    attributes:
+      label: ✅ Checklist,
+      description: Please review the following checklist before submitting your issue.
+      options:
+        - label: I have searched if someone has submitted a similar issue before and there weren't any. (Please make sure to also search closed issues, as this issue might already have been resolved.)
+          required: true
+    validations:
+      required: true

.github/ISSUE_TEMPLATE/02-feature-request.yaml

@@ -0,0 +1,30 @@
+name: Feature Request
+description: Share with us your ideas on how Quiz Manager could be improved upon.
+labels: ['✨ enhancement']
+body:
+  - type: textarea
+    id: description
+    attributes:
+      label: Description,
+      description: Try to describe in detail the feature you wish existed.
+      placeholder: e.g. I want to be able to lock certain quizzes while editing.
+    validations:
+      required: true
+  - type: textarea
+    id: use-cases
+    attributes:
+      label: Use cases,
+      description: Why do you need this feature? Provide real-life use cases as to why this feature will be useful for others.
+      placeholder: e.g. Sometimes, I accidentally edit a quiz that is not intended for editing.
+    validations:
+      required: true
+  - type: checkboxes
+    id: checklist
+    attributes:
+      label: Checklist,
+      description: Please check the following items before submitting your issue.
+      options:
+        - label: I have searched the existing issues to make sure this bug has not already been reported.
+          required: true
+    validations:
+      required: true

.github/labeler.yml

@@ -0,0 +1,49 @@
+# For changed dependencies
+📦 dependencies:
+  - changed-files:
+      - any-glob-to-any-file:
+          - yarn.lock
+
+# For changes in documentation
+📖 documentation:
+  - changed-files:
+      - any-glob-to-any-file:
+          - docs/*.md
+          - docs/**/*.md
+
+# For changes in source code
+✨ enhancement:
+  - changed-files:
+      - any-glob-to-any-file:
+          - src/*
+
+# For changes in site
+🌏 site:
+  - changed-files:
+      - any-glob-to-any-file:
+          - public/*
+
+# For changes in configuration
+⚙️ configs:
+  - changed-files:
+      - any-glob-to-any-file:
+          - .prettierrc
+          - .eslintrc
+          - .babelrc
+          - webpack.config.*.js
+          - .jestrc
+
+# For changes in service worker
+👷🏼‍♂️ service worker:
+  - changed-files:
+      - any-glob-to-any-file:
+          - public/service-worker.js
+          - public/workbox-config.js
+          - public/src-sw.js
+          - public/sw.js
+
+# For changes in locale
+💬 localization:
+  - changed-files:
+      - any-glob-to-any-file:
+          - locale/*

.github/pull_request_template.md

@@ -0,0 +1,52 @@
+## ❓ What type of PR is this?
+
+<!--
+Raw mode: Write x between the brackets if it is applicable, like this [x]
+Reading mode: Check all applicable.
+-->
+
+- [ ] Refactor ♻️
+- [ ] Feature ✨
+- [ ] Bug Fix 🛠️
+- [ ] Optimization 🚀
+- [ ] Documentation Update 📄
+- [ ] CI/CD 🤖
+
+## 💬 Description
+
+<!-- Provide a concise overview of the changes introduced by this PR -->
+
+## 🎟️ Related Tickets & Documents
+
+- Related Issue #
+- Closes #
+
+## 🎥 QA Instructions, Screenshots, Recordings
+
+<!-- Include any instructions or visual aids necessary for QA testing -->
+
+## 🃏 Added/updated tests?
+
+_We encourage you to keep the code coverage percentage at 90% and above._
+
+- [ ] Yes
+- [ ] No, because this is not necessary.
+- [ ] No, and this is why: <!-- Please replace this line with details on why tests have not been included -->
+- [ ] I need help with writing tests
+
+## 📚 Resources for Reviewers
+
+<!-- Offer links to relevant documentation, design specs, or other resources to assist reviewers -->
+
+## 🌿 What branch would you like to merge this into?
+
+<!-- Specify the target branch for merging this PR -->
+
+## 📷 \[optional\] What gif best describes this PR or how it makes you feel?
+
+<!-- Share a fitting gif for added context or humor -->
+
+<!--
+  HELLO! READ ME!
+  Is there a blank h2(##) above, remove it please.
+-->

.github/workflows/labeler.yaml

@@ -0,0 +1,18 @@
+name: Label issues
+on:
+  issues:
+    types:
+      - reopened
+      - opened
+jobs:
+  label_issues:
+    runs-on: ubuntu-latest
+    permissions:
+      issues: write
+    steps:
+      - run: gh issue edit "$NUMBER" --add-label "help wanted,good first issue"
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          GH_REPO: ${{ github.repository }}
+          NUMBER: ${{ github.event.issue.number }}
+          LABELS: triage

.github/workflows/preview.yaml

@@ -0,0 +1,21 @@
+name: GitHub Actions Vercel Preview Deployment
+env:
+  VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
+  VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
+on:
+  push:
+    branches-ignore:
+      - main
+jobs:
+  Deploy-Preview:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: Install Vercel CLI
+        run: npm install --global vercel@canary
+      - name: Pull Vercel Environment Information
+        run: vercel pull --yes --environment=preview --token=${{ secrets.VERCEL_TOKEN }}
+      - name: Build Project Artifacts
+        run: vercel build --token=${{ secrets.VERCEL_TOKEN }}
+      - name: Deploy Project Artifacts to Vercel
+        run: vercel deploy --prebuilt --token=${{ secrets.VERCEL_TOKEN }}

.github/workflows/production.yaml

@@ -0,0 +1,21 @@
+name: GitHub Actions Vercel Production Deployment
+env:
+  VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
+  VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
+on:
+  push:
+    branches:
+      - main
+jobs:
+  Deploy-Production:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: Install Vercel CLI
+        run: npm install --global vercel@canary
+      - name: Pull Vercel Environment Information
+        run: vercel pull --yes --environment=production --token=${{ secrets.VERCEL_TOKEN }}
+      - name: Build Project Artifacts
+        run: vercel build --prod --token=${{ secrets.VERCEL_TOKEN }}
+      - name: Deploy Project Artifacts to Vercel
+        run: vercel deploy --prebuilt --prod --token=${{ secrets.VERCEL_TOKEN }}