Building a Beautiful OKR with AntBlazor - Part 0
Introduction
Why?
There are many boilerplate Blazor examples everywhere online, showing the basics, and some more intricate parts. However, I am yet to find a full blog series showing end-to-end, how to make a beautiful UI and clean coded backend 'real world' website with Blazor
The Idea
For this series I decided that a reasonably simple but more complex than the typical TODO app, is an OKR website. If you aren't familiar with what an OKR tracker is, it stands for objectives and key results. What this means is there are larger objectives, that can be tracked by specific key results.
An example might be:
O: Become the top retailer in your state
KR:
- Increase sales by 45%
- Decrease monthly costs by $2000
From a developer perspective this is a simple enough app, you have one objective to many key results. This means the focus of this series will be to dive into UI and hooking it up with Blazor.
Series Roadmap
- Scaffold the project boilerplate using DDD (domain driven design), and full DevOps (GitHub CI, Docker + docker-compose, NGINX domain->docker setup)
- Plan the backend, and setup the core models and repository interfaces
- Build mock repositories with test data, to be able to build the UI properly, once. Build the main UI sections
- Build the backend repositories and database setup using Marten DB as a document store
- Build an analytics dashboard using data from all OKRs
Potential Extensions
- Add authentication, authorization, users/groups
- Add an API to expose data for 3rd party use
The Tech Stack
Domain Registrar: Cloudflare
DDoS Protection, Nameservers, DNS: Cloudflare
Server Hosting: Vultr VPS
Reverse Proxy (differentiate between domains): NGINX
Containers: Docker and docker-compose
Website: ASP.NET Core Blazor + C#
Database: Postgres
UI
There are many UI frameworks for Blazor, but many are hard to use, require knowledge from React and more. The only UI framework I've found for Blazor that makes sense, and is easy to use - is AntBlazor. AntBlazor is a Blazor component library for Ant Design.
This library supports many components, and its component overview can be found on the linked site. I've personally used AntBlazor for many of my personal projects, and for paid projects - in production. It is still a somewhat young library compared to React or Angular UI libraries, but Blazor is the new tech on the block.
In this blog series I am going to show you how easy it is to build a beautiful frontend; this is especially useful if you are primarily a backend developer and don't have/want to put in the time for the frontend.
In the next post, I will setup the project boilerplate and full DevOps.