Pokedex_Compose - GitLite

KO | EN

gitlite — search

#codex #markdown #shell #bash #mysql #ios #ai #github #data-science #awesome-list

Pokedex_Compose

(★ 32)

A modern Pokédex app for Android built with the latest technologies recommended by Google. This project showcases a clean, scalable architecture and a fluid user interface using Jetpack Compose.

파일 탐색기

ZIP 다운로드

- - Project_Default.xml
- .gitignore
- AndroidProjectSystem.xml
- appInsightsSettings.xml
- compiler.xml
- deploymentTargetDropDown.xml
- deploymentTargetSelector.xml
- deviceManager.xml
- gradle.xml
- kotlinc.xml
- markdown.xml
- migrations.xml
- misc.xml
- other.xml
- runConfigurations.xml
- vcs.xml
- .gitignore
- build.gradle.kts
- proguard-rules.pro
- example_gif.gif
- example_gif1.gif
- example_gif2.gif
- example_gif3.gif
- Screenshot_20240511_012335.png
- Screenshot_20240511_012348.png
- Screenshot_20240511_012400.png
- Screenshot_20240816_221338.png
- Screenshot_20240816_221449.png
- Screenshot_20251214_201927.png
- - gradle-wrapper.jar
  - gradle-wrapper.properties
- libs.versions.toml
.gitignore
build.gradle.kts
gradle.properties
gradlew
gradlew.bat
LICENSE
README.md
settings.gradle.kts

# CDN으로 사용하기

jsDelivr

jsDelivr는 공개 GitHub 리포지토리를 별도 설정 없이 CDN으로 즉시 서빙합니다. 버전과 파일을 고르면 웹페이지에 바로 붙일 수 있는 링크와 예시 코드가 만들어집니다.

버전

파일

링크

예시

# 프로젝트 배지

Linktree 바로가기
Site 바로가기
X 바로가기
LinkedIn 바로가기
Medium 바로가기
Mastodon 바로가기
Bluesky 바로가기
Dev.to blog 바로가기
YouTube 바로가기
Google Developer Profile 바로가기

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

A modern Pokédex app for Android built with the latest technologies recommended by Google. This
project showcases a clean, scalable architecture and a fluid user interface using Jetpack Compose.

