Introduction 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. Supabase 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 To get started, you need to create an account on . You can sign up by linking your GitHub account or using your email address. Supabase Once you are signed in, click and select in the drop-down that appears. New project New Organization Create a new organization by typing a preferred organization name, selecting the type of organization and clicking . Create Organization You will be prompted with a form for creating a new project. Fill up the form and click . Create new project Once the project setup process is complete, you will be directed to a Dashboard. Navigate to and Click . Table Editor Create a new table 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 at the bottom left of the flyout. Add Column Click to create the new table. Save Navigate to and copy your project URL and public API key to somewhere secure. Settings -> API Creating a .NET MAUI app that works with Supabase 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 that was created. MainPage Add the following NuGet Packages: : .NET MVVM helper library. CommunityToolkit.Mvvm : To use the .NET MAUI Community Toolkit, follow the instructions in the ReadMe file that appears in Visual Studio after installing it. CommunityToolkit.Maui : Supabase's C# library. To learn more, you can check the . supabase-csharp documentation Create the following folders in your project: Models ViewModels Views Services Models In Models folder, add a new class file named with properties as shown in the following code: Book.cs https://gist.github.com/ZadokJoshua/1d04c2d3f4d2d60bd7ee4d32b891b1f4?embedable=true This class inherits the 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. BaseModel Add a new class file named to the Models folder.  In , define a static class with two fields to store the Supabase URL and key you copied initially. AppConfig.cs AppConfig.cs https://gist.github.com/ZadokJoshua/14e6c9d405235104da82dfd5d53daf77?embedable=true (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 Add an interface named to the Services folder. IDataService.cs https://gist.github.com/ZadokJoshua/c8e7d025cb0c41d87e364992e2edade0?embedable=true This interface will be implemented by a new class called in the Services folder. The interface methods are modified to perform CRUD operations with the books table in Supabase. DataService https://gist.github.com/ZadokJoshua/16e73629e2476064ab111ebd409d07f3?embedable=true ViewModels In the ViewModels folder, Add a class file named . BooksListingViewModel.cs https://gist.github.com/ZadokJoshua/88271bc6522950d41f8ebed87ca7e7f7?embedable=true Add a new class file named AddBookViewModel.cs. https://gist.github.com/ZadokJoshua/4fe0abaa320c896dfa6022c8edd1998d?embedable=true The last ViewModel to be created is . UpdateBookViewModel.cs https://gist.github.com/ZadokJoshua/ac8caa801d0bbcf956e5b06b533a3acd?embedable=true Views Create three content pages in the Views folder with the following names and corresponding XAML markups: AddBookPage - 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. BooksListingPage UpdateBookPage https://gist.github.com/ZadokJoshua/419bef7c2fee56333d50978387b23aa1?embedable=true To enable data binding, inject the viewmodels into the constructors of the pages in the code-behind and set their BindingContext. https://gist.github.com/ZadokJoshua/66f68ae75332195f9870fd2448f3bb08?embedable=true Register Routes In , define the BooksListingPage route on a ShellContent object and register other pages in . AppShell.xaml AppShell.xaml.cs https://gist.github.com/ZadokJoshua/3a8e1d4f132b8f2a96375a8857abdd75?embedable=true Register Services and Dependencies in MauiProgram.cs In , configure and register services, pages, viewmodels and Supabase Client in the Dependency Injection (DI) container. MauiProgram.cs https://gist.github.com/ZadokJoshua/0da084463d7f7a21aaa079de457692d7?embedable=true Build and run the application. Project source code https://github.com/ZadokJoshua/supabase-maui-demo/tree/master?embedable=true Thank you for Reading! Hope you found this guide helpful.

Read My Stories

Too Long; Didn't Read

Get free API security automated scan in minutes

Creating a Books Tracker App with .NET MAUI and Supabase

Too Long; Didn't Read

@zadok

RELATED STORIES