From a007fa201b9ce2c752a38fa8afe92fd1826ad0ae Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=9Cmit=20Tun=C3=A7?= <umitreva@gmail.com>
Date: Fri, 24 Apr 2026 13:22:16 +0300
Subject: [PATCH] docs: add comprehensive README for frontend project
 architecture and setup

---
 frontend/README.md | 116 ++++++++++++++++++++++-----------------------
 1 file changed, 56 insertions(+), 60 deletions(-)

diff --git a/frontend/README.md b/frontend/README.md
index 7dbf7eb..a87fa9f 100644
--- a/frontend/README.md
+++ b/frontend/README.md
@@ -1,73 +1,69 @@
-# React + TypeScript + Vite
+# Mariavel - Modern Database Management Tool (Frontend)
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+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.
 
-Currently, two official plugins are available:
+## 🚀 Features
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
+- **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.
 
-## React Compiler
+## 🏗️ Architecture & SOLID Principles
 
-The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+The application has been recently refactored to follow **SOLID** principles, ensuring a maintainable and scalable codebase:
 
-## Expanding the ESLint configuration
+### 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.
 
-If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+### 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.
 
-```js
-export default defineConfig([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Other configs...
+### 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`.
 
-      // Remove tseslint.configs.recommended and replace with this
-      tseslint.configs.recommendedTypeChecked,
-      // Alternatively, use this for stricter rules
-      tseslint.configs.strictTypeChecked,
-      // Optionally, add this for stylistic rules
-      tseslint.configs.stylisticTypeChecked,
+## 🛠️ Technology Stack
 
-      // Other configs...
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
-    },
-  },
-])
+- **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
 ```
 
-You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+## 🚥 Getting Started
 
-```js
-// eslint.config.js
-import reactX from 'eslint-plugin-react-x'
-import reactDom from 'eslint-plugin-react-dom'
-
-export default defineConfig([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Other configs...
-      // Enable lint rules for React
-      reactX.configs['recommended-typescript'],
-      // Enable lint rules for React DOM
-      reactDom.configs.recommended,
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
-    },
-  },
-])
-```
+1. Install dependencies:
+   ```bash
+   npm install
+   ```
+2. Start development server:
+   ```bash
+   npm run dev
+   ```
+3. Build for production:
+   ```bash
+   npm run build
+   ```