Skip to content

This repository contains the technical test to put into practice the knowledge acquired about Android, Kotlin, Clean Architecture, Jetpack Compose, Retrofit and much more. I hope you enjoy it!

License

Notifications You must be signed in to change notification settings

AlvaroErd/MarvelSuperHeroes

Repository files navigation

Marvel App Logo

MarvelSuperHeroes 🦸‍

This repository contains the technical test to put into practice the knowledge acquired about Android, Kotlin, Clean Architecture, Jetpack Compose, Retrofit and much more. I hope you enjoy it!

Preview 📱

Marvel Superheroes App presentation


Marvel Superheroes App functions


Marvel Superheroes App theme modes


Marvel Superheroes App Extra features

Marvelsuperheroes.Tour.mp4

Built With 🔨

  • Android SDK - Create an Android App
  • Kotlin - Develop Android apps with Kotlin
  • Hilt - Dependency injection
  • Coroutines - Coroutines
  • Flow - Coroutine component to implement reactive programming
  • Jetpack compose - Jetpack compose kit to build the UI
  • Navigation compose - NavGraph for navigation
  • Material Design - Material components for the UI
  • Room - A persistence library that provides an abstraction layer over SQLite
  • Paging 3.0 - Implementation of the Paging
  • Retrofit - Retrofit to receive data from Internet
  • Coil - Library to load images
  • Lottie - Library to load animated vectors

Features 🧩

  • An onboarding page describing the purpose of the app
  • Search Bar to filter superheroes by name
  • Infinite scroll of the 1000+ marvel superheroes
  • The home screen cards show a lot of information about the superhero without having to go into detail
  • A striking interface with colors, fonts and shapes closely related to the Marvel universe
  • A character detail screen with a lot of information where you can see his full description, a button to see the image in full screen an a carousel of images where you can see the comics in which he/she/it has appeared
  • The app can storage the data in his own database so you can use it without internet
  • There is an easter egg. Try to find it! Hint: "The magic number is 5: five clicks lead to glory in the world of superheroes."

Architecture 🏛️

  • Build entirely in Kotlin
  • Clean Architecture with 5 layers. Datasource -> Data -> Domain <- App ( Presentation) and Model. There are no modules but each layer is intended to depend only on the corresponding one.
  • SOLID principles

Design 🎨

  • Support dark, light and auto theme with a dedicated button
  • Designed with components from Material 3 but manually modified to follow the Marvel style
  • Custom Android icon
  • Custom Splash Screen
  • Custom icons for the superhero properties (handmade icon of the event, comic and serie)
  • Google font typography (Roc Grotesk)
  • Custom theme with colors, spacing, shapes, etc to match with the Marvel universe
  • Custom dimens, shapes, spacings and colors related to Material Theme
  • Entry and exit animations of each view and some components
  • Long texts have a displacement animation so that they can be read in full without having to go into detail
  • A library to show the error capture in logcat inside the app, only for develop pourposes
  • A bunch of composables as a private repository
  • Personal tip! Check the app in dark mode 😎

Others 👾

  • Fully build in jetpack compose
  • Custom mappers between RemoteModel, CacheModel and DomainModel
  • Different mocks to show the preview with jetpack
  • Custom Loading with a lottie animation
  • Custom Error message
  • Design with accessibility in mind (every item has a content description and great contrast)
  • The texts change depending on whether they are singular or plural elements
  • The date has been parsed to a cleaner and more readable format
  • Invokes a function that converts both marvel api keys and gives you the hash without you having to calculate it
  • Follow the Gitflow methodology to create branches, push, merge, etc.
  • The app has differents names and icons depend on the build variant. (Debug = DEBUG Marvel SuperHeroes with the logo in orange and Release = Marvel SuperHeroes with the logo in red)
  • The app shows when you lost internet and when you recover it.
  • The models are parcelable

Known bugs to fix 😅

  • The api call makes too many requests and exceeds the set limit (Fixed)
  • The splash screen is only compatible with android 12 onwards (Fixed)
  • Gaussian blur of the background image in the main view is only supported on android 12 onwards (Fixed)
  • The searchbar does not filter by name (Fixed)
  • Maybe when there are more than 999 elements in the icons of the main view it will cut (Fixed)
  • There is too slow a reload between Loading and UI display in the home screen (Fixed)
  • Every time you travel back from the detail view, the view is reloaded. (Problem with Paging 3 andrememberSaveables) (Fixed)
  • No text is selectable and could be interesting for the user (Fixed)
  • Detail view comics are not an infinite list (Fixed)
  • You can't zoom in on the images (Fixed)
  • Does not support horizontal orientation (In consideration)

How to run the application 🏗️

As long as this application is kept with moderate use, I have added my own apikey and private apikey in the gradle.properties file.

If you don't find it added, you can put your own api key and private api key with the following format:

API_KEY_PUBLIC=11111111111 API_KEY_PRIVATE=222222222222222

You can provide your own api key from here Marvel docs.

License ⚖️

MIT License

Author 🧑‍💻

Álvaro Erdociaín Tirado Android Mobile developer E-mail: [email protected] Linkedin Github

About

This repository contains the technical test to put into practice the knowledge acquired about Android, Kotlin, Clean Architecture, Jetpack Compose, Retrofit and much more. I hope you enjoy it!

Resources

License

Stars

Watchers

Forks

Packages

No packages published