Kelzodi blog: AI in Practice

 How to Build an Employee Expense Management Application in Two Hours with Zero Coding and AI Assistance

Modern AI capabilities, combined with software architects who are able to precisely define and structure both business and technical requirements, are radically transforming the way enterprise applications are developed.

What previously required weeks of analysis, design, backend implementation, frontend development, integration, and testing can now be prototyped in just a few hours through an iterative collaboration between humans and AI-assisted development tools.

The key is not only the power of AI itself, but also the quality of the architectural guidance, domain modeling, transactional design, and requirement definition provided by experienced engineers. When both elements work together effectively, ultra-fast full-stack application development becomes a realistic and highly productive approach.

 1. Choosing the Right Technology Stack

One of the key reasons why it is now possible to build a functional enterprise application in just a few hours with the help of AI is the maturity and compatibility of modern development frameworks and architectures.

For this project, the selected stack was:

Layer	Technology Stack
Database	Oracle Database
Backend API	Spring Boot + GraphQL
Frontend	React + Material UI

This combination is particularly well suited for rapidly developing enterprise business applications such as employee expense management systems, approval workflows, master/detail transactional forms, dashboards, and administrative portals.

Database Layer

Although this implementation used Oracle as the relational database engine, the reality is that for an application of this size and complexity, almost any modern relational database would work perfectly well.

Why Spring Boot + GraphQL?

For the backend, the combination of Spring Boot and GraphQL is especially productive for AI-assisted development.

Traditional REST APIs often generate excessive boilerplate:

Many endpoints
Many DTOs
Many payload variations
Over-fetching
Under-fetching

GraphQL simplifies this considerably.

Instead of creating dozens of rigid endpoints, the frontend can request exactly the data it needs.

Advantages of Spring Boot + GraphQL

• Rapid API generation
• Strong typing
• Clean schema-driven design
• Excellent integration with JPA/Hibernate
• Easy DTO mapping
• Reduced frontend/backend coupling
• Flexible queries
• Simplified master/detail retrieval
• Better frontend efficiency
• Easier AI-assisted code generation

Spring Boot also provides:

• Dependency injection
• Transaction management
• Security integration
• Repository abstraction
• Validation
• Exception handling
• Production-ready infrastructure

with very little manual configuration.

Why React for the Frontend?

React is particularly effective for applications with:

• Dynamic forms
• Popups/dialogs
• Editable grids
• Master/detail screens
• Stateful workflows
• Reactive updates

An expense management system contains exactly these kinds of interfaces.

Advantages of React + Material UI

• Fast UI prototyping
• Component reusability
• Excellent state management patterns
• Strong ecosystem
• Clean separation of concerns
• Responsive layouts
• Rich enterprise UI components
• DataGrid support
• Dialog and form infrastructure
• Easy integration with GraphQL/Apollo

 

Why This Architecture Works So Well with AI

This architecture is especially AI-friendly because it is:

Structured
Layered
Predictable
Strongly typed
Component-oriented

Project Logbook:  Building an Employee Expense Management Application with AI in Two Hours

Start Time	Main Step
00:00	1. Create the application mockups
00:20	2. Generate the database DDL from the mockups
00:32	3. Generate test data
00:42	4. Create the backend project in IntelliJ
01:25	5. Create the frontend application
02:00	Target completion

00:00  Create the Application Mockups

The first task is to ask the AI to generate the initial application mockups. The objective is to define the user experience before writing backend or frontend code.

The application should include three main user interfaces:

Mockup	Purpose
Expense Sheets Dashboard	Main table showing all employee expense sheets
Expense Sheet Edit Popup	Form for creating, viewing, and editing one expense sheet and its expense lines
Mobile Expense Sheet View	Simplified mobile interface for editing expenses from a mobile device

 Requirements to provide to the AI

Area	Requirement
Application domain	Employee expense management and control
Main entity	Expense Sheet
Detail entity	Expense Line
Main screen	Table with all expense sheets
Main table columns	Expense sheet number, employee name, sheet date, total amount, status, responsible name
Status values	Submitted, Approved, In Process of Pay, Paid, Rejected
Table behavior	Column filters, sorting icons, row actions
Row actions	View, Edit, Delete
Detail popup	Opens over the main table
Expense sheet form fields	Sheet number, employee name, sheet date, total amount, currency, status, responsible, comments
Expense lines table fields	Expense date, expense type, description, VAT, amount, payment method, receipt
Expense line actions	Add, View, Edit, Delete
Buttons	Save, Cancel/Close, Submit
Mobile interface	Simpler layout, fewer fields, optimized for small screens
UX requirement	Master/detail relationship: Expense Sheet contains multiple Expense Lines
Visual style	Enterprise-style, clean, aligned tables, clear buttons, icons for actions
Output format	Draw.io / diagrams.net XML

 

The AI agent returns:

 

  00:20  Generate the Database DDL from the Mockups

The second task is to ask the AI to generate the relational database model based on the mockups.

The application is simple enough to work with any modern relational database. Oracle Database was used in this implementation, but PostgreSQL or MySQL would also be suitable.

