DDK Frontend

Overview

The DDK provides a visual interface for designing data schemas, generating GraphQL servers, and managing databases — no code required. The interface makes complex backend development accessible through drag-and-drop schema design, visual relationship management, and automated code generation.

Key Features

Visual Schema Designer

Design your data model graphically:

• Drag-and-Drop Types — Add entities to your schema by dragging from a palette
• Visual Relationships — Draw connections between types to define relationships
• Field Editor — Add and configure fields with point-and-click
• Type Explorer — Browse all types, fields, and relationships in your schema
• Auto-Layout — Automatically organize schema graph for clarity

Server Management

Manage GraphQL servers through the interface:

• Server Wizard — Create new servers with guided setup
• Server List — View and switch between multiple servers
• Configuration — Set database connections and server options
• Status Monitoring — See which servers are running and healthy
• Quick Actions — Start, stop, and manage servers from UI

Code Generation Actions

Generate and update server code with buttons:

• Build — Create initial server from schema
• Regenerate — Update server when schema changes
• Migrate — Apply database schema changes
• Deploy — Package and deploy server

These map to the DDK's code generation pipeline, exposed as simple UI operations.

Database Management

Manage databases visually:

• Database List — See all configured databases
• Connection Testing — Verify database connectivity
• Migration History — View applied and pending migrations
• Schema Inspection — Browse database tables and columns

GraphiQL Integration

Test and explore your GraphQL API:

• Embedded GraphiQL — Interactive API explorer built-in
• Query Builder — Construct queries visually
• Schema Documentation — Auto-generated API docs
• Request History — Reuse and share queries
• Response Formatting — Pretty-print JSON responses

User Interface Layout

The DDK frontend is organized into functional panels:

Left Panel

Server Context:

• List of servers in your project
• Database connections
• Type library (browse all schema types)

GraphiQL Context:

• Server selector for testing
• Deployed server list

Center Panel

Schema Visualizer:

• Interactive graph of your data model
• Drag to add types and draw relationships
• Zoom and pan to navigate large schemas
• Select types to edit properties

Code Editor (Optional):

• View generated code
• Edit custom resolvers
• Syntax highlighting and IntelliSense

Right Panel

Schema Overview:

• Summary statistics (type counts, field counts)
• Resolver status (generated vs custom)
• Quick links to entities
• AI assistant (ORA) for help

Action Bar

Main Actions:

• Build — Generate new server
• Regenerate — Update server code
• Migrate — Apply database changes
• Code — View/edit custom resolvers
• Settings — Configure server options
• Search — Find types and fields

Workflow Example

Creating a New Data Server

1. Click "Create Server" — Opens server creation wizard
2. Name Your Server — Give it a descriptive name
3. Configure Database — Set PostgreSQL connection details
4. Design Schema — Add types and relationships visually
5. Click "Build" — DDK generates complete server
6. Test API — Switch to GraphiQL to try queries
7. Iterate — Add more types, regenerate as needed

Adding a New Entity Type

1. Drag "Table Type" — From palette to canvas
2. Name the Type — Click to rename (e.g., "Product")
3. Add Fields — Click "Add Field" for each property
4. Set Field Types — Choose String, Int, Float, Boolean, etc.
5. Mark Required — Toggle required/optional for each field
6. Add Relationships — Draw lines to connect related types
7. Regenerate — Click "Regenerate" to update server code
8. Migrate — Click "Migrate" to update database

Testing Your API

1. Switch to GraphiQL — Use left sidebar toggle
2. Select Server — Choose server from list
3. Explore Schema — Browse available queries and types
4. Write Query — Use autocomplete to build query
5. Execute — Click play to run query
6. Inspect Results — Review JSON response

Visual Schema Design

Types of Schema Elements

Table Types (Database Tables):

• Stored in database
• Full CRUD operations
• Support relationships

DTO Types (Data Transfer Objects):

• Computed/derived types
• Not stored in database
• Used for complex responses

Input Types:

• For mutation arguments
• Validate input data
• Type-safe parameters

Enums:

• Predefined value sets
• Enforce valid options
• Documentation-friendly

Defining Relationships

One-to-Many:

• Drag from parent to child type
• Automatically creates foreign key
• Generates relationship resolvers

Many-to-Many:

• Create junction type explicitly
• Connect junction to both sides
• Allows additional relationship data

One-to-One:

• Similar to one-to-many
• Enforced at database level

Code Integration

Generated Code

The DDK generates:

• Database models
• GraphQL resolvers
• Type definitions
• Migration scripts
• API documentation

All accessible through the code view.

Custom Code

Add your business logic:

• Custom resolvers for complex queries
• Computed fields
• Business validation rules
• Special mutations

Custom code preserved during regeneration.

Benefits of Visual Interface

Accessibility

• No need to learn GraphQL schema syntax
• Database knowledge helpful but not required
• Point-and-click instead of code-first
• Immediate visual feedback

Productivity

• Faster than writing schema by hand
• Auto-completion and validation
• See entire model at a glance
• Rapid iteration and experimentation

Collaboration

• Visual models easier to discuss with team
• Non-developers can understand schema
• Export diagrams for documentation
• Shared understanding of data model

Quality

• UI enforces valid schemas
• Impossible to create syntax errors
• Relationships validated automatically
• Consistent naming and patterns

Best Practices

Schema Organization

1. Group Related Types — Keep them visually close on canvas
2. Use Clear Names — Descriptive, business-meaningful names
3. Consistent Naming — Follow same patterns throughout
4. Document with Comments — Add descriptions to types and fields

Workflow

1. Design First — Plan your data model before building
2. Iterate Incrementally — Add a few types, test, repeat
3. Test as You Go — Use GraphiQL after each regeneration
4. Version Control — Commit schema changes to git

Performance

1. Limit Auto-Regeneration — Only regenerate when needed
2. Test with Small Data — Use samples during development
3. Index Key Fields — Add database indexes for queries
4. Monitor Query Performance — Check GraphiQL timing

Keyboard Shortcuts

Speed up your workflow:

• Ctrl+S / Cmd+S — Save schema
• Ctrl+B / Cmd+B — Build server
• Ctrl+R / Cmd+R — Regenerate
• Ctrl+M / Cmd+M — Migrate database
• Ctrl+K / Cmd+K — Open search
• Delete — Remove selected type or field
• Ctrl+Z / Cmd+Z — Undo
• Ctrl+Y / Cmd+Y — Redo

Troubleshooting

Schema Won't Regenerate

• Check for validation errors (red highlights)
• Ensure all types have at least one field
• Verify database connection is active
• Review error messages in action bar

Migration Fails

• Check database permissions
• Ensure database is accessible
• Review migration SQL for conflicts
• Try migrating on fresh database first

GraphiQL Shows Errors

• Verify server is running
• Check server logs for errors
• Ensure schema was regenerated
• Test database connection

Next Steps

• Learn GraphQL Schema: Schema Guide
• Understand Architecture: DDK Architecture
• Build Workflows: Building and Configuring Workflows