DEV Community

Tomasz Karwatka
Tomasz Karwatka

Posted on

Live Coding with AI

#ai #erp #crm #typescript

Live Coding an Actionable Notifications System with AI-Assisted Engineering

Modern business apps live or die by their notifications.

Not the annoying kind — but the ones that:

  • reflect real system state
  • support long-running processes
  • allow users to take action immediately
  • and don’t collapse under complexity as the app grows

In this post, I’ll walk you through how we’re building exactly that in Open Mercato using a live-coding workflow powered by AI-assisted engineering.

Live Coding an Actionable Notifications System with AI-Assisted Engineering

Modern business apps live or die by their notifications.

Not the annoying kind — but the ones that:

  • reflect real system state
  • support long-running processes
  • allow users to take action immediately
  • and don’t collapse under complexity as the app grows

In this post, I’ll walk you through how we’re building exactly that in Open Mercato, using a live-coding workflow powered by AI-assisted engineering.

This is not a demo of “magic AI”.

It’s a very practical look at how AI fits into real software development — bugs, reviews, refactors included.

Why Notifications Matter More Than You Think

In most systems, notifications are treated as an afterthought:

  • a toast
  • a badge
  • maybe an email

But in real business software, notifications are the coordination layer between people and processes.

They need to:

  • show progress of background jobs
  • signal events that require attention
  • enable decisions and approvals
  • adapt to different delivery channels

So we built notifications as a first-class module, not UI sugar.

Actionable Notifications (Not Just “FYI”)

A key design decision in Open Mercato:

Notifications are executable.

Example: Leave request approval

  1. An employee submits a leave request
  2. A notification is created for users with approval rights
  3. The notification contains embedded actions
  4. The approver clicks Approve
  5. The state updates immediately — no extra screens, no context switching

This is not a hack.

It’s part of the notification contract.

Notifications can:

  • run commands
  • trigger workflows
  • update domain state

Custom Renderers: One Notification ≠ One UI

Different notifications need different representations.

So instead of a single generic component, we support custom renderers per notification type.

That allows us to:

  • show domain-specific data
  • embed contextual actions
  • evolve the UI independently of the backend

Example:

  • Leave request → approval buttons
  • Sales order created → totals, items, status
  • Background job → progress + logs

The notification system is extensible by design.

Shipping Code, Then Letting AI Review It

After implementing the notifications module, I opened a pull request and immediately did two things:

  • requested review from a core team member
  • requested review from GitHub Copilot

The AI review surfaced:

  • missing i18n keys
  • duplicated DTOs
  • outdated documentation
  • unused React refs
  • inconsistent imports

Nothing dramatic — but all real issues.

This is where AI shines:

👉 fast, boring correctness checks

Fixing Issues with AI (Without Losing Control)

I didn’t blindly auto-apply fixes.

Instead:

  • I fed Copilot’s comments into Codex / Claude
  • fixed issues one by one
  • validated changes locally
  • kept PR history clean and readable

Important observation:

AI is excellent at spec changes and refactors

It’s less reliable at deep architectural decisions

So I use it as a force multiplier, not an architect.

When CI Fails: Let AI Run the Build

After merging fixes — CI broke. Typings.

Instead of hunting logs manually:

  • I asked the AI to run the full build
  • identify type errors
  • fix them safely

This included:

  • Next.js build
  • type-checking
  • linting

Result:

✅ green CI

✅ mergeable PR

✅ no broken deploys

Improving Notifications: Making Them Dynamic

One thing bothered me.

Sales order notifications showed static data:

  • item count
  • totals at creation time

But sales orders change.

So the plan:

  • move from serialized snapshot data
  • to dynamic rendering
  • fetch current order state when rendering the notification

Same notification.

Live data.

This is where custom renderers really pay off.

The Bigger Idea: Multi-Channel Delivery Strategies

Here’s the real extension.

Today:

  • notifications are stored in the database
  • rendered in the UI

Tomorrow:

  • database notifications
  • email
  • SMS
  • push
  • multiple strategies at once

Inspired by how Open Mercato handles search strategies, we’re extending notifications with:

  • pluggable delivery strategies
  • multiple active channels simultaneously
  • configuration via the existing config module

Key rules:

  • UI notifications = interactive
  • email / SMS = read-only
  • all links deep-link back to the admin panel

Emails will use React-based templates, same mental model as the UI.

This Is How We Actually Work with AI

No hype.

No “AI replaces developers”.

Just:

  • faster reviews
  • safer refactors
  • less context switching
  • more time thinking about architecture

AI doesn’t write the system.

It helps us ship it better.

What’s Next

This extension is bigger, so it won’t land in a single video.

But:

  • a PR is coming
  • links will be shared
  • feedback is welcome

And yes — if this kind of real, imperfect, live engineering is useful, I’ll keep recording it.

Open Mercato is open-source.

If you want to build serious business apps without reinventing the boring 80% — you’re invited.

Let me know what you’d like to see next.

Top comments (0)