Спросил у подруги, какой проект сделать: - Хочу, чтобы при клике появлялись звезды и разлетались, как в старых играх.

Ага, подумал я, функция генерации, спрайтик, анимация CSS или на js. Ну как-то не густо. А что можно вытащить из этой идеи, чтобы что-то интересное сделать, какой-то новый опыт приобрести.

“Бизнес” хотел просто звездочки по клику… И тут я придумываю собирать логи по событиям мыши и показывать их на фоне. А можно еще сразу Sentry подключить. Можно собирать метрики, следить за поведением пользователя.

Итоги первого вечера:

Выбрал event-driven архитектуру ui, структура кода FSD. Core кода немного, сделаю 100% покрытие тестами, для разминки.

Пообщался с иишкой, завел в Obsidian проект под это дело, накатал документы: Диздок, План запуска MVP, План полного завершения.

Раскатал FSD, написал типы сущностей, с которыми придется работать, появление звездочек, пока только на месте.

Не работал еще с анимациями, буду курить этот вопрос, но пока что есть несколько идей, как можно сделать анимации, и я хочу применить их все, чтобы можно было переключаться между ними по кнопке: 1. Div`ы на js. Рендерится список реакт компонентов и ездит по экрану на жс выхлопах. 2. На CSS анимациях. 3. Что-то третье надо бы сделать. Canvas?

Еще у меня есть идея для полноценного бекенда для этого проекта, но уже как отдельный петпроект. Он бы выполнял две вещи: сбор аналитики и иммитация посещений.

Какие у вас есть идеи, что можно еще вытащить полезного для разработчика из такой незамысловатой идеи?

Стек: Next.js Latest React 19 Zustand TypeScript strict mode SCSS modules, CSS animations Docker, Github actions, Sentry

#петпроект #фронтенд #frontend #petproject #fullstack