Crypto Price Tracker Dashboard with Alerts

Типичный заказ (Upwork/Fiverr, $200-500)

Нужен простой веб-дашборд:

Таблица топ-20 криптовалют (цена, 24h %, объём)

Обновление в реальном времени (WebSocket)

Мини-графики цены за 24h (sparklines)

Настраиваемые алерты (цена выше/ниже порога → уведомление)

Мобильно-адаптивный

Стек: Node.js, vanilla JS, Binance API

Зачем делаем

Тренировка на типичном фриланс-заказе
Портфолио-проект для Fiverr/Upwork
Можно продавать как гиг ($100-300)
Оценка: 2-3 дня разработки

Структура проекта

crypto-tracker/
├── server/
│   ├── index.js        # Fastify API + Binance REST (top-20 coins, 24h stats)
│   └── ws.js           # WebSocket — live prices от Binance
├── app/
│   ├── index.html      # SPA entry
│   ├── app.js          # Таблица + real-time обновления
│   ├── charts.js       # Мини-спарклайны (24h price history)
│   └── alerts.js       # Система алертов (browser notifications)
├── package.json
└── README.md

Фичи (MVP)

1. Real-time таблица топ-20 монет

Колонки: #, Coin, Price, 24h %, 24h Volume, Sparkline
Подсветка зелёным/красным при изменении цены
Сортировка по любой колонке

2. Sparkline-графики (24h)

Мини-график в каждой строке таблицы
Canvas или SVG, без тяжёлых библиотек
Зелёный если цена вверх, красный если вниз

3. Алерты по цене

Кнопка "Set Alert" у каждой монеты
Условие: цена выше/ниже заданного порога
Browser Notification API
Звуковой сигнал
Список активных алертов с возможностью удалить

4. Responsive дизайн

TailwindCSS
Мобильная версия: карточки вместо таблицы
Dark theme по умолчанию (крипто-аудитория любит)

API (Binance)

REST

GET /fapi/v1/ticker/24hr — 24h stats для всех пар
GET /fapi/v1/klines?symbol=BTCUSDT&interval=1h&limit=24 — данные для sparkline

WebSocket

wss://fstream.binance.com/ws/!miniTicker@arr — live prices всех пар

Технические решения

Вопрос	Решение
Фронт-фреймворк	Vanilla JS (как в futures-screener)
Стили	TailwindCSS CDN
Графики	Canvas API (свой мини-рендер) или lightweight-charts
Серверный фреймворк	Fastify
Real-time	Binance WS → Server WS → Client
Алерты	Notification API + localStorage для сохранения

Монетизация как гиг

Fiverr гиг:

"I will build a real-time crypto price tracker dashboard"

Basic ($100): 10 монет, таблица, 24h данные

Standard ($250): 20 монет, sparklines, алерты, responsive

Premium ($500): безлимит монет, кастомизация, деплой, исходники

Дополнительные продажи (upsells):

Telegram интеграция алертов (+$100)
Добавить другие биржи (+$150)
Portfolio tracker (+$200)
Кастомные индикаторы (+$150)

Ссылки для изучения конкурентов

Статус

Инициализация проекта (package.json, структура)
Server: Binance REST API (топ-20 монет)
Server: WebSocket proxy (live prices)
Frontend: таблица с данными
Frontend: real-time обновления
Frontend: sparkline графики
Frontend: система алертов
Frontend: responsive + dark theme
README с демо-скриншотами
Деплой на поддомен для демо