Clean Architecture + TDD + SOLID + Dependency Injection + GitFlow + Mobx

Overview

Clean Architecture + TDD + SOLID + Dependency Injection + GitFlow + Mobx

shopping_app_final_result

Flutter Interview Challenge

This app is part of an interview process. It took me about one week to finish. I hope you enjoyed it and I'm looking forward to get your feedback about it.

The Flutter Challenge

We have our partners need to manage their store's shopping cart and they want this solution to be a mobile app.

So, once we know how to create Flutter mobile apps, we just need to create it as the following:

  • The first page of the app will present a list of products ( the data source is all up to you, can be a backend service or a local storage, you decide ).
    • Each product is a card, and the screen presentation for all the cards is also up to you to decide.
    • Each card has a add button and a remove button.
    • The page also haave a floating button representing the shopping cart with the number of products that are in the cart with no number being shown if the cart is empty
  • When we touch the floating button we navigate to a new screen that show us all the items in the cart where each item is represented for the same card bellow
    • In the cart page we may have a button to empty the cart and be automatically redirected to the products page.

Development

Now I'll go though the development phase.

Architecture

As developer we know that we should fight for the architecture, since I was working alone this fight was gone briefly. I've decide to go with Clean Architecture. The reasons included:

  • Since the requirements aren't well defined, this architecture will make sure that changes can be hold with ease.
  • Scalability will not be problem
  • Easy to setup tests
  • No need to think about data sources at the beginning of the project
  • No need to worry about state management at the beginning of project
  • so on

Test Methodology

I've chosen TDD (Test Driven Development) because it's really great. Because of time constraints I have worked just with unit tests.

Entities and Use Cases

The next step on the development phase was define entities and use cases.

Entities

  • Cart
  • CartItem
  • Product

Use Cases

  • AddItemToCart
  • RemoveItemFromCart
  • GetAllProducts
  • ClearCart
  • RetrieveCart

Version Control

For versioning my code I'd decide to use Git and GitFlow.

Dependency Injection

In order to inject dependencies I've chosen Get_it just because I've used in the past and it proved to work great.

State Management

I've chosen Mobx because I got a suggestion to use it. Before this project I didn't knew nothing about this sate management solution and that's the reason why there are some boilerplate code in my controllers.

Mockups

After finishing the data and domain layers and after worked on the controllers from the Presentation layer I did create some simple mockups using Figma.

shopping_app_mockups

Mockups

UI

After creating the mockups I did create my pages, widgets and components. Then I integrate them with the controllers.

Problem

Besides having some boilerplate code on my controllers I have to mention one other problem related to the achitecture. If don't look closely to the source code, and even you do, you may not notice one 'small problem'. The fact is that I'm using my Dtos (children of my entities) inside my Domain. The thing is that Domain shouldn't know nothing about Data or Presentation layer. I've noticed this problem and decided to not solve it (because of time constraints).

How to Solve This

Solving 1

  • Create Dto interfaces in the Domain layer. Each Dto should accept their related Entity via constructor or via function argument.
  • Implement Domain's Dtos in the Data layer.
  • Then when needing some Json Serialization for instance, we should just use those Dtos.

Solving 2

Another way of solving this would be just puting the Dto logic directly inside the entity. This approach, otherwise, would be seen as a 'dirty' one by some people.

Final Result

I think that the final result is acceptable, considering the time constraints. What about you, plese, let me know.

shopping_app_final_result

You might also like...

Arisprovider - A mixture between dependency injection (DI) and state management, built with widgets for widgets

A mixture between dependency injection (DI) and state management, built with wid

Jan 9, 2022

MVC pattern for flutter. Works as state management, dependency injection and service locator.

MVC pattern for flutter. Works as state management, dependency injection and service locator.

MVC pattern for flutter. Works as state management, dependency injection and service locator. Model View Controller Here's a diagram describing the fl

Dec 12, 2022

Flutter getx template - A Flutter Template using GetX package for State management, routing and Dependency Injection

Flutter getx template - A Flutter Template using GetX package for State management, routing and Dependency Injection

Flutter GetX Template (GetX, Dio, MVVM) This Flutter Template using GetX package

Aug 27, 2022

A simple dependency injection plugin for Flutter and Dart.

