CyberHuginn

Home

/

Notes

/

why-i-built-cyber-ui

Why I Built cyber-ui: A Minimal Design System for Developers

How my projects, from backend systems to monitoring tools, led me to create a minimal and personal UI foundation.

Packages

Frontend

Jul 31, 2026 · 3 min read

Some projects are born from a specific need. Others are the result of patterns you keep seeing across different projects.

cyber-ui belongs to the second group.

The Beginning

While working on a customer's project, an online trading platform for gold and financial assets, I found myself reviewing the architecture of the system.

The platform was growing. More features were coming, including new suppliers, pricing systems, and products beyond gold. While thinking about the future of the application, another question came to my mind:

How will I know when something goes wrong after deployment?

Over the years, I had several situations where customers reported problems like:

"This page shows an error."

"This feature is not working anymore."

But usually, the error had already happened, and there was no useful information available. I had to manually search through logs and try to understand what happened.

I used Sentry before, but because of resource usage and the complexity of maintaining it, I eventually stopped using it and returned to traditional log checking.

Then I asked myself:

What if I build a monitoring system just for myself? Something lightweight, customized, and focused on the things I actually need?

That idea became Bidar.

The first version was simple. It only checked website availability through ping requests and monitored SSL certificates. When something went wrong, it notified the owner through a Telegram bot.

I deployed the first version on bidarhq.ir, not as a finished product, but as an experiment.

I wanted to understand something first:

Does anyone need this?

While building Bidar's landing page, I noticed something interesting.

I had a specific taste in interface design.

I preferred minimal layouts, generous spacing, fewer visual elements, and a clean technical feeling. I was not looking for a UI full of animations and unnecessary decorations. I liked interfaces that felt simple, focused, and slightly cyber-inspired.

Around the same time, I was redesigning my personal website and building security features for its backend. I was using Mantine, a powerful and well-designed UI library.

It was great. It solved many problems and provided a huge collection of components.

But sometimes, simplicity is enough.

That thought led me to another question:

Why not build a UI system based on my own design principles?

A system that matches the way I design, the way I build projects, and the environments I usually work with.

So I created cyber-ui.

A minimal, open-source UI system inspired by a cyber and terminal-like aesthetic.

The goal is simple:

  • Build reusable components
  • Keep things lightweight
  • Create a design language that feels personal

This is only the beginning. There is still a lot to improve, but every system starts with a first commit.

Related Notes

Django Transactions: What atomic() Actually Protects

Learn how Django transactions work, what transaction.atomic() actually protects, and how to handle race conditions, row locking, database constraints, nested transactions, and post-commit side effects with select_for_update() and on_commit().

The Hidden Cost of Django REST Framework Serializers

Learn how Django REST Framework serializers can cause N+1 queries, slow API responses, and unnecessary database work—and how to optimize them with select_related, prefetch_related, annotations, and better serializer design.

Building a Django Package — Part 4: Publishing django-healthkit to PyPI

In this final part, we prepare django-healthkit for release, build and validate the package, test it on TestPyPI, publish it to PyPI, and create a Git tag and GitHub release.

Building a Django Package — Part 3: Health Check Manager and Endpoint

In Part 3, we connect the database and cache health checks, build the health check manager, expose a Django health endpoint, measure check latency, and return a structured health status.

Building a Django Package — Part 2: Database and Cache Health Checks

In this part, we implement the first health checks for django-healthkit, covering database connectivity and Django cache functionality with simple, independent, and testable checks.

Building a Django Package — Part 1: Setting Up django-healthkit

In this part, we build the initial structure of django-healthkit, configure the package with pyproject.toml, and prepare it for development.

Building a Secure Webhook Receiver for Server-to-Server Communication

How I built a secure FastAPI webhook receiver using RSA signatures to enable authenticated server-to-server communication, proxy requests, and connect applications across different network environments.

Why I Switched to Conventional Git Commit Messages

Why I switched from inconsistent Git commit messages to a Conventional Commits style, with practical examples for cleaner and more maintainable Git history.

Building django-healthkit

How a simple health endpoint for Bidar turned into django-healthkit, a lightweight Django health-check package.

Designing a Gold Jewelry E-Commerce Database with Django

Learn how to design a scalable Django database for a gold jewelry e-commerce platform by modeling products, attributes, and purchasable product variants using real-world domain-driven design principles.

How to Fix Common Next.js 16 Build Errors (Proxy, Dynamic Rendering & Revalidation)

Learn how to fix common Next.js 16 build errors, understand Proxy, Dynamic Rendering, and Revalidation, and improve your application's SEO and performance.

End of note.