eugeniotesio / pokedex

Pokedex

A flutter technical challenge made with ❤️ for MOONSHOT. The purpose of the challenge was consuming the https://pokeapi.co/ and show a paginated list of Pokemons and the details when these are clicked

Project Architecture

lib
├── core
│   ├── constants
│   │   ├── colors.dart
│   │   ├── fonts.dart
│   │   ├── sizes.dart
│   │   ├── styles.dart
│   │   ├── theme.dart
│   │   └── urls.dart
│   ├── l10n
│   ├── observables
│   ├── http_client
│   └── routing
├── features
│   └── feature
│       ├── data
│       │   ├── datasources # any remote or local data source
│       │   │   ├── remote_data_source.dart
│       │   │   └── local_data_source.dart
│       │   ├── models # deserealization clases used in data sources
│       │   │   └── feature_model.dart
│       │   ├── repositories # domain repositories implementations
│       │   │   ├── feature_repository_impl.dart
│       │   │   └── fake_repository_impl.dart
│       ├── domain
│       │   ├── entities # the data model used in presentation layer
│       │   │   └── feature.dart
│       │   ├── providers # uses_cases and repositories providers
│       │   │   ├── get_feature_provider.dart
│       │   │   └── feature_repository_provider.dart
│       │   ├── repositories # respository abstract contracts
│       │   │   └── feature_repository.dart
│       │   └── use_cases # clases representing the application uses cases
│       │       ├── save_feature.dart
│       │       └── get_feature.dart
│       ├── exceptions # feature level exceptions
│       │   └── some_exception.dart 
│       ├── presentation
│       │   ├── providers # presentation providers
│       │   │   ├── state
│       │   │   │   ├── feature_notifier.dart # providers notifiers
│       │   │   │   └── feature_state.dart # provider states
│       │       └── providers.dart 
│       │   ├── screens # the feature screens
│       │   │   ├── feature_screen.dart
│       │   │   ├── feature_desktop.dart # desktop view of feature_screen.dart
│       │   │   ├── feature_mobile.dart # mobile view of feature_screen.dart
│       │   │   └── feature_tablet.dart # tablet view of feature_screen.dart
│       │   └── widgets # specific components of the feature
│       │       └── some_widget.dart
│       └── _index_.dart # barrel file
├── shared # common components
│    ├── utils
│    │   ├── colorized.dart
│    │   ├── crypto.dart
│    │   ├── dialogs.dart
│    │   └── validator.dart
│    ├── image_manager # complex common features which can be divided in layers
│    │   ├── data 
│    │   ├── domain
│    │   └── presentation
│    └── widgets
└── main.dart

Call flow

Credits: https://resocoder.com/2019/08/27/flutter-tdd-clean-architecture-course-1-explanation-project-structure

Important: not all the features will have all the layers

Getting started

1. Install Flutter following https://docs.flutter.dev/get-started/install.

2. Check if you are all set:

   flutter doctor

3. Install dependencies

   flutter pub get

4. Open an Android or iOS emulator

5. Onces is opened, list the devices on flutter scope

   flutter devices

6. Run de project targeting the device name (2nd column), usually Android emulators ends with (emulator) and iPhone simulators ends with (simulator)

   flutter pub run -d <device_name>

Features

• Infinite list of pokemons fetched from https://pokeapi.co/api/v2/pokemon.
• Pokemon details screen.
• State managment with Riverpod.
• Use Hive for saving data and images on local store.
• CI/CD with GitHub Actions
• Live preview autodeployment.
• Offline mode.
• Scalable (Clean Architecture, S.O.L.I.D. principles, more than 150 linter rules).
• Change Pokemon image by using the Camera (desktop not supported).

Supported platforms

• Android (locally)
• iOS (locally)
• web (under development)

Screenshots

Live preview

https://pokedex-676eb.web.app/

@Carlos