Required installation

Below there are a few instructions about mandatory commands to be run in order to facilitate the work such as using watchdog to build the assets(images/svg-images/strings) as variables such like Android R class and it will work on run time using python watchdog package also I added [feature-name] zip file which contains the main template for easily create a new feature and give it a name via command line and it will hold full feature archtecture(Presentation-Domain-Data) in few seconds.

Click here to find instructions to install python for different operating systems.

Intall watchdog

Click here for installing python watchdog module for listening and updating assets in interactive way.

pip3 install watchdog

Install pyyaml

pip3 install pyyaml

Linting

It's required as a part of the pipeline to pass all linting instructions so in order to check the issues before pushing to the online repo.

flutter analyze

Generate DI classes

we use Injectable to handle dependency injection through the app and generate dependency classes.

flutter packages pub run build_runner build --delete-conflicting-outputs

Generate assets

Under the assets folder, there is assets-build.py script that generates dart files under lib/resources folder for Images and Strings, that mimics R class on Android.

python3 assets/assets-build.py

Generate new feature

From terminal you can generate the whole feature architecture(Presentation-Domain-Data) by providing a name for the new feature.

python3 assets/build-new-feature.py

Multi Variants

Relying on Injectable, I defined Dio object based on the variant (dev/prod). I inject it on the run method by default as a dev, so It will return the responses from the MockAdapter which will return mocks inside the application. To connect to Microsoft APIs, define the variant as prod.

Clean Architecture

• Presentation layer (bloc pattern using flutter_bloc)
• Domain layer
• Data layer

Responsive design

I relay on handling master-details screen based on the screen size if tablet or web it will open as SplitView but for mobile master screen being handled as list/grid or accounts and when one is selected it opens on another screen used split_view to handle it. Both Mobile or tablet/web are relying on the same bloc to provide the state for them but behaves differently based on the device screen size.

Light/Dark Modes on realtime

Relying on bloc, I started from Material app with Settings Bloc provider to be able to handle the global settings changes like theming on real-time.

Multi-Languages

Relying on bloc, I started from Material app with Settings Bloc provider to be able to handle the global settings changes like change language on real-time.

I added 2 languages for now English and Arabic.

Testing

Using multiple techniques

1. Mockito for injecting specific reponses from the repository.
2. bloc_test for testing the returned states after emitting specific events to the bloc.
3. Dart test for testing widgets and components.

Docker

Using Docker file step by step:

1. Pull debian:latest image.
2. Install apt packages to use them in download and install flutter SDK.
3. Download Flutter SDK.
4. Setup the PATH.
5. Copy the aplication to the container.
6. Build flutter web.
7. Install the server image nginx.
8. Copy the build web directory to the server path.

building the container via docker command build

docker build -t rentready .

starting the container on port 1111:80

docker run -p 1111:80 --name rentready

Networking

Mainly we have 2 APIs

1. Microsoft token API
2. Accounts API

On splash screen I call the token API to get the token after splash animation. To generate the token i built an applicationa and generated secret key to loggin using it via OAuth 2.0.

Following the this tutorial to give the application required permissions to be accessable via APIs.

When API returns with Access token, I embed it on Dio headers on order to start calling the second API.