Introduction

Supabase is a Backend-as-a-Service (BaaS) solution that provides a range of services like authentication, database management, and cloud storage. With Supabase, developers can easily build and scale web and mobile applications without having to manage the infrastructure themselves.

In this guide, you'll learn how to create an MVVM .NET MAUI app (Books Tracker) that connects with a Supabase database using the Model-View-ViewModel (MVVM) architecture. Here’s a quick demo of the app:

To continue this guide, you will need the following development tools installed:

• Visual Studio 2022 with the .NET Multi-platform App UI development workload.
• .NET 7 SDK.

Creating a Supabase account and database

1. To get started, you need to create an account on Supabase. You can sign up by linking your GitHub account or using your email address.

   
   

2. Once you are signed in, click New project and select New Organization in the drop-down that appears.

3. Create a new organization by typing a preferred organization name, selecting the type of organization and clicking Create Organization.

4. You will be prompted with a form for creating a new project. Fill up the form and click Create new project.

5. Once the project setup process is complete, you will be directed to a Dashboard. Navigate to Table Editor and Click Create a new table.

6. A flyout, for creating tables and columns, appears from the right. Type the table name, uncheck “Enable Row Level Security” and add table columns.

The id column and created_at column have been added to the table automatically. The id column serves as the primary key, while the created_at column generates a timestamp for each row upon insertion.  You can add a new column by clicking Add Column at the bottom left of the flyout.

Click Save to create the new table.

7. Navigate to Settings -> API and copy your project URL and public API key to somewhere secure.

Creating a .NET MAUI app that works with Supabase

1. Open Visual Studio 2022 and create a new .NET MAUI App project with the following details.
   • Project name: BooksTracker.
   • Solution name: BooksTrackerApp.
   • Location: Choose your preferred project location.

After opening the project, delete the default MainPage that was created.

2. Add the following NuGet Packages:

   • CommunityToolkit.Mvvm: .NET MVVM helper library.

   • CommunityToolkit.Maui: To use the .NET MAUI Community Toolkit, follow the instructions in the ReadMe file that appears in Visual Studio after installing it.

   • supabase-csharp: Supabase's C# library. To learn more, you can check the documentation.

     
     

3. Create the following folders in your project:
   • Models
   • ViewModels
   • Views
   • Services

Models

4. In Models folder, add a new class file named Book.cs with properties as shown in the following code:

This class inherits the BaseModel provided by Postgrest library, which is included in the Supabase client. The table attribute is the same as the name of the table we created in Supabase. Also, every column attribute is the same as its corresponding table column name.

5. Add a new class file named AppConfig.cs to the Models folder.  In AppConfig.cs, define a static class with two fields to store the Supabase URL and key you copied initially.

(For demo purposes, we are hardcoding the API key and URL in our code. However, please use more secure methods such as storing them in a configuration file to avoid sharing your credentials.)

Services

6. Add an interface named IDataService.cs to the Services folder.

7. This interface will be implemented by a new class called DataService in the Services folder. The interface methods are modified to perform CRUD operations with the books table in Supabase.

ViewModels

In the ViewModels folder,

8. Add a class file named BooksListingViewModel.cs.

8. Add a new class file named AddBookViewModel.cs.

10. The last ViewModel to be created is UpdateBookViewModel.cs.

Views

11. Create three content pages in the Views folder with the following names and corresponding XAML markups:
    • AddBookPage
    • BooksListingPage - This is the main view of the application. It features a CollectionView for displaying books from the database and uses two items from the .NET MAUI Community Toolkit - BoolToObjectConverter and EventToCommandBehavior.
    • UpdateBookPage

To enable data binding, inject the viewmodels into the constructors of the pages in the code-behind and set their BindingContext.

Register Routes

12. In AppShell.xaml, define the BooksListingPage route on a ShellContent object and register other pages in AppShell.xaml.cs.

Register Services and Dependencies in MauiProgram.cs

13. In MauiProgram.cs, configure and register services, pages, viewmodels and Supabase Client in the Dependency Injection (DI) container.

14. Build and run the application.

Project source code

Thank you for Reading! Hope you found this guide helpful.