Задача

neurodifferent.org вирішує прикладну задачу: сайт на SvelteKit з Tailwind v4 та Vite, Docker-скрипти для розробки, оптимізація зображень та Vitest. Оновлення сайту/магазину здійснюються через єдині shell-процеси.

Це особистий навчальний проект (в активній розробці), де відпрацьовувалися конкретні патерни та інструменти без зайвої обв'язки.

Кейс демонструє підхід до завдань у сфері "Маркетингові та корпоративні сайти": від постановки до здачі з зрозумілою структурою модулів.

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

Рішення

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

Сценарії спроектовані так, щоб основні дії укладалися в один-два екрани: менше переключень, менше помилок при введенні. Навігація та підписи полів узгоджені з звичними патернами — користувачу не потрібно "вчити інтерфейс."

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

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

UI та клієнт: SvelteKit, Svelte 5, Tailwind CSS.

Інфраструктура та утиліти: TypeScript, Vite, Vitest.

Розподіл мов у репозиторії: TypeScript (52.7%), Svelte (39.4%), Shell (4.3%), JavaScript (2.2%), CSS (0.9%), HTML (0.5%).

Шари розділені так, щоб UI не знав деталей транспорту: адаптери API/сховища, доменні типи, компоненти представлення. Це спрощує заміну бекенду та точкові UX-правки.

Ключові функції

• SvelteKit — використано в продуктовій логіці: зменшує кількість самописного коду та прискорює додавання нових екранів.
• Svelte 5 — використано в продуктовій логіці: зменшує кількість самописного коду та прискорює додавання нових екранів.
• TypeScript — використано в продуктовій логіці: зменшує кількість самописного коду та прискорює додавання нових екранів.
• Vite — використано в продуктовій логіці: зменшує кількість самописного коду та прискорює додавання нових екранів.
• Tailwind CSS — використано в продуктовій логіці: зменшує кількість самописного коду та прискорює додавання нових екранів.
• Vitest — використано в продуктовій логіці: зменшує кількість самописного коду та прискорює додавання нових екранів.

Додатково:

• Інтеграція та використання SvelteKit в продуктовій логіці та інтерфейсі.
• Інтеграція та використання Svelte 5 в продуктовій логіці та інтерфейсі.
• Інтеграція та використання TypeScript в продуктовій логіці та інтерфейсі.

Результат

MVP вже покриває ключовий сценарій; далі — розширення звітності, тестів та моніторингу.

Вихідний код відкритий: https://github.com/astropsy999/neurodifferent.org — можна оцінити структуру модулів та стиль комітів.

Інтерактивне демо доступне за посиланням вище — можна перевірити UX без розгортання локально.

Що б покращив

Наступний крок — observability (логи/метрики), автотести на регрес та документація API для інтеграторів. Для high-load сценаріїв — профілювання вузьких місць та кешування довідників.