marinasundstrom/item-catalog

App for cataloging items with pictures

Item Catalog

App for cataloging items with pictures. Components are from MudBlazor.

A "Worker" service demonstrates how to communicate with a microservice through asynchronous messaging.

Have a look at the YourBrand project. It is based on this project.

For more info:

• Watch demo video

• Features explained here.

• Read the documentation.

Screenshots

Item

Comments

Introduction

Client app, with Web backend and API. Written entirely in .NET.

Contains a WebApi. Uses SQL Server and emulated Azure Blob Storage out of box.

The "Worker" service is used to demonstrate how to off-load tasks to a micro service using asynchronous messaging. The library used is MassTransit, and for transport it uses RabbitMQ. It also Hangfire to schedule recurring tasks.

SignalR is used for real-time communication between server and client.

Duende Identity Server is used for handling user identities and authentication.

Nginx is used as a reverse-proxy.

Dev environment is based around projects and containers orchestrated by .NET Tye. Enabling you to launch all backend services with one simple command.

Redis is also integrated.

Getting started

Read this document.

MAUI, what?

.NET Multi-platform App UI (MAUI) is an modern open-source app framework that is the evolution of Xamarin.Forms. Enabling you to build native apps with .NET - not just mobile but also desktop. It still has the XAML model for declaring UI.

But in this app, it is combined with Blazor.

MAUI contains abstractions that make it easier to leverage common functionality across the platforms. Camera, File Pickers, Compass etc.

Blazor

Blazor is an open-source framework for building apps for the Web using components, based on the familiar Razor syntax.

It lets you combine HTML, CSS and C# to build interactive experiences for the Web.

There are two kinds of Blazor Web apps: Client-side (WebAssembly) and Server-side rendered.

But, in this MAUI app it works a bit different.

Hybrid Native app

Despite the UI being built with HTML and CSS, there is no Web Server or Web Assembly in this app. The UI is rendered in the same process as the rest of the app. :)

With some work, you can share components with your standard Blazor Web App.

This approach is similar to React Native, which lets you use React components that have been written for the web with mobile apps. The obvious difference is that, instead of React components and JavaScript, Blazor lets your use Razor components and C# across the stack.

ASP.NET Core

ASP.NET Core is an open-source framework for building Web Apps.

You can build apps with MVC or Razor pages. You can also build Web APIs. Now we have true "Minimal" APIs which are hooking directly into the core

You can mix and match the technologies since they are based on the same core. Essentially, a pipeline of middlewares that handle HTTP requests.

Blazor (Server-side) is actually a part of ASP.NET Core too - so everything works great together.

There are many libraries and third-party frameworks that can enhance your ASP.NET Core apps. Open API and Swagger UI is supported out of box via third-party library.

In this app, the server-side logic is hosted in an ASP.NET Core app that exposes a Web API.

Using Open API you can generate client classes that are used by the MAUI app. Essentially, it hides away the details of making requests to the server via HTTP.

Tye

A challenge when building distributed applications is to orchestrate services during development time. It might be your own projects, database server, Nginx. How to configure them, and make them communicate.

You can always run stuff locally or in containers, but that implies manual configuration. Setting up a virtual network. Tye handles all this for you.

Much like full orchestrators, such as Docker Compose, it gives you a way to declare your services and the desired configuration in a file (tye.yaml). It then runs your projects and containers (in Docker), setting up networks and such for you. Even enabling service discovery.

You can check in this tye.yaml file with your source code to let other developers get going in no time.

When you are ready to release your application, Tye helps you publish it to Kubernetes.

item-catalog's Issues

Async Messaging

AppService should communicate with Notifications using Async Messaging, not RPC.

Integrate code from side-project

I have created a project in which merge this project and the TimeReport project.

Relevant changes should be integrated here.

Improvements with IdentityService.

• API for creating Users
• Integration events for telling other services that a User has been created, updated, or deleted.

Fix Notifications and Search

The functionality is broken.

These services shall be treated as third-party services. They are not to be called directly.
AppService should provide an interface for that.

Add Auth

Use Identity Server.

Add Redis

Rename projects

In the AppService folder, remove the Catalog.* prefix from project folder and project file names.

In the WebAPI project, add Catalog.* to namespaces.

Integration event

Make a Domain Event trigger and Integration Event.

Add Notification Handler that handles Domain Event and publishes an Integration Event.
Let the Worker listen to that Integration Event and Do something - Send a Command that makes Application update something.

On Api Keys

I realize that the use of Api Keys is not ideal. But now there is an ApiKey service that lets you define and validate API Keys - instead of hardcoded ones.

ApiKeys are primarily used to allow for automation, when seeding users (Seeder project)

What is lacking is a proper way to handle Api Keys auth with User Auth. Right now, there is (still) an "Api" user in each service. It does not tell anyone what identity did something in the Api.

ApiKeys need to be tied to a "Project".

Perhaps API keys are not the right way to go.

Other stuff to consider is handling access to certain resources.

Create
Regenerate
Revoke

The same reference is used "using Catalog.Application;"

WebApi csproj

Program.cs

item-catalog/Server/AppService/WebApi/Program.cs

Line 7 in 05cb857

using Catalog.Application;

and

item-catalog/Server/AppService/WebApi/Program.cs

Line 8 in 05cb857

using Catalog.Application;

Add Comments Count to Item

Item

Add property:

• CommentsCount

CommentPostedEventHandler

Update CommentsCount

API Gateway

YARP?

Does not work on mobile

The apps now constructs URLs for the service clients from NavigationManager.BaseUrl. This works fine when running in a browser, but not for other mobile apps.

When running in a mobile app the URLs have to be hard-coded to a specific endpoint.

FIY: Changes integrated

Changes from side-projects have been integrated.

I copied projects and adapted them for this solution. Changing namespaces and such. As a consequence, some files might have been replaced, and Git has not detected them as being renamed.

One notable update:

Improved User handling. Admins can create Users.

Handle CancellationToken

Add model validation in Request Handlers

[Feature] Messenger

This document outlines the ambitions for the Messenger/Chat feature.

Conversation

Users are able to start start a conversation, in which the participants can:

• Post message
• Edit message - will update the text content of a message.
• Delete message - will clear the message of its content.

Visibility

A conversation can be public or private.

Public means that it is visible to all.

Private means that it is between two or more participants.

Reactions

Attach an emoji to a message.

Replies

Reply to specific message.

User Permissions

A User can post, edit and delete their own conversations and messages.

Administrators are delete other Users' conversations and messages, but not edit them.

Create Web App

Make it possible to run this app in the browser.

Extract common Blazor components to separate Library project.

Create platform abstractions for services.

Reintegrate Mobile projects

#4

Clean Architecture

Restructure folder structure in each Server project to adhere to Clean Architecture and DDD, and move files to the correct folders to facilitate discoverability within the structure.