METABYTE
  • Главная
  • Проекты
  • Блог
  • Цены
  • О нас
  • Контакты
Telegram

Есть проект? Давайте запустим.

Лично разберём задачу, затем письменно зафиксируем этапы, сроки и бюджет.

Начать проект
METABYTE

Студия полного цикла. Создаём веб-приложения, игры (Steam / mobile / web / Roblox) и Telegram Mini Apps.

Язык

Услуги

  • Telegram Mini App
  • Web-приложение
  • Игры (Steam / Mobile / Web)
  • SaaS MVP
  • AI-интеграции
  • Цены

Навигация

  • Главная
  • Проекты
  • Блог
  • Команда
  • Контакты

Контакты

  • GitHub
  • Telegram
  • Email
КонфиденциальностьУсловияCookiesЮр. информация

© 2026 METABYTE. Все права защищены.

Сделано с и React

METABYTE
  • Главная
  • Проекты
  • Блог
  • Цены
  • О нас
  • Контакты
Telegram

Есть проект? Давайте запустим.

Лично разберём задачу, затем письменно зафиксируем этапы, сроки и бюджет.

Начать проект
METABYTE

Студия полного цикла. Создаём веб-приложения, игры (Steam / mobile / web / Roblox) и Telegram Mini Apps.

Язык

Услуги

  • Telegram Mini App
  • Web-приложение
  • Игры (Steam / Mobile / Web)
  • SaaS MVP
  • AI-интеграции
  • Цены

Навигация

  • Главная
  • Проекты
  • Блог
  • Команда
  • Контакты

Контакты

  • GitHub
  • Telegram
  • Email
КонфиденциальностьУсловияCookiesЮр. информация

© 2026 METABYTE. Все права защищены.

Сделано с и React

METABYTE
УслугиКейсыЦеныБлогО насFAQКонтакты
TelegramОбсудить проект
Все проекты
SaaS / Infrastructure

NeoProxy

Proxy Management SaaS

SaaS панель управления прокси-сервисом: мониторинг USB-модемов, ротация IP, биллинг с подписками и аналитика выручки.

GitHub
ГЛАВНАЯ МЕТРИКА27Страниц
КАТЕГОРИЯSaaS / Infrastructure
СТЕК8
ЦИФРЫ
27
Страниц
3
Ролей
30+
Компонентов
О проекте

Что мы сделали

NeoProxy — полноценная SaaS-платформа для управления прокси-сервисом на базе USB-модемов. Включает личный кабинет пользователя, админ-панель и публичный лендинг.

Пользователи управляют своими прокси: просматривают статус модемов, контролируют трафик (download/upload), настраивают автоматическую ротацию IP по интервалам. Dashboard показывает статистику использования полосы пропускания и активности прокси.

Система биллинга с 3 тарифными планами (Basic, Professional, Enterprise), привязкой карт Visa/Mastercard/PayPal, историей платежей и скачиванием инвойсов.

Админ-панель включает: управление пользователями, настройку тарифных планов, аналитику выручки с графиками динамики доходов по периодам, API логи для отладки интеграций клиентов.

Хотите похожий маркетплейс / биллинг-сервис? B2B-платформа подписок, multitenant SaaS, реселлер-маркетплейс с авто-биллингом и API — соберём за 4-6 недель на Stripe / Postgres / Next.js. AI-бриф за 60 секунд → детальная смета за 24 часа.

Технологии

Vue.js 3
Pinia
Vue Router
Tailwind CSS
Chart.js
Vite
Axios
HeadlessUI
FEATURES

Ключевые функции

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 для бухгалтерии
  • Мобильная адаптация всех страниц
Интерактивная демонстрация

Как это работает

Нажмите «Запустить демо» чтобы увидеть путь пользователя по шагам

Управление прокси и подпиской

1

Авторизация

Email/Password login

2

Dashboard

Статистика прокси, bandwidth, ротации

3

Proxy List

Список USB модемов с IP и статусом

4

IP Rotation

Ручная или автоматическая смена IP

5

Billing

Текущий план, способы оплаты, история

6

Settings

Настройки профиля и уведомлений

Почему это работает

Что даёт бизнесу

Каждое решение = конкретная выгода для бизнеса: экономия, скорость, конверсия

Feature-Based Architecture

Каждая фича (dashboard, proxies, billing, admin) изолирована в своей папке с views, components, stores. Три layout-а: PublicLayout, AuthLayout, DashboardLayout для разных секций приложения.

Vue 3Clean ArchitectureModular

Pinia State Management

Централизованное хранилище состояния для прокси, пользователя, биллинга. Actions для API-запросов, getters для фильтрации и поиска. Persist plugin для сохранения сессии.

PiniaReactive StateTypeSafe

Chart.js Visualization

Интерактивные графики: Line chart для динамики выручки, Doughnut chart для распределения по тарифам, Bar chart для bandwidth usage. Адаптивный resize.

Chart.jsData VizResponsive

Billing System

Полная система биллинга: 3 тарифных плана с разными лимитами, привязка карт с маскированием номера, PayPal интеграция, история платежей со скачиванием инвойсов.

SubscriptionsPayment MethodsInvoices
Под капотом

Как это устроено

Многоуровневая архитектура для надёжности: каждый слой отвечает за свою задачу

1

Views Layer

Public PagesAuth PagesDashboardAdmin PanelBilling
2

Components Layer

UsageChartActivityChartTrafficChartProxyTablePaymentForm
3

State Layer (Pinia)

proxyStoreuserStorebillingStoreadminStore
4

API Layer (Axios)

Proxy APIAuth APIBilling APIAdmin APIMonitoring API
Проверенные сервисы

Работает на лучших решениях

Интегрированы мировые лидеры: 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

Понравился кейс?

Расскажите, какой результат нужен. Лично разберём контекст и вернёмся с составом работ, этапами и реалистичной оценкой.

Обсудить задачуTelegram · @metabytemdДругие кейсы
METABYTE

Проектируем и разрабатываем web- и mobile-продукты — от первого разговора до релиза и поддержки.

УСЛУГИ
  • Telegram Mini Apps
  • SaaS / Web
  • Мобильные приложения
  • Игры
  • AI-интеграции
  • Дизайн
СТУДИЯ
  • Кейсы
  • Процесс
  • Цены
  • FAQ
  • О нас
КОНТАКТЫ
  • Telegram · @metabytemd
  • Email · vm@metabyte.md
  • GitHub · LegoDev94
  • Офис · Кишинёв, MD
ЮРИДИЧЕСКОЕ
  • Политика конфиденциальности
  • Пользовательское соглашение
  • Cookies
  • Юридические данные
© 2026 METABYTE · Кишинёв, Республика Молдовасборка 048 · commit 63fe65d · развёрнуто 2026-07-26
RUROEN