Fullstack Flutter and MongoDB Cloud Mini-Course | FREE TO WATCH!!!
Tags: dart, flutter, mongodb, webdev
Published: 2020-10-06 10:33:46

After numerous requests to produce a Flutter and MongoDB combo, I've devoted the time to produce a fullstack Flutter and MongoDb Cloud mini-course. We will build a contacts list application that manages contacts in MongoDB Cloud Atlas database. We will also implement a Dart backend server for talking to MongoDB datastore. This app will be built for both Flutter mobile and web platforms.

{% youtube juKDXPk7kU4 %}

## Getting started

You will need a [MongoDB Cloud Account](https://www.mongodb.com/cloud) to create a Project and Cluster. This will give us an environment with MongoDB installed and a user to connect to that MongoDB instance.

The contents of the mini-course are as follows:

[**00:00**](https://youtube.com/watch?v=juKDXPk7kU4&amp;t=0s) Intro
[**00:07**](https://youtube.com/watch?v=juKDXPk7kU4&amp;t=7s) App Demo
[**02:08**](https://youtube.com/watch?v=juKDXPk7kU4&amp;t=128s) Setup MongoDB Cloud Atlas Project and Cluster
[**03:18**](https://youtube.com/watch?v=juKDXPk7kU4&amp;t=198s) Connect to MongoDB Cluster via Terminal
[**04:32**](https://youtube.com/watch?v=juKDXPk7kU4&amp;t=272s) Examine codebase and dependencies
[**05:13**](https://youtube.com/watch?v=juKDXPk7kU4&amp;t=313s) Connect to MongoDB from codebase
[**06:14**](https://youtube.com/watch?v=juKDXPk7kU4&amp;t=374s) Create server and initial route
[**07:30**](https://youtube.com/watch?v=juKDXPk7kU4&amp;t=450s) Add POST and DELETE endpoints
[**09:59**](https://youtube.com/watch?v=juKDXPk7kU4&amp;t=599s) Implement initial contacts screen
[**11:44**](https://youtube.com/watch?v=juKDXPk7kU4&amp;t=704s) Implements "No contacts" view
[**13:41**](https://youtube.com/watch?v=juKDXPk7kU4&amp;t=821s) Implement contact addition functionality
[**14:59**](https://youtube.com/watch?v=juKDXPk7kU4&amp;t=899s) Style ListTile widget
[**16:22**](https://youtube.com/watch?v=juKDXPk7kU4&amp;t=982s) Refactor NoContacts widget
[**17:01**](https://youtube.com/watch?v=juKDXPk7kU4&amp;t=1021s) Create ContactListing widget
[**18:20**](https://youtube.com/watch?v=juKDXPk7kU4&amp;t=1100s) Using the Faker package
[**18:53**](https://youtube.com/watch?v=juKDXPk7kU4&amp;t=1133s) Adding contact deletion functionality
[**20:07**](https://youtube.com/watch?v=juKDXPk7kU4&amp;t=1207s) Implements ContactsApi class
[**23:26**](https://youtube.com/watch?v=juKDXPk7kU4&amp;t=1406s) Create Contact PODO
[**28:21**](https://youtube.com/watch?v=juKDXPk7kU4&amp;t=1701s) Implement contact creation method on api class
[**29:51**](https://youtube.com/watch?v=juKDXPk7kU4&amp;t=1791s) Running app on Flutter Web
[**37:04**](https://youtube.com/watch?v=juKDXPk7kU4&amp;t=2224s) Outro

Clone and check out the `starter` branch on the [Github repo](https://github.com/graphicbeacon/flutter_mongodb_contacts_app). This will provide the correct setup to follow along in the Fullstack Flutter and MongoDB Cloud mini-course.

The Dart packages included in this mini-course are:

1. [**sevr**](https://pub.dev/packages/sevr) - a Dart library inspired by ExpressJS for writing HTTP servers. We use this to write a server that communicates with our MongoDB Cloud Cluster.
2. [**dio**](https://pub.dev/packages/dio) - a powerful HTTP client for Dart. We use this to make requests to our Dart backend server.
3. [**faker**](https://pub.dev/packages/faker) - a library that generates various fake data. We use this to generate the contact names of our Fullstack Flutter app.
4. [**mongo_dart**](https://pub.dev/packages/mongo_dart) - a library for communicating with MongoDB databases. This allows us to talk to MongoDb Cloud Atlas.

## Implementing the server

In **server/lib/server.dart** initiate a connection to MongoDB Cloud Atlas:

```dart
import 'package:mongo_dart/mongo_dart.dart';
import 'package:sevr/sevr.dart';

void start() async {
  // Log into database
  final db = await Db.create(
      'mongodb+srv://<user>:<password>@cluster0.xpkap.mongodb.net/<dbname>?retryWrites=true&w=majority');
  await db.open(); // Initiate the connection
  final coll = db.collection('contacts'); // Define a handle to the contacts collection
}
```
The database connection string can be found by clicking the "**CONNECT**" button on your cluster and then selecting "**Connect your application**" as the connection method.

![Getting the database connection string](https://dev-to-uploads.s3.amazonaws.com/i/drwdwiqguc0tb6hzuy1i.png)

Opening a connection to our MongoDB Cloud Cluster means we can create a server that acts as a gateway to our database:

```dart
void start() async {
  // Log into database
  ..
  // Create server
  const port = 8081;
  final serv = Sevr();
}
```
Our HTTP server is contained within the sevr variable which allows us to go ahead and define our first route:

```dart
void start() async {
  // Log into database
  ..
  // Create server
  const port = 8081;
  final serv = Sevr();

  // Define routes
  serv.get('/', [
    (ServRequest req, ServResponse res) async {
      final contacts = await coll.find().toList();
      return res.status(200).json({'contacts': contacts});
    }
  ]);
}
```
Our first route describes a path and the data to be returned for any client that makes a request to it, in this case being a `GET` request to the root route of our server. We are returning the list of contacts in our MongoDb collection.

To activate our server and routes we need to listen to incoming connections:

```dart
void start() async {
  // Log into database
  ..
  // Create server
  ..
  // Define routes
  ..
  // Listen for connections
  serv.listen(port, callback: () {
    print('Server listening on port: $port');
  });
}
```
Running this in the terminal will give you the output below:

![Running server in terminal](https://dev-to-uploads.s3.amazonaws.com/i/bhl1ikogs5sdmmf2u041.png)

Learn more from the full mini-course.

→[**Watch the Fullstack Flutter MongoDB Cloud Mini-Course**](https://youtu.be/juKDXPk7kU4)
→[**Get the source code**](https://github.com/graphicbeacon/flutter_mongodb_contacts_app)

---

## Sharing is caring 🤗

If you enjoyed reading this post, please share this through the social buttons on this page. [Subscribe](https://youtube.com/c/CreativeBracket) to the YouTube channel for tutorials demonstrating how to build full-stack applications with Dart and Flutter.

[Subscribe to the newsletter](http://eepurl.com/gipQBX) to access our free 35-page Get started with Dart eBook and to be notified when new content is released.

**Like, share and [follow me](https://twitter.com/creativ_bracket)** for more content on Dart and Flutter.

_Originally published at [creativebracket.com](https://creativebracket.com/fullstack-flutter-mongodb-mini-course/)_