> [!IMPORTANT]  
> A similar project is also available in Flutter (Dart)!  
> 👉 **[Pokedex_Flutter](https://github.com/NicosNicolaou16/Pokedex_Flutter)** 👈

## ✨ Features

* **Modern UI:** Built entirely with **Jetpack Compose** for a declarative and intuitive UI.
* **Dynamic Theming:** Extracts prominent colors from Pokémon images using the **Palette API** to
  create dynamic and immersive detail screens.
* **Seamless Transitions:** Implements the new **Shared Element Transition** for smooth navigation
  between the list and detail views.
* **Offline Support:** Caches Pokémon data using **Room Database**, allowing the app to work
  offline.
* **Efficient Networking:** Fetches data from the [PokéAPI](https://pokeapi.co/) using **Retrofit**.
* **Optimized Performance:** Leverages **Coroutines** for asynchronous operations, **KSP** for
  faster annotation processing, and **R8** for code shrinking.
* **Scalable Architecture:** Follows the **MVVM** pattern with a repository, ensuring a clean
  separation of concerns and maintainable code.
* **Navigation:** Leverages **Navigation 3** and its **Type Safety** features for robust,
  compile-time checked, and error-free navigation.

## 📸 Screenshots & Demos

<p align="left">
  <img src="examples/Screenshot_20240511_012335.png" alt="Pokemon List Screen" height="500" width="200">
  <img src="examples/Screenshot_20240816_221338.png" alt="Pokemon Detail Screen" height="500" width="200">
  <img src="examples/Screenshot_20240816_221449.png" alt="Pokemon Stats" height="500" width="200">
  <img src="examples/example_gif1.gif" alt="List to Detail Transition" height="500" width="200">
  <img src="examples/example_gif2.gif" alt="Scrolling and Searching" height="500" width="200">
</p>
<p align="left">
  <img src="examples/Screenshot_20251214_201927.png" alt="Landscape Detail View" height="500" width="400">
  &nbsp;
  <img src="examples/example_gif3.gif" alt="Landscape to Portrait Transition" height="500" width="400">
</p>

## 🛠️ Tech Stack & Libraries

This project is built with **[Kotlin](https://kotlinlang.org/docs/getting-started.html)** and
utilizes a variety of modern Android libraries and tools:

- **UI:** [Jetpack Compose](https://developer.android.com/develop/ui/compose), [Coil](https://coil-kt.github.io/coil/compose/) (
  Image
  Loading), [Palette API](https://developer.android.com/develop/ui/views/graphics/palette-colors)
- **Architecture:** [MVVM](https://developer.android.com/topic/architecture#recommended-app-arch), [UI State Management](https://developer.android.com/topic/architecture/ui-layer/events#handle-viewmodel-events)
- **Asynchronicity:** [Kotlin Coroutines](https://kotlinlang.org/docs/coroutines-overview.html), [Kotlin KTX](https://developer.android.com/kotlin/ktx)
- **Navigation:** [Navigation Compose 3](https://developer.android.com/guide/navigation/navigation-3), [Navigation Type Safety](https://medium.com/androiddevelopers/navigation-compose-meet-type-safety-e081fb3cf2f8), [Shared Element Transition](https://developer.android.com/develop/ui/compose/animation/shared-elements)
- **Data:** [Retrofit](https://square.github.io/retrofit/) (
  Networking), [Room](https://developer.android.com/training/data-storage/room), [Room 3](https://developer.android.com/kotlin/multiplatform/room#migrate-from-support-sqlite) (Database)
- **Dependency Injection:** [Hilt](https://dagger.dev/hilt/)
- **Build & Optimization:** [KSP](https://developer.android.com/build/migrate-to-ksp), [R8](https://developer.android.com/build/shrink-code)
- **Custom Components:** [PercentageWithAnimation](https://github.com/NicosNicolaou16/PercentagesWithAnimationCompose)
  for displaying Pokémon stats built by [@NicosNicolaou16](https://github.com/NicosNicolaou16).

## 🏗️ Architecture

The project follows **Clean Architecture** principles combined with **MVVM (Model-View-ViewModel)** and **Unidirectional Data Flow (UDF)**. This ensures a clean separation of concerns, making the codebase scalable, maintainable, and testable.

### Project Structure

```
├── data/
│   ├── di/                 # Hilt Modules
│   ├── network/            # Retrofit DTOs and API Service
│   ├── room_database/      # Room Entities and DAOs
│   ├── repository_impl/    # Repository Implementations
│   └── mappers/            # Data transformation logic
├── domain/
│   └── repositories/       # Repository Interfaces
├── presentation/
│   ├── navigation/         # Navigation 3 setup and Navigator
│   ├── pokemon_list/       # List feature (Screen, ViewModel, State)
│   └── pokemon_details/    # Detail feature (Screen, ViewModel, State)
├── ui/
│   └── theme/              # Compose Theme (Color, Type, etc.)
└── utils/                  # Extension functions and generic classes
```

## 🔧 Versioning

- **Target SDK:** **36**
- **Minimum SDK:** **29**
- **Kotlin Version:** **2.4.0**
- **Gradle Version:** **9.2.1**

## 📚 APIs & References

### Data Sources

- **Primary API:** [PokéAPI (pokeapi.co)](https://pokeapi.co/)
- **Image Sprites:** [PokeAPI/sprites on GitHub](https://github.com/PokeAPI/sprites)

### Articles & Inspiration

- **Shared Element Transitions:**
    - [Shared Element Transitions in Jetpack Compose](https://fvilarino.medium.com/shared-element-transitions-in-jetpack-compose-8f553078101e)
    - [Building a Shared Element Transition in Jetpack Compose](https://getstream.io/blog/shared-element-compose/)
- **Type-Safe Navigation:**
    - [Navigation-Compose meets Type-Safety](https://medium.com/androiddevelopers/navigation-compose-meet-type-safety-e081fb3cf2f8)
- **UI/UX Design Inspiration:**
    - [Dribbble - Pokedex App by Alexandr](https://dribbble.com/shots/6540871-Pokedex-App) (Note:
      Used as inspiration, not a direct copy)
- **App Icon:**
    - Derived
      from [Fandom Ideas Wiki](https://ideas.fandom.com/wiki/Pok%C3%A9_Ball_Pok%C3%A9mon_Ideas_(Super_Smash_Bros._series)?file=Pok%C3%A9_Ball_Redraw_by_oykawoo.png)

## ⭐ Stargazers

If you enjoy this project, please give it a star!
Check out all the stargazers
here: [Stargazers on GitHub](https://github.com/NicosNicolaou16/Pokedex_Compose/stargazers)

## 🙏 Support & Contributions

This project is actively maintained. Feedback, bug reports, and feature requests are welcome! Please feel free to **open an issue** or submit a **pull request**.