andb-ui

Desktop application for andb-core database migration tool using Electron + Vue.js

🚀 Features

• Auto-hide Sidebar: Collapsible navigation with keyboard shortcuts
• Dual-Pane Layout: Resizable source/destination panes for efficient comparison
• Multiple Database Connections: Manage multiple database configurations
• Connection Pairs: Select source ↔ target for compare/migrate operations
• Visual Diff: Side-by-side comparison with status indicators
• Export Preview: Live SQL preview with syntax highlighting
• Migration Management: Create and track database migrations
• Script Generator: Generate andb-core CLI scripts
• Dark/Light Theme: Modern UI with theme support

🛠️ Tech Stack

• Frontend: Vue.js 3 + TypeScript
• Desktop: Electron
• Styling: Tailwind CSS
• Icons: Lucide Vue Next
• State Management: Pinia
• Routing: Vue Router
• Build Tool: Vite
• Database Tool: andb-core

📦 Installation

# Clone the repository
git clone https://github.com/ph4n4n/andb-ui.git
cd andb-ui

# Install dependencies
npm install

# Start development server
npm run dev

# Start Electron app
npm run electron:dev

# Build for production
npm run electron:build

🎯 Usage

Development

# Start Vite dev server
npm run dev

# Start Electron with hot reload
npm run electron:dev

Production

# Build the application
npm run build

# Package for distribution
npm run electron:build

📁 Project Structure

andb-ui/
├── electron/           # Electron main process
│   ├── main.ts        # Main process entry
│   └── preload.ts     # Preload script
├── src/               # Vue.js application
│   ├── components/    # Reusable components
│   ├── views/         # Page components
│   ├── stores/        # Pinia stores
│   ├── router/        # Vue Router configuration
│   ├── utils/         # Utility functions
│   ├── types/         # TypeScript types
│   ├── App.vue        # Root component
│   ├── main.ts        # Application entry
│   └── style.css      # Global styles
├── public/            # Static assets
├── index.html         # HTML template
├── package.json       # Dependencies and scripts
├── vite.config.ts     # Vite configuration
├── tailwind.config.js # Tailwind CSS configuration
└── tsconfig.json      # TypeScript configuration

🎨 UI Components

Layout Components

• Sidebar: Auto-hide navigation with connection management
• Header: Connection pair selector and quick actions
• Main Content: Resizable dual-pane layout

Views

• Dashboard: Overview of connections and recent operations
• Export: Database objects export with SQL preview
• Compare: Side-by-side database comparison
• Migrate: Migration management and history
• Scripts: andb-core script generator
• Settings: Application configuration

⌨️ Keyboard Shortcuts

• Ctrl+B: Toggle sidebar
• Ctrl+Left/Right: Resize panes
• Ctrl+Shift+C: Compare selected
• Ctrl+Shift+E: Export selected
• Ctrl+Shift+M: Create migration

🔧 Configuration

Environment Variables

Create a .env file in the root directory:

# Development
NODE_ENV=development

# Database connections (example)
DEV_DB_HOST=localhost
DEV_DB_NAME=dev_database
DEV_DB_USER=root
DEV_DB_PASS=password

STAGE_DB_HOST=stage-server.com
STAGE_DB_NAME=stage_database
STAGE_DB_USER=stage_user
STAGE_DB_PASS=stage_password

PROD_DB_HOST=prod-server.com
PROD_DB_NAME=prod_database
PROD_DB_USER=prod_user
PROD_DB_PASS=prod_password

🤝 Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• andb-core - Database migration tool
• Vue.js - Progressive JavaScript framework
• Electron - Cross-platform desktop apps
• Tailwind CSS - Utility-first CSS framework
• Lucide - Beautiful & consistent icon toolkit

---

Made with ❤️ by ph4n4n