🎮 Valorant UI - Kotlin Multiplatform

A Beautiful Kotlin Multiplatform Mobile App showcasing Valorant Agents, Weapons, and Game Data

Features • Screenshots • Tech Stack • Architecture • Accessibility • Getting Started • Testing

📱 About

Valorant UI is a Kotlin Multiplatform mobile application that brings the world of Valorant to your fingertips! Browse through all Valorant agents, explore their abilities, check out weapon stats, and dive deep into the tactical shooter universe - all with a sleek, modern UI built using Compose Multiplatform.

✨ Features

🎯 Agent Gallery - Browse all Valorant agents with beautiful card layouts
🔍 Agent Details - Detailed information about each agent including abilities, role, and background
🔫 Weapons Showcase - Complete weapon database with stats and skins
🎨 Theme Switching - Smooth light/dark mode with wipe animation transition
💾 Offline Support - Local caching with SQLDelight for offline access
🚀 Smooth Animations - Shared element transitions and fluid animations
🌐 Real API Integration - Fetches live data from Valorant API
📊 MVI Architecture - Clean, scalable, and testable codebase with unidirectional data flow
♿ Fully Accessible - WCAG 2.1 AA & EAA compliant with TalkBack support

📸 Screenshots

📱 Android

Agents List	Weapons	Weapons Details	Theme Switch

🖥️ Desktop (JVM)

Agents Screen	Weapons Screen	Agent Details	Gun Details

Full desktop support with native window controls and responsive layouts 💻

🍎 iOS

Now Available! 🎉

iOS version is fully functional and ready to use!

Agents (Light)	Agents (Dark)	Agent Details	Gun Details

Built and tested on Desktop using Codemagic CI/CD 🚀

🛠️ Tech Stack

🎨 UI Framework

Compose Multiplatform - Declarative UI framework
Material Design 3 - Modern material design components
Jetpack Compose Navigation - Type-safe multiplatform navigation
Coil 3 - Image loading with Ktor & OkHttp support
Lottie - Beautiful animations
SDP Compose - Scalable size units

🏗️ Architecture & Patterns

MVI (Model-View-Intent) - Unidirectional data flow with intent-based actions
Clean Architecture - Separation of concerns across layers
Repository Pattern - Data abstraction layer
UseCase Pattern - Business logic isolation
State Hoisting - Proper state management in Compose

🔌 Dependency Injection

Koin 4.1.1 - Lightweight DI framework
- koin-core - Core DI
- koin-android - Android integration
- koin-compose - Compose integration

🌐 Networking

Ktor 3.3.1 - Multiplatform HTTP client
- ktor-client-core - Core client
- ktor-client-okhttp - OkHttp engine for Android
- ktor-client-java - Java engine for Desktop
- ktor-serialization-kotlinx-json - JSON serialization
- ktor-client-content-negotiation - Content negotiation
- ktor-client-logging - Network logging

💾 Local Storage

SQLDelight 2.1.0 - Type-safe SQL database
- sqldelight-android-driver - Android driver
- sqldelight-coroutines-extensions - Coroutines support
DataStore 1.1.7 - Preferences storage
- datastore-preferences - Key-value storage
- datastore-core-okio - Multiplatform support

🧵 Concurrency

Kotlinx Coroutines 1.10.2 - Asynchronous programming
- Flow-based reactive streams
- Structured concurrency
- Multiplatform support

🧪 Testing

Kotlin Test - Multiplatform testing framework
Kotlinx Coroutines Test 1.10.2 - Coroutines testing utilities
Turbine 1.2.1 - Flow testing library
Compose UI Test - Compose UI testing
JUnit 4 - Testing framework
Espresso - Android UI testing
54 Tests - Unit, UI, and Integration tests

📦 Serialization

Kotlinx Serialization 1.9.0 - JSON serialization/deserialization

📐 Build Tools

Gradle 8.13.0 - Build system
Kotlin 2.2.21 - Programming language
Android Gradle Plugin 8.13.0 - Android build tools
KSP 2.3.0 - Kotlin Symbol Processing

🎯 Target Platforms

Android - Min SDK 24, Target SDK 36 ✅
iOS - Min iOS 14.1+ ✅
Desktop - JVM support ✅

🔧 Development Tools

Napier 2.6.1 - Multiplatform logging
Multiplatform Settings 1.3.0 - Settings management

🚀 CI/CD

