NeoProxy
Proxy Management SaaS
SaaS панель управления прокси-сервисом: мониторинг USB-модемов, ротация IP, биллинг с подписками и аналитика выручки.
О проекте
NeoProxy — полноценная SaaS-платформа для управления прокси-сервисом на базе USB-модемов. Включает личный кабинет пользователя, админ-панель и публичный лендинг.
Пользователи управляют своими прокси: просматривают статус модемов, контролируют трафик (download/upload), настраивают автоматическую ротацию IP по интервалам. Dashboard показывает статистику использования полосы пропускания и активности прокси.
Система биллинга с 3 тарифными планами (Basic, Professional, Enterprise), привязкой карт Visa/Mastercard/PayPal, историей платежей и скачиванием инвойсов.
Админ-панель включает: управление пользователями, настройку тарифных планов, аналитику выручки с графиками динамики доходов по периодам, API логи для отладки интеграций клиентов.
Технологии
Ключевые функции
USB Модемы
Мониторинг LTE модемов с ротацией IP
Dashboard
Графики bandwidth и активности
Биллинг
3 тарифа, карты, PayPal, инвойсы
Аналитика выручки
Динамика доходов, retention rate
Управление планами
CRUD для тарифных планов
API Логи
Отладка клиентских интеграций
Задача клиента → Результат
Как я решил бизнес-задачу и какую ценность это принесло
Задача клиента
Заказчику нужна была панель управления для прокси-сервиса на базе USB LTE-модемов. Требовался полный цикл: от мониторинга модемов и трафика до системы биллинга с подписками и админ-панели с аналитикой для отслеживания выручки бизнеса.
Что я сделал
Разработал SPA на Vue 3 с feature-based архитектурой: 3 layout-а (public, auth, dashboard), Pinia store для state management, Chart.js для визуализации данных. Реализовал систему ролей (user, admin, superadmin), полную систему биллинга с привязкой карт и PayPal, детальную аналитику выручки с экспортом в CSV.
Бизнес-результат
- 27 страниц приложения с 3 разными layout-ами
- Real-time мониторинг 8+ USB модемов с отображением signal strength
- Система биллинга: 3 тарифа, Visa/Mastercard/PayPal, история платежей
- Аналитика выручки с графиками за 7/30/90/365 дней
- Экспорт данных в CSV для бухгалтерии
- Мобильная адаптация всех страниц
Как это работает
Нажмите «Запустить демо» чтобы увидеть путь пользователя по шагам
Управление прокси и подпиской
Авторизация
Email/Password login
Dashboard
Статистика прокси, bandwidth, ротации
Proxy List
Список USB модемов с IP и статусом
IP Rotation
Ручная или автоматическая смена IP
Billing
Текущий план, способы оплаты, история
Settings
Настройки профиля и уведомлений
Что даёт бизнесу
Каждое решение = конкретная выгода для бизнеса: экономия, скорость, конверсия
Feature-Based Architecture
Каждая фича (dashboard, proxies, billing, admin) изолирована в своей папке с views, components, stores. Три layout-а: PublicLayout, AuthLayout, DashboardLayout для разных секций приложения.
Pinia State Management
Централизованное хранилище состояния для прокси, пользователя, биллинга. Actions для API-запросов, getters для фильтрации и поиска. Persist plugin для сохранения сессии.
Chart.js Visualization
Интерактивные графики: Line chart для динамики выручки, Doughnut chart для распределения по тарифам, Bar chart для bandwidth usage. Адаптивный resize.
Billing System
Полная система биллинга: 3 тарифных плана с разными лимитами, привязка карт с маскированием номера, PayPal интеграция, история платежей со скачиванием инвойсов.
Как это устроено
Многоуровневая архитектура для надёжности: каждый слой отвечает за свою задачу
Views Layer
Components Layer
State Layer (Pinia)
API Layer (Axios)
Работает на лучших решениях
Интегрированы мировые лидеры: Stripe для платежей, OpenAI для AI, SendGrid для писем — надёжность и масштаб
Vue 3 Composition API
Reactive refs, computed, watch, lifecycle hooks с <script setup>
Pinia
State management с actions, getters и persist plugin
Chart.js
Line, Doughnut, Bar charts для аналитики и дашборда
Tailwind CSS
Utility-first CSS с кастомной неоновой темой
HeadlessUI
Доступные UI компоненты: Dialogs, Dropdowns, Tabs
VueUse
Утилиты: useStorage, useDark, useClipboard
Заинтересовал проект? Свяжитесь со мной для обсуждения деталей.