Mitchell Zeller

Back

Projects

Exp & Edu

About

Ideas

Archived

Back

Nexus

Building out the front-end of the internal staff app

Design

Development

Introduction

Constraint

Main Focus

Learning Process

Outcome

Retrospective

An early figma design of my new portfolio

Introduction

How I built Nexus

Nexus was built with .NET MAUI utilizing C# & XAML. I had to learn both of these after completing the design side of things, with Visual Studio.

I picked up and learnt XAML quite easily because of my previous experience with web dev and experienced front-end developers at Council to help me. The C# part was a bit more rough and took me longer to wrap my head around, and when I started to get the hang of it the project was paused and I started working on the DisasterHub redesign pitch.

2025

1-2 months

Lead Product Designer & Front-end Developer

Myself, Team lead, Dev team

Nexus

Constraint

The two major constraints was my inexperience and lack of another developer working with me on the project.

Major problem was my inexperience using .NET MAUI anytime before this project. Add to that there are time constraints/deadlines (sort of) makes it also a bit more difficult. Ultimately I decided to build out the entire UI layout/screens, colors, and reusable components as my contribution to front-end. The lack of another experienced developer working with me on it to help me with the more complex stuff and to help guide me would of probably been the best case scenario.

Main Focus

Figma design → .NET MAUI so basically translating my design to code in the form of the UI layout/screens, colors (light/dark), and reusable components etc.

When completing/getting the final design in Figma to a good place, consistent screens etc I started to translated said designs to code with XAML. Most of my work was just creating all the screens and organsing the files/folders, and adding comments splitting up the more complex pages to be more easier understood.

Learning Process

I utilized Notion to document my learning in bite sized pieces as you'll see further down. I learnt the XAML (UI) side much faster then the more logic part (C#).

With Notion I set up a database to add different pages to document some key things I learnt with the UI other then the basics. For example creating a floating action button which is not native to MAUI and using grid to create responsive elements side by side.

Notion Board

MVVM

Learning .NET MAUI Model-View-Viewmodel took me a moment and obviously still plenty to learn.

I did end up binding 2-3 things and started to understand it but then the project got paused. I binded the weather card on the homepage and a user list in the admin screens. I don't believe I have enough of an understanding to show anything and I don't believe I really have much of the code to show and probably wont show any logic code and only really going to show UI/Front-end stuff.

Floating Action Button

This was probably the most confusing part of creating the UI. Learning that MAUI did not have any native support for a floating action button I had to learn how to get around it.

If you are seeing this I obviously got around it. It was actually pretty simple solution in hindsight but I tried a could different ways to solve this problem. One was trying to use a sticky/absolute positioning which did not really get me anywhere. Another option would be looking at a package/plugin but decided to keep looking before going there. Lucky last was actually basically the sticky solution from above but there wasn't any way to just add a position: sticky.

I ended up having to wrap the entire UI in a <Grid> and had the scrollable content in a <ScrollView> and outside of that we placed our sticky button in a <VerticalStackLayout> which had the <VerticalStackLayout.Background> which let me use a gradient to give it that nice look when scrolling the fixed content.

Creating the Floating Action Button

// Example Code

<Grid>

    <ScrollView>
		    
		    <!-- Scrollable content here -->
		    
    </ScrollView>


    <!-- fixed position content - button -->

    <VerticalStackLayout Padding="16" ZIndex="999" HeightRequest="96" VerticalOptions="End">
        <VerticalStackLayout.Background>
            <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                <GradientStop Offset="0" Color="{AppThemeBinding Light={StaticResource LightGradient0}, Dark={StaticResource DarkGradient0}}"/> <!-- Gradient0 -->
                <GradientStop Offset="1" Color="{AppThemeBinding Light={StaticResource LightGradient100}, Dark={StaticResource DarkGradient100}}"/> <!-- Gradient100 -->
            </LinearGradientBrush>
        </VerticalStackLayout.Background>
        <Button Style="{StaticResource PrimaryButton}" Text="Next" ContentLayout="Right, 8" Command="{Binding GoToWHSFormCommand}" HorizontalOptions="Center">
            <Button.ImageSource>
                <FontImageSource FontFamily="MaterialRegular" Glyph="{x:Static material:MaterialRound.Arrow_forward}" Size="24"
                                             Color="{AppThemeBinding Light={StaticResource Neutrals10}, Dark={StaticResource Neutrals10}}"/>
            </Button.ImageSource>
        </Button>
    </VerticalStackLayout>

</Grid>

Grid & StackLayout/s

Understanding and utilizing Grid & StackLayout. These are the backbone to how you structure the UI from page to page.

The grid was naturally a bit more confusing but the StackLayout is basically just Display: Flex, but I learnt was a bit weird as well. You have the Horizontal, Vertical, and just normal StackLayout. But for whatever reason the StackLayouts had no ability to add a gap between the elements inside it. Whereas I think the grid did have a gap option.

// Example Code

