Steps

1. Install (and update) VS Code (Visual Studio Code)
2. Install the latest Python 3.12
3. Install repo dependencies

   pip3.12 install -r requirements.txt

4. Install VS Code extensions (optional)

   cat vscode_extensions.txt | xargs -L 1 code --install-extension)

5. Run command line quiz

   python3.12 quiz_cmd.py

6. Run web UI

   python3.12 app.py

7. Install tailwindcss

   npm install -D tailwindcss @tailwindcss/forms @tailwindcss/typography postcss autoprefixer prettier prettier-plugin-organize-attributes prettier-plugin-organize-imports prettier-plugin-tailwindcs
   npx tailwindcss init
   npx prettier . --write # added as a task
   npx tailwindcss -i ./src/input.css -o ./static/css/output.css --minify --watch # added as a task

Design

1. quiz_generator.py generates a data structure (list of dictionaries):

questions = [
    {
        'question': 'What is the capital of France?',
        'options': ['Paris', 'London', 'Rome', 'Berlin'],
        'answer': 'Paris'
    },
    {
        'question': 'What is 2 + 2?',
        'options': ['3', '4', '5', '6'],
        'answer': '4'
    },
    {
        'question': 'What is the capital of Italy?',
        'options': ['Madrid', 'Rome', 'Lisbon', 'Athens'],
        'answer': 'Rome'
    }

Architectural options

1. Minimal instance (low cost testing)

   flowchart TD
   
   U((User)):::user
   A{{Auth0 Google}}:::auth
   UI[/UI single-instance\]:::ui
   D[(local SQL Database: SQLite)]:::db
   B[(Database backup)]:::backup
   U <--> UI
   U <--> A
   UI <--> A
   UI <--> D
   D -.-> B
   
   classDef auth stroke:#f00
   classDef ui stroke:#0f0
   classDef user stroke:#00f
   classDef db stroke:pink
   classDef backup stroke:gray
   

   Loading

2. Scalable solution: multi-UI instances, database as a service

   flowchart TD
   
   U((User)):::user
   A{{Auth0 Google}}:::auth
   UI[/UI multiple-instances\]:::ui
   D[(SQL Database as service: Vercel PostgreSQL)]:::db
   B[(Database backup)]:::backup
   U <--> UI
   U <--> A
   UI <--> A
   UI <--> D
   D -.-> B
   
   classDef auth stroke:#f00
   classDef ui stroke:#0f0
   classDef user stroke:#00f
   classDef db stroke:pink
   classDef backup stroke:gray
   

   Loading