Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/js-bhavyansh/anime_app

An anime app using Jetpack Compose, Kitsu API, and MVVM. Displays trending anime with shared element transitions. Includes splash and onboarding screens. Built with Kotlin and Hilt.
https://github.com/js-bhavyansh/anime_app

android anime coil dependency-injection hilt jetpack-compose kitsu-api kotlin mvvm-architecture shared-element-transition

Last synced: 3 days ago
JSON representation

An anime app using Jetpack Compose, Kitsu API, and MVVM. Displays trending anime with shared element transitions. Includes splash and onboarding screens. Built with Kotlin and Hilt.

Awesome Lists containing this project

README

        

# Anime App

This is an Android application that fetches and displays trending anime information using the Kitsu API. The app includes a splash screen, an onboarding screen, and uses the MVVM architecture. It also incorporates shared elements for smooth transitions between screens.

## Features

- Fetches trending anime information from the Kitsu API
- Splash screen
- Onboarding screen
- MVVM architecture
- Shared element transitions

## Libraries and Tools

- Jetpack Compose
- Kitsu API
- Hilt for Dependency Injection
- Coil for image loading
- kotlinx.serialization for navigation

## Screenshots
### Dark Mode :


First Screenshot
Second Screenshot

### Light Mode :


First Screenshot
Second Screenshot

## Getting Started

### Prerequisites

- Android Studio
- Kotlin

### Installation

1. Clone the repository:

```bash
git clone https://github.com/Bhavyansh03-tech/Anime_App.git
```

2. Open the project in Android Studio.
3. Build the project and run it on an emulator or a physical device.

## Code Overview

### ViewModel

`AnimeViewModel` is responsible for fetching anime details and holding the data for `AnimeScreen`.

```kotlin
@HiltViewModel
class AnimeViewModel @Inject constructor(
private val api: KitsuRepository
) : ViewModel() {

private var _anime = MutableStateFlow(null)
val anime = _anime.asStateFlow()

fun fetchAnime(id: Int) {
viewModelScope.launch {
_anime.update { api.getAnime(id) }
}
}
}
```

`TrendingAnimeViewModel` is responsible for fetching anime details and holding the data for `TrendingAnimeListScreen`.

```kotlin
@HiltViewModel
class TrendingAnimeViewModel @Inject constructor(
private val repository: KitsuRepository
) : ViewModel() {

private var _animeData = MutableStateFlow>(emptyList())
val animeData = _animeData.asStateFlow()

init {
viewModelScope.launch {
_animeData.update { repository.getTrendingAnime() }
}
}
}
```

`NavGraph SetUp`

```koltin
@OptIn(ExperimentalSharedTransitionApi::class)
@Composable
fun NavGraph(
startDestination: Screens
) {
val navController = rememberNavController()

SharedTransitionLayout {
NavHost(
navController = navController,
startDestination = startDestination
) {
navigation(
startDestination = Screens.OnboardingScreen
){
composable{
// Initializing the view model :->
val viewModel = hiltViewModel()

// Calling Onboarding Screen :->
OnboardingScreen(
event = viewModel::onEvent
)
}
}

navigation(
startDestination = Screens.HomeScreen
) {
composable {
TrendingAnimeListScreen(
onAnimeClick = { coverImage, id ->
navController.navigate(
Screens.AnimeScreen(id.toString(), coverImage.toString())
)
},
animatedVisibilityScope = this
)
}

composable {
val args = it.toRoute()

AnimeScreen(
id = args.id.toInt(),
coverImage = args.coverImage,
animatedVisibilityScope = this
)
}
}
}
}
}
```

## Contributing

Contributions are welcome! Please fork the repository and submit a pull request for any improvements or bug fixes.

1. Fork the repository.
2. Create your feature branch (`git checkout -b feature/your-feature`).
3. Commit your changes (`git commit -am 'Add some feature'`).
4. Push to the branch (`git push origin feature/your-feature`).
5. Create a new Pull Request.

## Contact

For questions or feedback, please contact [@Bhavyansh03-tech](https://github.com/Bhavyansh03-tech) on GitHub or connect with me on [LinkedIn](https://www.linkedin.com/in/bhavyansh03/).

---