Skip to main content

Example: Building a Customer Management Feature

Requirement:

Create customer management functionality.

Traditional AI workflow:

CustomerPage.tsx

Several hundred lines of code.

Atomic Bomb workflow:

Step 1 — Identify Domain​

Customer Management

Step 2 — Identify Subdomain​

Customer Administration

Step 3 — Generate Domain Assets​

CustomerModel
CustomerState
CustomerService
CustomerApi
CustomerEvents

Step 4 — Identify UI Structure​

Label
Input
Button
CustomerForm
CustomerList
CustomerOverview
CustomerTemplate
CustomerPage

Step 5 — Implement​

Only now does AI begin writing React code.

The architecture already exists.

Mini Exercise​

Repeat this example for a different domain, such as products, invoices, or bookings.

Document:

  • domain
  • subdomain
  • domain assets
  • UI structure

Example​

For bookings:

  • domain: Booking Management
  • subdomain: Appointment Scheduling
  • domain assets: BookingModel, BookingState, BookingService, BookingApi, BookingEvents
  • UI structure: DatePicker, TimeSlotPicker, BookingForm, BookingList, BookingTemplate, BookingPage