Dev KaboSec - Dashboard Application

A powerful, modern dashboard application built with React, TypeScript, and Node.js for managing accounts and proxies with real-time monitoring and analytics.

🚀 Features

Core Features

• Professional Dark-Themed Dashboard - Modern, responsive UI with Tailwind CSS
• Account Management - Create, manage, and track Facebook accounts
• Proxy Management - Upload, test, and monitor proxy performance
• Real-Time Monitoring - Live system health checks and performance metrics
• Activity Logging - Comprehensive operation logs and error tracking
• tRPC Backend - Type-safe API with full TypeScript support

Advanced Features

• Smooth Animations - Page transitions, card hover effects, and loading states
• System Health Dashboard - Real-time performance metrics and status indicators
• Dark/Light Theme Support - Theme customization with next-themes
• Responsive Design - Mobile-friendly interface
• Error Handling - Comprehensive error boundaries and retry mechanisms

📋 Tech Stack

Frontend

• React 19 - Modern UI framework
• TypeScript - Type-safe code
• Vite - Lightning-fast build tool
• Tailwind CSS - Utility-first CSS framework
• Framer Motion - Animation library
• Recharts - Data visualization
• React Hook Form - Form management
• Radix UI - Headless UI components
• TanStack Query - Data fetching and caching
• tRPC Client - Type-safe API client

Backend

• Node.js - Runtime environment
• Express - Web framework
• tRPC - Type-safe RPC framework
• Drizzle ORM - Type-safe database ORM
• MySQL - Database

DevTools

• Vitest - Unit testing
• ESBuild - Fast bundler
• Prettier - Code formatter

🛠️ Installation

Prerequisites

• Node.js 18+
• pnpm 10.4.1+
• MySQL database

Setup

1. Clone the repository

git clone https://github.com/rsalaboshra-eng/dev-kabosec-web.git
cd dev-kabosec-web

2. Install dependencies

pnpm install

3. Configure environment variables

# Copy the example env file
cp .env.example .env.local

# For production
cp .env.production.example .env.production

# Edit and add your configuration
nano .env.local

4. Setup database

# Generate migrations and run them
pnpm run db:push

5. Start development server

pnpm run dev

The application will be available at http://localhost:5173

📦 Available Scripts

Development

# Start development server with hot reload
pnpm run dev

# Type check
pnpm run check

# Format code with Prettier
pnpm run format

# Run tests
pnpm run test

Production

# Build for production
pnpm run build

# Preview production build
pnpm run preview

# Start production server
pnpm run start

# Push database migrations
pnpm run db:push

🏗️ Project Structure

dev-kabosec-web/
├── client/              # Frontend React application
│   ├── src/
│   │   ├── components/  # Reusable UI components
│   │   ├── pages/       # Page components
│   │   ├── hooks/       # Custom React hooks
│   │   └── App.tsx      # Main app component
│   └── index.html       # HTML entry point
├── server/              # Backend Node.js/Express server
│   ├── _core/
│   │   ├── index.ts     # Server entry point
│   │   ├── router.ts    # tRPC routes
│   │   └── db.ts        # Database setup
│   └── procedures/      # tRPC procedures
├── shared/              # Shared types and utilities
│   └── schema.ts        # Shared type definitions
├── drizzle/             # Database migrations
├── package.json         # Project dependencies
├── vite.config.ts       # Vite configuration
├── tsconfig.json        # TypeScript configuration
└── README.md            # This file

🔐 Environment Variables

Required Variables

# App
VITE_APP_ENV=production
NODE_ENV=production

# Database
DATABASE_URL=mysql://user:password@localhost:3306/kabosec

# Server
SERVER_PORT=3000
SERVER_HOST=0.0.0.0

# JWT
JWT_SECRET=your-secret-key

Optional Variables

# AWS S3
AWS_S3_BUCKET=your-bucket
AWS_ACCESS_KEY_ID=your-key

# OpenAI
OPENAI_API_KEY=your-api-key

# Mail.tm
MAIL_TM_API_KEY=your-api-key

# Facebook
FACEBOOK_APP_ID=your-app-id
FACEBOOK_APP_SECRET=your-secret

See .env.production for complete configuration reference.

🚀 Deployment

Docker Deployment

1. Build Docker image

docker build -t dev-kabosec-web:latest .

2. Run container

docker run -p 3000:3000 \
  -e DATABASE_URL=mysql://... \
  -e JWT_SECRET=your-secret \
  dev-kabosec-web:latest

GitHub Actions

The project includes automated CI/CD pipeline with:

• Dependency installation
• Type checking
• Testing
• Building
• Docker image creation
• Deployment to production

Secrets needed in GitHub:

• DEPLOY_KEY - SSH private key
• DEPLOY_HOST - Server hostname
• DEPLOY_USER - SSH username
• DEPLOY_PATH - Deployment directory

📊 API Documentation

Core Endpoints

All endpoints are type-safe through tRPC.

Account Operations

• account.create - Create new account
• account.list - List all accounts
• account.getById - Get account details
• account.delete - Delete account

Proxy Management

• proxy.upload - Upload proxy list
• proxy.test - Test proxy connectivity
• proxy.list - List all proxies
• proxy.getStats - Get proxy statistics

Monitoring

• health.check - System health check
• metrics.get - Performance metrics
• logs.list - Operation logs

🧪 Testing

# Run all tests
pnpm run test

# Run tests in watch mode
pnpm run test:watch

# Run tests with coverage
pnpm run test:coverage

🐛 Known Issues

Refer to todo.md for list of planned features and known issues.

Phase 4 - In Progress

• Export to CSV functionality
• Import from file
• Advanced search and filtering
• Bulk operations
• Settings panel

📝 Contributing

1. Create a feature branch: git checkout -b feature/amazing-feature
2. Commit changes: git commit -m 'Add amazing feature'
3. Push to branch: git push origin feature/amazing-feature
4. Open a Pull Request

📄 License

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

👨‍💻 Author

Rabih Salaboshra - @rsalaboshra-eng

🤝 Support

For support, email salaboshra@example.com or open an issue on GitHub.

🔗 Links

• GitHub Repository
• Issues
• Discussions

---

Last Updated: February 25, 2026 Version: 1.0.0