Visual Database Flow Tracker

A modern, visual system for managing database schemas, designing data flow traces, and executing queries across multiple database servers.

📚 Documentation

• Technical Specification - Complete technical specification with architecture, data models, and feature details
• Query Builder Specification - Detailed specification for the Log Viewer & Query Builder module

🎯 Key Features

1. Manual Schema Management

• Define database schemas manually (tables, fields, relationships)
• Visual schema editor with drag & drop positioning
• Import schema from live databases (optional)
• Support for multiple database types (MSSQL, PostgreSQL, MySQL)

2. Visual Flow Designer

• Drag & drop flow canvas using React Flow
• Add tables to flow steps
• Configure WHERE conditions with visual builder
• Link flow steps with data dependencies
• Preview generated SQL queries

3. Multi-Database Support

• Connect to multiple database servers
• Execute flows across different databases
• Connection pooling and management
• Query optimization and validation

4. Execution & Tracing

• Execute flows and trace data
• Visualize results in tabular format
• Audit trail for all executions
• Export results (CSV, JSON)

5. Log Viewer & Query Builder

• View execution logs with filtering and search
• Build SQL queries with parameterized inputs
• Test queries before converting to flows
• Auto-convert SQL queries to visual flows
• Save and reuse query templates

🛠️ Technology Stack

Frontend

• Framework: Next.js 14+ (App Router)
• Language: TypeScript
• UI Library: React 18+
• Flow Visualization: React Flow
• State Management: Zustand
• Styling: Vanilla CSS with CSS Modules
• Icons: Lucide React

Backend

• Runtime: Node.js
• API: Next.js API Routes
• Database: PostgreSQL (for app data)
• ORM: Prisma
• Database Drivers: mssql, pg, mysql2

🏗️ Architecture

This project follows Clean Architecture principles:

1. Domain Layer - Core business entities and rules
2. Application Layer - Use cases and business logic
3. Infrastructure Layer - External integrations (databases, APIs)
4. Presentation Layer - UI components and pages

See Technical Specification for detailed architecture diagrams.

🚀 Getting Started

# Install dependencies
npm install

# Set up environment variables
cp .env.example .env

# Run database migrations
npx prisma migrate dev

# Start development server
npm run dev

Open http://localhost:3000 to view the application.

📁 Project Structure

visual-db-flow-tracker/
├── docs/                    # Documentation
├── src/
│   ├── app/                 # Next.js App Router
│   ├── domain/              # Domain layer (entities, interfaces)
│   ├── application/         # Application layer (use cases)
│   ├── infrastructure/      # Infrastructure layer (repositories, clients)
│   └── components/          # Presentation layer (UI components)
├── prisma/                  # Database schema
└── public/                  # Static assets

🎨 UI Mockups

See the docs/images folder for UI mockups:

• Schema Editor
• Flow Designer
• Query Builder & Log Viewer
• Architecture Diagram

📝 Development Phases

1. Foundation - Project setup, architecture, design system
2. Schema Management - Schema CRUD, visual editor, relationships
3. Flow Designer - Visual flow canvas, step configuration
4. Database Integration - Multi-database support, query execution
5. Log Viewer & Query Builder - Execution logs, SQL builder, query-to-flow conversion
6. Polish & Testing - UI/UX refinements, testing, documentation

🤝 Contributing

This is a proof-of-concept project. For questions or suggestions, please refer to the documentation.

📄 License

MIT