# 🚀 Building a Fullstack App with dart_frog and Flutter in a Monorepo - Part 1

# 💡 Introduction

This tutorial will create a full-stack to-do application using Dart and Flutter in a monorepo setup.

> A monorepo is a version control repository containing multiple projects with common code.

This allows for easier management and collaboration on projects within a single repository. We will share a common code between the frontend and backend of our to-do application, like interfaces, data models e.t.c.

The application's backend will be built using [dart\_frog](https://pub.dev/packages/dart_frog), while the front end will be developed using Flutter.

This tutorial teaches you how to:

*   🧰 Set up a monorepo
    
*   💻 Create a full-stack Dart Flutter application
    
*   🔗 Manage and share common code between front-end and back end
    
*   📝 Build a to-do application with CRUD functionality
    
*   🏁 Complete the tutorial with a functional to-do application
    

# Let's Go! 🚀

Before we can build our full-stack to-do application, we must set up the necessary tools and dependencies. First, we will install [melos](https://pub.dev/packages/melos).

## Setup [melos](https://docs.page/invertase/melos) 🛠️

> [Melos](https://docs.page/invertase/melos) is a library that will be used to set up and manage monorepo projects.

To install [melos](https://docs.page/invertase/melos), open a terminal and run the following command:

```bash
dart pub global activate melos
```

This command will install Melos globally, allowing us to use it in any project.

Create a `melos.yaml` file and add the below content to set up our full-stack to-do application.

```yaml
name: full_stack_todo_dart
packages:
  - /**/pubspec.yaml
```

The `packages` field defines the packages that are part of the monorepo. In this case, we are using the `/**/pubspec.yaml` pattern, which tells Melos to search for all `pubspec.yaml` files in the project and consider them as packages.

## Hopping into backend with [dart\_frog](https://pub.dev/packages/dart_frog) 🐸

To handle the server-side logic of our full-stack to-do application, we will use a library called [dart\_frog](https://pub.dev/packages/dart_frog).

> [dart\_frog](https://pub.dev/packages/dart_frog) is a lightweight web framework for Dart that makes it easy to build server-side applications.

To install [dart\_frog](https://pub.dev/packages/dart_frog), open a terminal and run the following command:

```bash
dart pub global activate dart_frog_cli
```

To create a new dart\_frog project, open a terminal and navigate to the directory where you want to create the project. Then, run the following command:

```bash
dart_frog create backend
```

The command "dart\_frog" creates a new project with necessary files and directories and adds the dependency "dart\_frog" to the project's "pubspec.yaml" file.

Once you have created a new dart\_frog project and set up the backend of your full-stack to-do application, you can add a Melos script to run the server. To do this, open the `melos.yaml` file in the root directory of your project and add the following content:

```yaml
scripts:
  backend:dev:
    run: melos exec -c 1 --fail-fast -- "dart_frog dev"
    description: Starts the dev server for the backend
    select-package:
      flutter: false
```

Once these steps have been completed, you can run the `backend:dev` script by opening a terminal and navigating to the root directory of your project. Then, run the following command `melos run backend:dev`

This will start the dev server for the backend of your to-do application. You can then start building the server-side logic of your application using dart\_frog.

```plaintext
✓ Running on http://localhost:8080 (0.1s)
```

If you see an output similar to the one above after running the `melos run backend:dev` command means that the dev server for the backend of your full-stack to-do application has been successfully started.

If you open `http://localhost:8080`, you should be greeted with `Welcome to Dart Frog!`

> Stay tuned for part-2 ...