QuizzyBee 🐝

A modern, server-driven quiz application built with Jetpack Compose

---

📱 About

QuizzyBee is an Android quiz application that leverages Server-Driven UI (SDUI) architecture with Firebase Remote Config to deliver a dynamic, customizable quiz experience. The app allows for UI updates without requiring app releases, making it perfect for A/B testing and rapid iteration.

✨ Features

• 🎨 Dynamic UI - Screens configured via Firebase Remote Config
• 🐝 Multiple Categories - Various quiz topics with custom icons
• 📊 Difficulty Levels - Easy, Medium, and Hard challenges
• ⏱️ Timed Questions - Countdown timer for each question
• 📈 Score Tracking - Track your progress and results
• 🎯 Type-Safe SDUI - Screen-specific event types for clean, maintainable code
• 🌈 Custom Theme - Vibrant color palette with Material 3 design

🎨 Color Palette

Primary:    #F0985A (Orange)
Secondary:  #F7D14D (Yellow)
Tertiary:   #7A532C (Brown)
Surface:    #CAE9ED (Light Blue)
Accent:     #EFAB31 (Gold)

🏗️ Architecture

Server-Driven UI (SDUI)

QuizzyBee uses a robust SDUI architecture that allows the entire UI to be configured remotely:

┌─────────────────────────────────────┐
│   Firebase Remote Config (JSON)     │
│  - Screen Layouts                   │
│  - Component Configuration          │
│  - Theme Overrides                  │
└──────────────┬──────────────────────┘
               │
               ▼
┌─────────────────────────────────────┐
│   RemoteConfigService               │
│  - Fetches & Caches Config          │
│  - Parses JSON to Data Models       │
└──────────────┬──────────────────────┘
               │
               ▼
┌─────────────────────────────────────┐
│   SduiRenderer<T : SduiEvent>       │
│  - Type-safe event handling         │
│  - Dynamic component rendering      │
└──────────────┬──────────────────────┘
               │
               ▼
┌─────────────────────────────────────┐
│   ComponentFactory                  │
│  - Creates components dynamically   │
│  - Handles screen-specific events   │
└─────────────────────────────────────┘

Screen-Specific Events

Each screen has its own sealed event interface for type safety:

// Category Screen
sealed interface CategorySduiEvent : SduiEvent {
    data class CategorySelected(val categoryId: Int)
    data class DifficultySelected(val difficulty: String)
}

// Quiz Screen
sealed interface QuizSduiEvent : SduiEvent {
    data class AnswerSelected(val answer: String)
    data object TimeUp
}

Config State Management

Uses sealed interfaces to prevent impossible states:

sealed interface ConfigState {
    data object Loading : ConfigState
    data class Loaded(val config: ScreenConfig) : ConfigState
    data class Error(val message: String) : ConfigState
}

🛠️ Tech Stack

• UI Framework: Jetpack Compose with Material 3
• Architecture: MVVM with Circuit (Presenter pattern)
• Dependency Injection: Hilt
• Networking: Ktor Client
• Database: Room
• Remote Config: Firebase Remote Config
• Serialization: Kotlinx Serialization
• Navigation: Circuit Navigation
• Language: Kotlin

📦 Project Structure

app/
├── data/
│   ├── local/          # Room database, DAOs
│   ├── remote/         # Ktor API clients
│   └── sdui/           # SDUI models & RemoteConfigService
├── domain/
│   ├── models/         # Domain entities (Category, Question)
│   └── repository/     # Data repositories
└── ui/
    ├── screens/        # Screen composables & presenters
    │   ├── category/   # Category selection screen
    │   ├── quiz/       # Quiz screen
    │   └── result/     # Results screen
    ├── sdui/           # SDUI system
    │   ├── components/ # Reusable SDUI components
    │   ├── ComponentFactory.kt
    │   ├── ComponentTypes.kt
    │   └── SduiRenderer.kt
    └── theme/          # App theming

🚀 Getting Started

Prerequisites

• Android Studio Hedgehog or later
• JDK 11 or later
• Android SDK 24+

Setup

1. Clone the repository

   git clone https://github.com/yourusername/quizzybee.git
   cd quizzybee

2. Add Firebase Configuration

   • Create a Firebase project
   • Download google-services.json
   • Place it in app/ directory

3. Configure Remote Config

   Add these keys to Firebase Remote Config:

   • category_screen_config
   • quiz_screen_config
   • result_screen_config

   See Firebase Remote Config Setup below.

4. Build and Run

   ./gradlew assembleDebug

🔥 Firebase Remote Config Setup

Category Screen Config

{
  "version": "1.0",
  "screen_id": "category_screen",
  "layout": {
    "type": "column",
    "padding": 16,
    "background_color": "#FFFFFF",
    "components": [
      {
        "id": "logo",
        "type": "image_display",
        "enabled": true,
        "props": {
          "image_resource": "bee_only",
          "size": "120",
          "shape": "circle",
          "background_color": "#EFAB31",
          "elevation": "4",
          "inner_padding": "8"
        }
      },
      {
        "id": "difficulty_selector",
        "type": "chip_group",
        "enabled": true,
        "props": {
          "options": "easy,medium,hard",
          "spacing": "8",
          "capitalize": "true"
        }
      },
      {
        "id": "category_list",
        "type": "category_grid",
        "enabled": true,
        "props": {
          "columns": "2",
          "show_icons": "true",
          "card_style": "filled"
        }
      }
    ]
  }
}

📚 Available SDUI Components

Component	Type	Description
image_display	Display	Shows images with optional circular background
text_display	Display	Renders text with customizable styles
chip_group	Input	Selection chips for multiple options
category_grid	Display	Grid layout for quiz categories
question_display	Display	Shows quiz questions
answer_options	Input	Multiple choice answer buttons
countdown_timer	Display	Timer with warning threshold
progress_indicator	Display	Shows quiz progress
score_card	Display	Displays quiz results
action_button	Input	Configurable action buttons

🎯 Key Features Explained

1. Type-Safe SDUI Events

No more else -> {} in event handlers! Each screen only handles its own events.

2. Config State Management

Clean state handling with sealed interfaces prevents impossible states.

3. Enum-Based Configs

Layout types use enums instead of strings for compile-time safety:

enum class LayoutType {
    @SerialName("column") COLUMN,
    @SerialName("row") ROW,
    @SerialName("box") BOX
}

4. Cached Remote Config

Configs are cached locally with 1-hour expiration for offline support.

🧪 Testing

# Run unit tests
./gradlew test

# Run instrumentation tests
./gradlew connectedAndroidTest

📄 License

This project is open source and available under the MIT License.

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📞 Contact

For questions or feedback, please open an issue on GitHub.

---

Made with ❤️ and Jetpack Compose