Project Description & Details

Задача

Solidjs Glider решает прикладную задачу: Solidjs-glider - это динамическое веб-приложение, использующее фреймворк Solid.js для обеспечения плавного пользовательского опыта. Оно интегрирует Firebase для обработки данных в реальном времени и использует современные библиотеки, такие как lodash и moment, для эффективной манипуляции данными и управления временем. Визаульно представляет собой клон старого twitter

Это учебный проект (завершён и используется), где отрабатывались конкретные паттерны и инструменты без лишней обвязки.

Кейс демонстрирует типовой цикл разработки: постановка → прототип → стабилизация → сопровождение.

Перед стартом зафиксировали критерии готовности: понятный первый экран, предсказуемые ошибки форм, возможность доработки без переписывания половины кодовой базы.

Решение

Собран рабочий прототип/продукт с понятной навигацией и предсказуемым поведением форм и списков. Демо доступно по ссылке на странице.

Сценарии спроектированы так, чтобы основные действия укладывались в один–два экрана: меньше переключений, меньше ошибок при вводе. Навигация и подписи полей согласованы с привычными паттернами — пользователю не нужно «учить интерфейс».

Отдельное внимание — состояния загрузки и пустые списки: skeleton/spinner там, где данные приходят асинхронно, и понятные empty-state тексты вместо пустой таблицы.

Архитектура и стек

Инфраструктура и утилиты: firebase, lodash, moment, solid-icons, solid-js.

Распределение языков в репозитории: TypeScript (94.1%), CSS (4.2%), JavaScript (1.1%), HTML (0.6%).

Слои разделены так, чтобы UI не знал деталей транспорта: адаптеры API/хранилища, доменные типы, компоненты представления. Это упрощает замену бэкенда и точечные UX-правки.

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

• firebase — использован в продуктовой логике: снижает количество самописного кода и ускоряет добавление новых экранов.
• lodash — использован в продуктовой логике: снижает количество самописного кода и ускоряет добавление новых экранов.
• moment — использован в продуктовой логике: снижает количество самописного кода и ускоряет добавление новых экранов.
• solid-icons — использован в продуктовой логике: снижает количество самописного кода и ускоряет добавление новых экранов.
• solid-js — использован в продуктовой логике: снижает количество самописного кода и ускоряет добавление новых экранов.

Дополнительно:

• Интеграция и использование firebase в продуктовой логике и интерфейсе.
• Интеграция и использование lodash в продуктовой логике и интерфейсе.
• Интеграция и использование moment в продуктовой логике и интерфейсе.

Результат

Проект доведён до рабочего состояния: команда/пользователь получает стабильный инструмент вместо ручных таблиц и переписки. Сокращено время на типовые операции за счёт автоматизации в интерфейсе.

Исходный код открыт: https://github.com/astropsy999/solidjs-glider — можно оценить структуру модулей и стиль коммитов.

Интерактивное демо доступно по ссылке выше — можно проверить UX без развёртывания локально.

Что бы улучшил

Добавил бы e2e-тесты на критичные сценарии и вынес бы конфигурацию в отдельный слой для экспериментов. Для публичного demo — CI-сборку и preview-окружение на каждый pull request.