Mariavel - Modern Database Management Tool (Frontend)

Mariavel is a premium, glassmorphic database management interface built for MariaDB/MySQL. It provides an IDE-like experience for managing databases, tables, and executing complex SQL queries.

🚀 Features

Data Explorer: High-performance data viewing using MUI X Data Grid with server-side pagination.
SQL Console: Interactive SQL editor powered by Monaco Editor (the core of VS Code) with syntax highlighting and direct execution.
Technical Metadata: Detailed table and database specifications including engine, collation, and storage sizes.
Bulk Actions: Perform maintenance tasks like Truncate, Drop, and Optimize on multiple tables simultaneously.
Transfer Tools: Robust import/export capabilities supporting SQL files and compressed archives.
Responsive Design: Modern, glassmorphic UI with dark mode support and a fluid layout.

🏗️ Architecture & SOLID Principles

The application has been recently refactored to follow SOLID principles, ensuring a maintainable and scalable codebase:

Single Responsibility Principle (SRP)

Components have been decoupled into specialized units:

DatabaseTablesGrid: Dedicated to table listing and bulk operations.
SqlConsole: Isolated SQL editing and result rendering.
TechnicalOverview: Focused on metadata presentation.
MainContent: Orchestrates high-level layout and navigation.

Logic Separation (Custom Hooks)

Business logic and data fetching are extracted into custom hooks:

useTableData: Manages paginated data fetching and row mapping.
useTableSchema: Handles column definitions and type mapping from SQL to UI.

Type Safety

Verbatim Module Syntax: Configured for strict type-only imports (import type), improving build performance and code clarity.
Centralized Types: Shared interfaces are located in src/types/database.ts.

🛠️ Technology Stack

Framework: React + Vite
Styling: Material UI (MUI) with a custom glassmorphic theme.
Editor: @monaco-editor/react
Data Grid: MUI X Data Grid
State Management: Zustand
API Client: Axios

📂 Directory Structure

src/
├── components/     # Specialized UI components (DatabaseTablesGrid, SqlConsole, etc.)
├── hooks/          # Custom hooks for logic separation (useTableData, useTableSchema)
├── services/       # API service layers
├── store/          # Zustand global state management
├── types/          # Shared TypeScript interfaces
├── theme/          # MUI theme configuration
└── App.tsx         # Main application entry point

🚥 Getting Started

Install dependencies:
```
npm install
```
Start development server:
```
npm run dev
```
Build for production:
```
npm run build
```

3.0 KiB Raw Blame History