Привет, сетка✌️

На прошлых выходных (когда сетка лежала) я начал пет-проект совместного конструктора дашбордов для мониторинга акций и криптовалют. Идея не нова, однако для прокачки и показа навыков самое то.

TL;DR. Next.js + TanStack Query + Radix на фронте, FastAPI + SQLAlchemy на бэке, Bybit и Yahoo Finance как источники данных. Уже работает регистрация, drag-n-drop редактор досок, real-time тики и графики. В планах - коллаборативность и больше виджетов.

Цели этого пет-проекта: 1. Улучшить навыки построения архитектуры фронтенда 2. Изучить работу с TanStack Query, Zod и headless UI библиотекой Radix 3. Углубиться в тонкости работы с Next.js 4. Подтянуть понимание UX в работе без макета 5. Сделать вообще супер-пупер крутой проект, чтобы меня тут же захантили

По технологиям использовал почти привычный мне стек: React, Next.js, TypeScript, Tailwind, axios, TanStack Query, Zod, Radix UI, Websocket API, React Hook Form, React Grid Layout, recharts. Тестами пока не покрывал, хотя при инициализации поставил playwright и vitest.

По бэку: Python, FastAPI, SQLAlchemy 2.0, Alembic, MySQL, JWT, yfinance + Bybit API.

Сейчас в проекте уже сделана регистрация и вход через HttpOnly cookies с refresh-токенами и автообновлением в axios-интерцепторе, конструктор доски (drag-and-drop компонентов, автосохранение layout в БД), real-time тики c мультиплексацией Bybit и Yahoo через один сокет, оптимизация refcount по символам, чтобы не подписывать много раз на один и тот же символ, автопереподключение с восстановлением подписок, графики с переключением диапазона и статистикой (OHLC, high/low, объёмы) и async-поиск символов с автокомплитом и чипсами.

Уже могу сказать, что зря обходил стороной TanStack Query и Zod. TQ мало того, что избавил меня от того, чтобы прописывать каждый раз запросы в компонентах, вместо этого прописав один хук для получения конкретной информации, так ещё и под капотом всё это кэширует, благодаря чему при переключении графиков не приходится ждать их подгрузки. А что касается Zod, то раньше для валидации я использовал yup, с которым у меня постоянно были проблемы с типизацией, особенно в связке с React Hook Form. Zod же позиционируется как type-first валидатор, поэтому с ним всё было гладко и чётко.

Важным для меня условием разработки было писать всё самостоятельно и больше искать инфу из официальной документации и форумов, а к ИИ прибегать только в том случае, если проблема не решается. И то, разговор с ИИ я выстраивал таким образом, чтобы он не писал за меня код, а был своего рода наставником в решении проблемы. Единственное исключение - бэкенд. Там DeepSeek писал по моим ТЗ, а я ревьюил, правил и адаптировал.

В перспективе нужно докрутить UX/UI, потому что в некоторых местах вообще нет никакого фидбека, да и красивости надо навести охота, чтоб и анимации и темы были. Нужно довести CRUD у всех сущностей на фронте. Например сейчас нельзя удалить или отредактировать компоненты доски…но мне очень хотелось поделиться с вами тем, чем я сейчас занимаюсь. Так же нужно добавить больше компонентов, чтобы доски можно было делать разнообразнее и живее. А ещё нужно уже думать как архитектурно реализовать совместное использование одной доски в реальном времени.

Понимаю, что сейчас может выглядеть сыровато, но то ли ещё будет. Приглашаю Вас в комментарии, принимаю всё: и критику, и советы, и особенно похвалу. В частности хотелось бы узнать мнение насчёт следующего:

1. Как бы вы организовали shared state для нескольких пользователей на одной доске?

2. Какие компоненты вам кажутся реально полезными в таком дашборде, кроме карточек и графиков? Что бы вы добавили себе?

3. Bybit отдаёт только тикер и пару, а хочется красивые имена и логотипы. Желательно апишку без токена и с большими лимитами для парсинга

Спасибо тем, кто прочитал, пойду работать дальше👋

Ссылки на репозитории Бэк: https://github.com/Okneas/realtime-analytics-dashboard-backend Фронт: https://github.com/Okneas/realtime-analytics-dashboard-frontend