Codemagic - iOS build and deployment pipeline
- Automated iOS framework builds
- Simulator testing on cloud
- Cross-platform CI/CD support

🏛️ Architecture

┌─────────────────────────────────────────────────────────┐
│                    Presentation Layer                    │
│  ┌─────────────┐  ┌──────────────┐  ┌───────────────┐  │
│  │   Compose   │  │  ViewModels  │  │   UI States   │  │
│  │     UI      │◄─┤    (MVI)     │◄─┤   & Intents   │  │
│  └─────────────┘  └──────────────┘  └───────────────┘  │
└────────────────────────┬────────────────────────────────┘
                         │
┌────────────────────────▼────────────────────────────────┐
│                     Domain Layer                         │
│  ┌─────────────┐  ┌──────────────┐  ┌───────────────┐  │
│  │  Use Cases  │  │    Models    │  │  Repositories │  │
│  │  (Business  │  │   (Entities) │  │  (Interfaces) │  │
│  │    Logic)   │  └──────────────┘  └───────────────┘  │
│  └─────────────┘                                         │
└────────────────────────┬────────────────────────────────┘
                         │
┌────────────────────────▼────────────────────────────────┐
│                      Data Layer                          │
│  ┌─────────────┐  ┌──────────────┐  ┌───────────────┐  │
│  │  Repository │  │  Remote API  │  │  Local Cache  │  │
│  │     Impl    │─►│    (Ktor)    │  │  (SQLDelight) │  │
│  └─────────────┘  └──────────────┘  └───────────────┘  │
└─────────────────────────────────────────────────────────┘

Project Structure

composeApp/
├── src/
│   ├── commonMain/kotlin/
│   │   ├── data/
│   │   │   ├── remote/          # API service & DTOs
│   │   │   ├── local/           # SQLDelight database
│   │   │   └── repository/      # Repository implementations
│   │   ├── domain/
│   │   │   ├── model/           # Business models
│   │   │   ├── repository/      # Repository interfaces
│   │   │   └── usecase/         # Business logic use cases
│   │   ├── presentation/
│   │   │   ├── viewmodel/       # ViewModels (MVI)
│   │   │   └── uistates/        # UI States & Intents
│   │   ├── ui/
│   │   │   ├── view/            # Compose screens
│   │   │   ├── components/      # Reusable components
│   │   │   ├── theme/           # Theme & styling
│   │   │   └── navigation/      # Navigation setup
│   │   └── di/                  # Koin modules
│   │
│   ├── androidMain/kotlin/      # Android-specific code
│   ├── desktopMain/kotlin/      # Desktop-specific code
│   ├── iosMain/kotlin/          # iOS-specific code (Coming soon)
│   │
│   ├── commonTest/kotlin/       # Unit tests
│   │   ├── viewmodel/           # ViewModel tests
│   │   └── repository/          # Repository tests
│   │
│   └── androidInstrumentedTest/ # UI & Integration tests
│       ├── ui/                  # Compose UI tests
│       └── integration/         # E2E tests
│
└── build.gradle.kts

🚀 Getting Started

Prerequisites

Android Studio Hedgehog (2023.1.1) or newer
JDK 17 or higher
Android SDK with API level 36
Kotlin 2.2.21

Installation

Clone the repository

git clone https://github.com/OmarLkhalil/valorantui.git
cd valorantui

Open in Android Studio
- Open Android Studio
- Select "Open an Existing Project"
- Navigate to the cloned directory
Sync Gradle

./gradlew sync

Run the app
- Select your target device/emulator
- Click the "Run" button or press Shift + F10

Build Variants

# Build Android APK
./gradlew :app:assembleDebug

# Build Desktop App
./gradlew :composeApp:run

# Build iOS Framework
./gradlew :composeApp:linkDebugFrameworkIosSimulatorArm64

# Open iOS project in Xcode
open iosApp/iosApp.xcodeproj

🍎 iOS Development

The iOS app was successfully built and tested on Desktop using Codemagic CI/CD platform.

Requirements for iOS development:

macOS with Xcode installed
Kotlin Multiplatform Mobile plugin
CocoaPods (optional)

CI/CD Setup:

Automated iOS builds via Codemagic
Simulator testing on cloud infrastructure
Distribution via App Store Connect (coming soon)

🧪 Testing

The project includes comprehensive test coverage across all layers:

Run Tests