A super simple dependency injection implementation for flutter that behaviours like any normal IOC container and does not rely on mirrors

Dec 13, 2022

A Dart dependency injection library aimed to be flexible, predictable and easy to use.

dino Dino is a Dart dependency injection library with optional code generation. It was inspired by DI in .NET and aimed to be flexible, predictable an

Dec 20, 2022

🎬 Ditonton App is a Flutter application built to demonstrate the use of modern development tools with best practices implementation like Modularization, BLoC, Dependency Injection, Firebase Analytics & Crashlytics, Sqlite, Testing, CI/CD, etc.

🎬 Ditonton App is a Flutter application built to demonstrate the use of modern development tools with best practices implementation like Modularization, BLoC, Dependency Injection, Firebase Analytics & Crashlytics, Sqlite, Testing, CI/CD, etc.

Ditonton App Features Movies (Now Playing, Popular, Top Rated) TV Show (On The Air, Popular, Top Rated) Watchlist Movies & TV Show Search Movies & TV

Aug 12, 2023

Flutter boilerplate with TDD architecture

flutter_tdd_architecture A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you

May 25, 2022

A movies app made with Flutter focused on solid software structure patterns.

A movies app made with Flutter focused on solid software structure patterns.

Flutter Movies App An application made with Flutter to practice the principles of Clean Architecture. Even being focused on architecture, the project

Dec 12, 2022
Owner
Vinicius Souza
A mobile developer which fell in love with Flutter and Dart.
Vinicius Souza
Flutter, Dart, TDD, Clean Architecture, SOLID e GetX

cep_search_clean_architecture A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to ge

Jadiel Santana 3 Feb 22, 2022
Flutter-clean-architecture - A simple flutter project developed with TDD and using Clean Architecture principles.

Clean Architecture This is a study project to practice TDD and a good approach of Clean Architecture for flutter projects. It is based on Reso Coder s

Luiz Paulo Franz 8 Jul 21, 2022
[Flutter SDK V.2] - Youtube Video is a Flutter application built to demonstrate the use of Modern development tools with best practices implementation like Clean Architecture, Modularization, Dependency Injection, BLoC, etc.

[Flutter SDK V.2] - Youtube Video is a Flutter application built to demonstrate the use of Modern development tools with best practices implementation like Clean Architecture, Modularization, Dependency Injection, BLoC, etc.

R. Rifa Fauzi Komara 17 Jan 2, 2023
COVID-19 application made with Flutter, following Test Driven Development (TDD) and Clean Architecture along with Internationalization with JSON.

Covid App COVID-19 application made with Flutter, following Test Driven Development (TDD) and Clean Architecture along with Internationalization with

Sandip Pramanik 4 Aug 4, 2022
Made with Clean architecture + TDD + GraphQL + flutter_bloc + CodeCov + GitHooks + GitHub Actions (CI/CD) and finally with 💙

Rick and Morty Info A simple app to demonstrate Clean Architecture with GraphQL and flutter_bloc Motivation In Martin Fowler's words, “Any fool can wr

Venkatesh Prasad 473 Dec 25, 2022
Flutter - Clean Architecture & TDD

Flutter - Clean Architecture & TDD Introducción Este proyecto consta de una aplicación móvil desarrollada en Flutter, la cual muestra información acer

Jorge Fernández 21 Oct 26, 2022
Flutterstarterproject - Clean Architecture Flutter starter project, using tdd + bloc

Flutter Starter Project Generated by the Nero Lab CLI ?? A Nero Lab Project crea

Muhammad Noerhidayatullah 12 Dec 8, 2022
Clean Architecture Project with TDD Approach

Clean-Architecture-Project-with-TDD-Approach Small project to implement TDD(Testing Driven Development) by applying SOLID and YAGNI and rules(Clean Ar

null 7 Jun 24, 2022
Flutter auth app with TDD Clean Architecture

Flutter App Auth ?? This is App with Auth Function like Login and Register. All API using reqres.in. This app also implementing Flutter Clean Architec

LazyCat Labs 73 Dec 29, 2022
Random Users app, developed with Flutter and using Clean Architecture, BLoC, TDD and Functional Programming.

random_users This project is a sample of how to build a Flutter application using de benefits of Clean Architecture, TDD and Functional Programming. G

Yago Nunes 3 Jul 21, 2022