Hackathon - Hack Together: Microsoft Graph and .NET 🦒 - Day 02
Tags: webdev, csharp, dotnet, azure
Published: 2023-03-02 21:32:26

Today I started to work on the project. I didn't do special things but I "only" setup the environment to be more focused on the code in the next few days.

## Repository on GitHub
I created a new repository on GitHub called "M365-Today". I did some small changes on the Readme but I left the rest as is.
Anyway, you can start to sync the repository to see all the commits in the next days.

{% embed https://github.com/kasuken/M365-Today %}

## GitHub Codespaces
I will most likely work on the project when I can, some from the laptop, some on the train, and some during the day while working but I will not follow a normal workflow.
For this reason, I decided to use Codespaces for this repo because I don't have to sync the repo locally everytime, but I can work remotely directly from Visual Studio Code (if I needed).
I didn't create a custom container but I use the default settings.
I don't have any special requirements for this project.

![Codespaces](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rra2ygw24l161n9gwwgg.png)

## New Project
From Visual Studio 2022 I created a new Project selecting the template "Blazor WebAssembly App".
As I mentioned yesterday in my previous post, I use the Blazor WebAssembly without a server. Everything will run client side.
I only checked "Progressive Web Application" because the application will be more faster and if I want to use this web application as the new tab page in the browser, it should be a good choice.

![Blazor WebAssembly App](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pw4aza7cmeyf0mc9gb9h.png)

## Git Flow
I use Git Flow for my daily activities at work and I cannot live without it.
For my side project I use Git Flow as well.
Nothing special in the git settings during the initialization.

![Git Flow](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dzg1r4ixs7gi2owq9ows.png)

## Blazor Fluent UI
As I mentioned yesterday in the Day 01 post, I would like to use Fluent UI for Blazor.
I followed the tutorial directly from the Microsoft Learn website.
This is the link: https://learn.microsoft.com/en-us/fluent-ui/web-components/integrations/blazor

Anyway, to make a long story short, I took the following steps.
I added the NuGet package called "**Microsoft.Fast.Components.FluentUI**" and I changed the Index.razor page with the following code.

```html
@page "/"
@using Microsoft.Fast.Components.FluentUI

<PageTitle>Index</PageTitle>

<FluentCard>
    <h2>Hello World!</h2>
    <FluentButton Appearance="@Appearance.Accent">Click Me</FluentButton>
</FluentCard>
```
Just to check if Fluent UI is running well in the project.

After that, I removed Bootstrap from the index.html and a remove the navigation sidebar on the left.

![Result after implementing Fluent UI](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mtpa1k908ujth3wcua8f.png)

For today it was enough.
Tomorrow I will start to implement the first calls to the Microsoft Graph and I will try to authenticate the user.

Stay tuned!

---

Are you interested in learning GitHub but don't know where to start? Try my course on LinkedIn Learning: [Learning GitHub](https://bit.ly/learninggithub).

![LinkedIn Learning](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sdc2bpiftpadibi4h51c.gif)

---

Thanks for reading this post, I hope you found it interesting!

Feel free to follow me to get notified when new articles are out 🙂

{% embed https://dev.to/kasuken %}