# Run all unit tests
./gradlew test

# Run Android unit tests
./gradlew :composeApp:testDebugUnitTest

# Run Android UI tests (requires emulator/device)
./gradlew :composeApp:connectedAndroidTest

# Run specific test class
./gradlew :composeApp:testDebugUnitTest --tests "*AgentsViewModelTest"

Test Coverage

27 Unit Tests - ViewModels & Repositories
21 UI Tests - Compose UI components
6 Integration Tests - End-to-end user flows
Total: 54 Tests ✅

Test Structure

commonTest/
├── presentation/viewmodel/
│   ├── AgentsViewModelTest.kt          (9 tests)
│   └── AgentDetailsViewModelTest.kt     (9 tests)
└── domain/repository/
    └── AgentsRepositoryTest.kt         (9 tests)

androidInstrumentedTest/
├── ui/view/
│   ├── AgentsScreenComposeTest.kt       (9 tests)
│   └── AgentDetailsScreenComposeTest.kt (12 tests)
└── integration/
    └── AgentsIntegrationTest.kt         (6 tests)

♿ Accessibility

This app is built with accessibility in mind and follows WCAG 2.1 Level AA and EAA (European Accessibility Act) guidelines to ensure everyone can use it.

✅ Compliance Standards

✅ WCAG 2.1 Level AA - Web Content Accessibility Guidelines
✅ EAA Compliant - European Accessibility Act requirements
✅ TalkBack Ready - Full screen reader support for Android
✅ Android Accessibility Scanner - Tested and verified

🎯 Accessibility Features

1. Screen Reader Support (TalkBack)

// Every interactive element has proper labels
.semantics {
    contentDescription = "Weapon upgrade levels section, 3 levels available"
}

✅ Clear and descriptive labels for all UI elements
✅ Proper heading structure with heading() semantics
✅ Logical navigation order
✅ Meaningful content descriptions

2. Touch Target Sizes

✅ Minimum 48dp touch targets for all interactive elements
✅ Adequate spacing between clickable items
✅ Easy to tap buttons and cards

3. Dynamic Font Scaling

// All text uses Theme typography
Text(
    text = "Weapon Name",
    style = Theme.typography.body16  // Scales with system settings
)

✅ Supports system font size settings (100% - 300%)
✅ No hardcoded font sizes
✅ Maintains layout integrity at all scales

4. Color Contrast

✅ Minimum 4.5:1 contrast ratio for normal text
✅ Minimum 3:1 contrast ratio for large text
✅ Works in both Light and Dark themes
✅ Theme-based colors ensure consistent contrast

5. Non-Color Dependent Content

// Icons + Text labels
Row {
    Text(text = "🎯")  // Icon
    Text(text = "Category")  // Label
    Text(text = "Heavy Weapons")  // Value
}

✅ Information not conveyed by color alone
✅ Icons accompany text labels
✅ Clear visual hierarchies

6. Alternative Input Methods

// Custom actions for gesture alternatives
customActions = listOf(
    CustomAccessibilityAction("Pause auto-rotation") { ... },
    CustomAccessibilityAction("Rotate left") { ... },
    CustomAccessibilityAction("Rotate right") { ... }
)

✅ All gestures have accessibility alternatives
✅ Custom accessibility actions for complex interactions
✅ Keyboard navigation support

7. Content Structure

✅ Proper semantic headings
✅ Logical content order
✅ Screen reader-friendly navigation
✅ mergeDescendants for complex components

🧪 Accessibility Testing

The app has been tested with:

TalkBack (Android Screen Reader)

# Enable TalkBack
Settings → Accessibility → TalkBack → On

Android Accessibility Scanner
- Install from Play Store
- Scan all screens
- Fix issues identified
Manual Testing
- Font scaling: 100%, 200%, 300%
- Color contrast verification
- Touch target testing
- Screen reader navigation

📋 WCAG 2.1 Checklist

Criterion	Level	Status
1.1.1 Non-text Content	A	✅
1.3.1 Info and Relationships	A	✅
1.4.3 Contrast (Minimum)	AA	✅
1.4.4 Resize Text	AA	✅
1.4.11 Non-text Contrast	AA	✅
2.1.1 Keyboard	A	✅
2.4.6 Headings and Labels	AA	✅
2.5.5 Target Size	AAA	✅
3.2.4 Consistent Identification	AA	✅
4.1.2 Name, Role, Value	A	✅

