Ümit Tunç
70 lines
3.0 KiB
Markdown
70 lines
3.0 KiB
Markdown
# 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](https://reactjs.org/) + [Vite](https://vitejs.dev/)
|
|
- **Styling**: [Material UI (MUI)](https://mui.com/) with a custom glassmorphic theme.
|
|
- **Editor**: [@monaco-editor/react](https://github.com/suren-atoyan/monaco-react)
|
|
- **Data Grid**: [MUI X Data Grid](https://mui.com/x/react-data-grid/)
|
|
- **State Management**: [Zustand](https://github.com/pmndrs/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
|
|
|
|
1. Install dependencies:
|
|
```bash
|
|
npm install
|
|
```
|
|
2. Start development server:
|
|
```bash
|
|
npm run dev
|
|
```
|
|
3. Build for production:
|
|
```bash
|
|
npm run build
|
|
```
|