<Grid Padding="16" ColumnSpacing="16" RowDefinitions="Auto" ColumnDefinitions="*, *">
    
    <VerticalStackLayout Spacing="8" Grid.Column="0">
        <Label Text="Supervisor" Style="{StaticResource H5}"/>
        <Border StrokeThickness="0" StrokeShape="RoundRectangle 16">
            <VerticalStackLayout Padding="8" BackgroundColor="{AppThemeBinding Light={StaticResource Neutrals20}, Dark={StaticResource Neutrals90}}">
                <Entry ClearButtonVisibility="WhileEditing" Placeholder="Im empty" Keyboard="Default"
                   PlaceholderColor="{AppThemeBinding Light={StaticResource Neutrals60}, Dark={StaticResource Neutrals50}}"
                   TextColor="{AppThemeBinding Light={StaticResource Neutrals110}, Dark={StaticResource Neutrals10}}"/>
            </VerticalStackLayout>
        </Border>
    </VerticalStackLayout>
    <VerticalStackLayout Spacing="8" Grid.Column="1">
        <Label Text="Time" Style="{StaticResource H5}"/> <!-- TODO: Bind this -->
        <Border StrokeThickness="0" StrokeShape="RoundRectangle 16">
            <VerticalStackLayout Padding="8" BackgroundColor="{AppThemeBinding Light={StaticResource Neutrals20}, Dark={StaticResource Neutrals90}}">
                <Entry ClearButtonVisibility="WhileEditing" Placeholder="Im empty" Keyboard="Default"
                   PlaceholderColor="{AppThemeBinding Light={StaticResource Neutrals60}, Dark={StaticResource Neutrals50}}"
                   TextColor="{AppThemeBinding Light={StaticResource Neutrals110}, Dark={StaticResource Neutrals10}}"/>
            </VerticalStackLayout>
        </Border>
    </VerticalStackLayout>
    
</Grid>

Navigation

So this was already set up before hand but I did understand how to create new pages and have a button go to said new page/s, aka navigation.

Unfortunately I don't have any examples to show but you would need to add a line in the MauiProgram.cs and another place I'm forgetting. You'd also need a NavigateTo or GoTo async pop thing I believe. Then adding the, Command="{Binding GoToPage}" line and you are good to go.

I did most of this learning when working on the project a few months ago and foolishly I did not document in Notion how the navigation worked so most of this is from memory.

Styles

This was also a pretty easy part to learn. Mix of just reading docs, asking copilot and looking at the current SCC app and how it uses styles.

Below shows some AI generated example code that you might see in a .NET MAUI app. In my case I had all the palettes in Figma ready to go just needed to understand how MAUI used styling. Then you setting up how the different buttons should be styled, another key thing used in this area was BasedOn.

Basically I would create a DefaultButton style which had everything then used the BasedOn to create the rest of the buttons, by doing this you only need to update the DefaultButton say sizing to update them across all buttons used. This greatly reduces the time and effort, reducing technical debt over time.

// Example Color Styles

<?xml version="1.0" encoding="UTF-8" ?>
<ResourceDictionary xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
                    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">

    <!-- Neutrals Palette -->
    <Color x:Key="Neutral10">#F5F5F5</Color>
    <Color x:Key="Neutral20">#E0E0E0</Color>
    <Color x:Key="Neutral30">#CCCCCC</Color>
    <Color x:Key="Neutral40">#B3B3B3</Color>
    <Color x:Key="Neutral50">#999999</Color>
    <Color x:Key="Neutral60">#808080</Color>
    <Color x:Key="Neutral70">#666666</Color>
    <Color x:Key="Neutral80">#4D4D4D</Color>
    <Color x:Key="Neutral90">#333333</Color>
    <Color x:Key="Neutral100">#1A1A1A</Color>
    <Color x:Key="Neutral110">#000000</Color>

</ResourceDictionary>

// Color styles used in Button

<Style TargetType="Button" x:Key="NeutralButtonStyle">
    <Setter Property="BackgroundColor" Value="{StaticResource Neutral90}" />
    <Setter Property="TextColor" Value="{StaticResource Neutral10}" />
    <Setter Property="BorderColor" Value="{StaticResource Neutral60}" />
    <Setter Property="BorderWidth" Value="2" />
    <Setter Property="CornerRadius" Value="8" />
    <Setter Property="Padding" Value="12" />
    <Setter Property="FontSize" Value="16" />
</Style>

// Example Light Dark mode

<AppThemeColor x:Key="PrimaryBackground" Light="#FFFFFF" Dark="#121212" />
<AppThemeColor x:Key="PrimaryText" Light="#000000" Dark="#FFFFFF"

Outcome

Learnt a good amount and achieved a reasonable amount considering experience with this area.

Considering my first time translating design to code I did quite well. I ended up ensuring all the styles, buttons and components were accurate and consistent, and built out majority of the UI screens. Whilst the .NET MAUI experience wasn't terrible I do plan on learning and using React Native for any future app development I do.

Retrospective

Ideally have a more experienced developer work on the same project with me. Document much more and more often.

I think the only thing I would want from the experience is to have a sort of supervisor/manager/mentor of just me helping me learn and understand it a bit more. I obviously was able to go ask for help around things confusing me but actually have said person working on the same project could be beneficial.

Resume

GitHub

Connect

Resume

GitHub

Connect

Resume

GitHub

Connect