🚀 Building a Fullstack App with dart_frog and Flutter in a Monorepo

A full-stack to-do app written in Flutter and dart_frog, using a mono repository and driven by melos.

Read the full article on saileshdahal.com.np

Packages

backend

The backend is built with dart_frog and is responsible for the server-side functionality of the app. It includes components such as controllers, request handlers, middlewares, services, and repositories for todo and user management.

The backend also implements JWT authentication to secure access to the application data. The data storage and retrieval is facilitated through a postgres database with the implementation of data sources and repositories from the data_source and repository packages.

The backend is equipped with end-to-end tests and tests for individual components to ensure its reliability and performance.

frontend

The frontend is written in Flutter and is responsible for the client-side functionality of the app. It includes all the necessary components for a smooth user experience, including UI elements, data management, network communication and more.

The frontend communicates with the backend to retrieve and manipulate data through the usage of data sources and repositories from the data_source and repository packages.

It implements jwt authentication and handles exceptions thrown by the backend gracefully through the use of the exceptions package.

models

The models package contains the data objects used in the app. It uses the freezed library to define the data models, including to-do and user models, as well as data transfer objects (DTOs). The package also includes data validation logic in the DTOs, making use of the primary keys defined in the typedefs package. This helps ensure the integrity of the data used throughout the application.

data_source

The data_source package contains the abstract contracts for all the data sources used in the application. These contracts define the interface for accessing and manipulating data stored in the application's database. The data_source package makes use of the typedefs and models packages to enforce data consistency and type safety. This package serves as a layer between the repository and the database, allowing the implementation details to be separated from the main application logic.

repository

The repository package provides a central location for data storage and retrieval. It includes abstract contracts to be implemented in the backend and frontend, and makes use of the models and typedefs packages.

This package uses either_dart to return either a valid response or a failure. The repository package is designed to provide a flexible and extensible data storage layer, allowing us to easily implement their own data sources and repositories while adhering to a consistent API. With its use of either_dart, it provides robust error handling and reporting capabilities, ensuring the stability and reliability of the app's data storage layer.

failures

The failures package contains the implementation of custom failures and error handling for the app. These failures are used by the repository package to return specific error messages for different scenarios such as database errors, network errors, invalid input, and unauthorized access.

typedefs

The typedefs package contains the various data types used in the app. It also includes the type mapper, which maps a given string to a specific type or returns a failure if the mapping is unsuccessful.

exceptions

The exceptions package includes custom exceptions for the app that can be thrown in case of certain errors or failures. These exceptions contain descriptive error messages and provide information about the type of error that occurred. They are used to provide more structured error handling and improve the overall error handling process in the app.

Getting Started

To run the app, clone the repository and follow the setup instructions for the backend and frontend. Once setup is complete, run the app and enjoy a simple to-do app experience.

Initial Setup

Setup Melos

To set up Melos, run the following command to activate Melos:

dart pub global activate melos

Once Melos is activated, run the following command to bootstrap it:

melos bootstrap

This command will download and install all the required dependencies for Melos.

Setup backend

dart_frog is the server-side framework used in the backend of our app. To set up dart_frog, run the following command:

dart pub global activate dart_frog_cli

This command will download and install the dart_frog CLI, which can be used to run dart_frog projects. Once dart_frog is installed, you can run the todo app's backend.

melos run backend:dev

Setup frontend

To set up the frontend, you need to install the Flutter SDK on your machine. You can follow the instructions on Flutter's official website to install Flutter.

To run the Flutter app, use the following command in the frontend directory:

flutter run