🌍 Why Accessibility Matters

Making apps accessible ensures that everyone, regardless of ability, can:

Browse and enjoy Valorant content
Navigate independently with screen readers
Customize text sizes for comfortable reading
Use the app with assistive technologies

Accessibility is not optional—it's a fundamental right. ✊

📱 Features in Detail

🎯 Agents Screen

Grid layout with agent cards
Beautiful portraits with role indicators
Smooth shared element transitions
Pull-to-refresh support
Offline caching

🔍 Agent Details

Full agent information
Abilities showcase with icons
Animated ability descriptions
Role and background information
Swipe gestures for navigation

🔫 Weapons Screen

Complete weapon database
Weapon stats and damage ranges
Skin collections
Interactive 3D preview (Coming soon)
Filter by category

🎨 Theme System

Light & Dark mode support
Smooth wipe transition animation
Persistent theme preference
System theme follow option
Custom color schemes

🗺️ Roadmap

v1.0.0 - Current ✅

v1.1.0 - Coming Soon 🚀

v2.0.0 - Future

🤝 Contributing

Contributions are welcome! Here's how you can help:

Fork the project
Create your feature branch (git checkout -b feature/AmazingFeature)
Commit your changes (git commit -m 'Add some AmazingFeature')
Push to the branch (git push origin feature/AmazingFeature)
Open a Pull Request

Development Guidelines

Follow Kotlin coding conventions
Write tests for new features
Update documentation
Use meaningful commit messages
Keep PRs focused and small

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

Valorant API - For providing the awesome API
Riot Games - For creating Valorant
Compose Multiplatform - For the amazing UI framework
JetBrains - For Kotlin and IntelliJ IDEA

📞 Contact

Developer - @OmarLkhalil

Email - omarkkhalil12@gmail.com

Project Link - https://github.com/OmarLkhalil/valorantui

⭐ Star this repo if you like it!

Made with ❤️ using Compose Multiplatform (CMP)

Name		Name	Last commit message	Last commit date
Latest commit History 74 Commits
.github/workflows		.github/workflows
.idea		.idea
.kotlin/metadata		.kotlin/metadata
app		app
composeApp		composeApp
fastlane		fastlane
gradle		gradle
iosApp		iosApp
screenshots		screenshots
.env.example		.env.example
.gitignore		.gitignore
Gemfile		Gemfile
LICENSE		LICENSE
README.md		README.md
azure-pipelines.yml		azure-pipelines.yml
build.gradle.kts		build.gradle.kts
codemagic.yaml		codemagic.yaml
gradle.properties		gradle.properties
gradlew		gradlew
gradlew.bat		gradlew.bat
settings.gradle.kts		settings.gradle.kts

Folders and files

Latest commit

History

Repository files navigation

🎮 Valorant UI - Kotlin Multiplatform

📱 About

✨ Features

📸 Screenshots

📱 Android

🖥️ Desktop (JVM)

🍎 iOS

🛠️ Tech Stack

🎨 UI Framework

🏗️ Architecture & Patterns

🔌 Dependency Injection

🌐 Networking

💾 Local Storage

🧵 Concurrency

🧪 Testing

📦 Serialization

📐 Build Tools

🎯 Target Platforms

🔧 Development Tools

🚀 CI/CD

🏛️ Architecture

Project Structure

🚀 Getting Started

Prerequisites

Installation

Build Variants

🍎 iOS Development

🧪 Testing

Run Tests

Test Coverage

Test Structure

♿ Accessibility

✅ Compliance Standards

🎯 Accessibility Features

1. Screen Reader Support (TalkBack)

2. Touch Target Sizes

3. Dynamic Font Scaling

4. Color Contrast

5. Non-Color Dependent Content

6. Alternative Input Methods

7. Content Structure

🧪 Accessibility Testing

📋 WCAG 2.1 Checklist

🌍 Why Accessibility Matters

📱 Features in Detail

🎯 Agents Screen

🔍 Agent Details

🔫 Weapons Screen

🎨 Theme System

🗺️ Roadmap

v1.0.0 - Current ✅

v1.1.0 - Coming Soon 🚀

v2.0.0 - Future

🤝 Contributing

Development Guidelines

📄 License

🙏 Acknowledgments

📞 Contact

⭐ Star this repo if you like it!

About

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Uh oh!

Contributors

Uh oh!

Languages

Packages