Кабинет чтения биржевой ленты. Тренажёр для крипто-трейдера, оформленный как ежедневная газета с Уолл-стрит 1929 года.
🔗 Live: livermore-1wg.pages.dev
LIVERMORE — не торговый бот. Это инструмент насмотренности: он показывает живую ленту сделок, считает индикаторы, даёт повторять чтение свечей на исторических данных и вести журнал прогнозов.
Назван в честь Джесси Ливермора — трейдера 1920-х, который заработал состояние, читая бумажную ленту тикеров без новостей и аналитики.
Весь интерфейс — стилизация под газету эпохи: палитра классной доски, шрифт Playfair Display для заголовков, Cormorant Garamond для статей, Special Elite для тикерных строк. Котировки на главной — исторические (US Steel 112¼, R.C.A. 84½). Внутри кабинета — живая крипта с Bybit / Binance / OKX.
| Слой | Технология | Зачем |
|---|---|---|
| Frontend | Next.js 16 (App Router, Turbopack) | Современный SSG, статический экспорт без серверной зависимости |
| UI | React 19 + TypeScript 5 (strict) | Типобезопасные компоненты |
| Styling | Tailwind CSS 4 + CSS Custom Properties | @theme inline мостит токены дизайна в Tailwind, темы переключаются через data-theme на <html> |
| State | Zustand 5 | Лёгкие сторы без boilerplate — market, chart, app, journal, trainer |
| Fonts | Google Fonts через next/font |
Self-hosted Playfair Display, Cormorant Garamond, Special Elite, JetBrains Mono с кириллицей |
| Charts | Canvas 2D + SVG | Tick-чарт и свечной график рисую вручную — читают CSS-переменные через getComputedStyle каждый кадр, остаются в тон с темой |
| Hosting | Cloudflare Pages | Бесплатный CDN, статика, моментальные деплои через wrangler |
| Data | Прямые REST к биржам | Bybit → Binance → OKX каскад с фолбэком при ошибке/CORS |
newsprint (бежевая газета по-умолчанию), chalkboard (тёмно-зелёная классная доска, активная), telegraph (телеграфная). Переключаются присвоением data-theme на <html>. CSS-переменные (--paper, --ink, --ledger, --oxblood, --brass) каскадно меняют всё — включая canvas-график, который читает их через getComputedStyle каждый кадр.
В Chart.tsx функция readTheme() снимает CSS-переменные с DOM перед каждым рендером и подставляет их в ctx.fillStyle / ctx.strokeStyle. При смене темы график перекрашивается без особой логики.
Маскот MrTape.tsx экспонирует window.mrTapeReact(situation) — другие компоненты дёргают её на события (открыл индикатор / угадал свечу / записал прогноз). Маскот реагирует контекстной фразой в speech-облаке.
Тренажёр использует SVG-свечной график с штриховкой <pattern> для тел свечей и <clipPath> для анимации раскрытия. Никакого canvas — всё декларативно.
next.config.ts → output: 'export'. Биржи (Binance, Bybit, OKX) отдают валидные CORS-заголовки, поэтому SDK не нужен. Если позже упрёмся в rate-limits — добавлю Cloudflare Worker как прокси.
src/
├─ app/
│ ├─ layout.tsx # Шрифты, метаданные, data-theme
│ ├─ page.tsx # View routing + transition overlay
│ └─ globals.css # Design tokens, @theme inline, утилиты
├─ components/
│ ├─ hero/
│ │ ├─ Hero.tsx # Газетная вёрстка: 3 колонки, тикер, masthead
│ │ ├─ BrokerScene.tsx # SVG-сцена брокерской: фигуры трейдеров, доска, телефон
│ │ └─ DoorCTA.tsx # 3D-дверь с rotateY анимацией
│ ├─ app/ # AppShell, Topbar, AssetSelector
│ ├─ tape/ # PricePanel, TapeFeed, QuickVerdict, IndicatorRow
│ ├─ chart/Chart.tsx # Canvas-график (tick + свечи)
│ ├─ indicators/ # Картотека индикаторов с модалкой-статьёй
│ ├─ trainer/TrainerView.tsx # SVG-тренажёр с reveal-анимацией
│ ├─ journal/JournalView.tsx # Журнал прогнозов
│ └─ mascot/MrTape.tsx # Маскот с window.mrTapeReact API
└─ lib/
├─ api/ # Bybit, Binance, OKX каскад
├─ indicators/ # Математика 50+ индикаторов
├─ store/ # Zustand: market, chart, app, journal, trainer
├─ constants.ts
├─ format.ts # fmtFraction(112.25) → "112¼"
└─ types.ts
npm install
npm run dev # http://localhost:3000npm run lint
npm run build # → out/npx wrangler pages deploy out --project-name=livermore --branch=mainwrangler.toml уже настроен:
name = "livermore"
pages_build_output_dir = "out"Build command: npx next build
Build output: out
Production branch: main
- Лента — live-цены с биржи, tick-график с paper-tape feed справа, 8 ключевых индикаторов в матрице, верификт-панель агрегированных сигналов
- Картотека — 50+ индикаторов сгруппированы по разделам (Trend / Momentum / Volatility / Price Action / Volume / Statistical), модалка-статья с формулой и пояснением для каждого
- Тренажёр — SVG-свечной график, бумага закрывает половину свечей, прогноз ВОСХОД/НИСХОД, штамп ВЕРНО/МИМО с slam-анимацией, очки и точность
- Журнал — телеграмма-форма для прогнозов, автопроверка через час, штампы исходов на записях
- WebSocket вместо polling (Bybit / Binance public WS)
- Error Boundaries на каждый раздел
- PWA manifest + offline для статичных разделов (картотека)
- Larger trainer dataset — реальные исторические данные вместо синтетики
- Тесты (Vitest на индикаторы, Playwright на e2e flow)
MIT. Используй как угодно. Не торговый совет.