Requirement	Description
Database model	Relational
Main table	EXPENSE_SHEET
Detail table	EXPENSE_LINE
Relationship	One expense sheet has many expense lines
Integrity	Foreign key from EXPENSE_LINE to EXPENSE_SHEET
Total amount	Stored in EXPENSE_SHEET and recalculated from EXPENSE_LINE
Enums	Stored as codes in VARCHAR columns
Timestamps	created_at, updated_at
Constraints	Primary keys, foreign keys, not null constraints, unique sheet number

 00:32 — Generate Test Data

The third task is to ask the AI to generate test inserts.

Requirement	Description
Number of sheets	10 expense sheets
Average lines per sheet	Around 5 expense lines
Data realism	Different employees, dates, amounts, statuses, payment methods
Status coverage	Submitted, Approved, In Process of Pay, Paid, Rejected
Expense type coverage	Travel, Hotel, Meals, Transport, Other
Payment methods	Company Card, Personal Card, Cash, Bank Transfer
Total amount	Should match the sum of the lines

 

After executing DDL Script we have the test data

 

00:42 — Create the Backend Project in IntelliJ

The backend is created as a Spring Boot project in IntelliJ.

Backend technology requirements

Layer	Technology Requiirement
Language	Java 17
Framework	Spring Boot
API style	GraphQL
Persistence	Spring Data JPA / Hibernate
Database	Oracle Database
Mapping	MapStruct
Boilerplate reduction	Lombok
Build tool	Maven
IDE	IntelliJ IDEA
Testing endpoint	GraphiQL

 

Backend functional requirements

Area	Requirement
Entities	ExpenseSheet, ExpenseLine
DTOs	Output DTOs, input DTOs, filter DTOs
Enums	ExpenseStatus, CurrencyCode, ExpenseType, PaymentMethod
Enum display	Each enum should have code and label
Repositories	JpaRepository + JpaSpecificationExecutor
Filters	Accumulative filters using Specifications
Pagination	Page-based pagination
Sorting	Backend sorting by selected column
Services	Business logic layer
GraphQL schema	Queries and mutations
Controllers	GraphQL controllers
Security	Allow GraphiQL and frontend access during development
CORS	Allow React frontend from localhost:5173
Scalars	BigDecimal and Date scalars
Transactions	Use @Transactional for write operations

 

Backend implementation steps

After passing the requirements to the AI agent, we execute the next steps and requesting for the different artifacts: 

Step	Description	Author
1	Create Spring Boot project in IntelliJ	Developer
2	Configure Maven dependencies	Developer
3	Configure Oracle datasource in application.yaml	IA
4	Create JPA entities from database	IA
5	Replace String fields with enums and converters	IA
6	Create DTOs	IA
7	Create MapStruct mappers	IA
8	Create Specifications for filters	IA
9	Create repositories	IA
10	Create services and service implementations	IA
11	Create GraphQL schema	IA
12	Create GraphQL controllers	IA
13	Register custom GraphQL scalars	IA
14	Configure CORS and temporary development security	IA
15	Test queries and mutations in GraphiQL	Developer

 

Then we would have a full functional backend with no errors:

01:25  Create the Frontend Application

The frontend is created as a React application using Vite.

Layer	Technology Requirements
Framework	React
Language	TypeScript
Build tool	Vite
UI library	Material UI
Grid component	MUI DataGrid
API client	Apollo Client
API protocol	GraphQL
Development server	Vite dev server
Backend endpoint	http://localhost:8080/graphql

 

Frontend requirements to pass to the AI agent

Area	Requirement
Main page	Expense Sheets dashboard
Main grid	Shows all expense sheets
Main grid actions	View, Edit, Delete
Sorting	Column sorting connected to backend
Filtering	Column or toolbar filters
Popup 1	Expense Sheet form dialog
Popup 1 content	Header fields and expense lines grid
Popup 2	Expense Line dialog
Popup 2 content	Expense date, type, description, VAT, amount, payment method, receipt
Master/detail	Expense Sheet owns Expense Lines
State model	Working copy in memory
Save behavior	Save Sheet commits header and lines together
Cancel behavior	Cancel discards local changes
Total amount	Updated provisionally in frontend
Backend total	Recalculated definitively on save
UI style	Enterprise, clean, responsive
Mobile support	Simplified mobile version

 

Frontend implementation steps

Then we continue executing step by step and reviewing the results returned by the AI, frontend is no so complex as the backend.

Step	Description	Author
1	Create Vite React TypeScript project	Developer
2	Install Apollo Client, GraphQL, MUI, MUI DataGrid	Developer
3	Configure Apollo Client	Developer
4	Create shared TypeScript types	IA
5	Create GraphQL queries and mutations	IA
6	Build ExpenseSheetsPage	IA
7	Add main dashboard grid	IA
8	Add View/Edit/Delete action buttons	IA
9	Create ExpenseSheetFormDialog	IA
10	Add controlled form state for sheet header	IA
11	Create ExpenseLinesGrid inside sheet popup	IA
12	Create ExpenseLineDialog	IA
13	Implement working copy of lines in memory	IA
14	Implement Add/Edit/Delete line operations in local state	IA
15	Recalculate provisional total in frontend	IA
16	Implement Save Sheet as one GraphQL mutation	IA
17	Implement Cancel Sheet as discard local state	IA
18	Refresh dashboard after successful save	IA

 

At the end we have a full functional application:

 02:00  Target Completion