Skip to content

Latest commit

 

History

History
179 lines (135 loc) · 3.61 KB

README.md

File metadata and controls

179 lines (135 loc) · 3.61 KB

Rukhalt Client

Frontend application for Rukhalt Backup Management System.

Features

  • 🎨 Modern React UI with TypeScript
  • ⚡ Vite for fast development
  • 🎨 Tailwind CSS for styling
  • 🔐 JWT authentication
  • 📊 Dashboard with real-time metrics
  • 📦 Backup management interface
  • 🐘 PostgreSQL backup and restore
  • 🖥️ VPS instance management
  • 📝 Activity logs and audit trail

Tech Stack

  • Framework: React 18
  • Language: TypeScript
  • Build Tool: Vite
  • Styling: Tailwind CSS
  • HTTP Client: Axios
  • State Management: React Context
  • Routing: React Router

Quick Start

Prerequisites

  • Node.js 18+ and npm
  • Docker & Docker Compose (for containerized development)

Development Setup

  1. Navigate to client directory:
cd rukhalt/client
  1. Install dependencies:
npm install
  1. Copy environment file:
cp .env.example .env.local
  1. Start development server:
npm run dev
  1. Access the application:

Docker Development

docker compose up -d

Available Scripts

npm run dev          # Start development server
npm run build        # Build for production
npm run preview      # Preview production build
npm run lint         # Run ESLint
npm run type-check   # Run TypeScript type checking

Project Structure

client/
├── src/
│   ├── components/        # Reusable components
│   ├── contexts/          # React contexts
│   ├── pages/            # Page components
│   │   ├── Dashboard/    # Dashboard page
│   │   ├── Backups/      # Backups management
│   │   ├── Instances/    # Instance management
│   │   ├── ActivityLogs/ # Audit logs
│   │   └── ...
│   ├── services/         # API services
│   ├── utils/            # Utility functions
│   ├── App.tsx           # Main app component
│   └── main.tsx          # Entry point
├── public/               # Static assets
├── Dockerfile            # Production Docker image
├── Dockerfile.dev        # Development Docker image
├── nginx.conf            # Nginx configuration
└── package.json          # Dependencies

Environment Variables

Create a .env.local file:

VITE_API_URL=http://localhost:8080/api/v1

Building for Production

npm run build

The build output will be in the dist/ directory.

Docker Production Build

docker build -t rukhalt-client:latest .

API Integration

The client communicates with the Rukhalt server API. Configure the API URL in .env.local:

VITE_API_URL=http://localhost:8080/api/v1

Features Overview

Dashboard

  • System health overview
  • Storage usage charts
  • Recent backup activity
  • Quick actions
  • Upcoming scheduled backups

Backup Management

  • Create on-demand backups
  • Schedule automated backups
  • View backup history
  • Download backups
  • Restore from backups

Instance Management

  • PostgreSQL instances
  • VPS instances
  • Object storage instances
  • Connection testing
  • Credential management

Activity Logs

  • Audit trail
  • User actions
  • System events
  • Filtering and search

Development

Adding New Pages

  1. Create page component in src/pages/
  2. Add route in src/App.tsx
  3. Update navigation in src/components/Layout.tsx

API Services

API calls are centralized in src/services/api.ts. Add new endpoints there:

export const myNewEndpoint = async () => {
  const response = await api.get('/my-endpoint');
  return response.data;
};

License

MIT