Task

neurodifferent.org addresses a practical task: A website built with SvelteKit, Tailwind v4, and Vite, along with Docker scripts for development, image optimization, and Vitest. Updates to the site/shop are managed through unified shell processes.

This is a personal learning project (currently in active development) where specific patterns and tools were practiced without unnecessary overhead.

The case study demonstrates an approach to tasks in the realm of "Marketing and Corporate Websites": from task definition to delivery with a clear module structure.

Before starting, we established readiness criteria: a clear first screen, predictable form errors, and the ability to make enhancements without rewriting half of the codebase.

Solution

A working prototype/product has been assembled with clear navigation and predictable behavior for forms and lists. A demo is available via a link on the page.

The scenarios are designed so that the main actions fit within one or two screens: fewer switches, fewer input errors. Navigation and field labels are aligned with familiar patterns—users do not need to "learn the interface."

Special attention is given to loading states and empty lists: skeleton/spinner where data comes asynchronously, and clear empty-state texts instead of an empty table.

Architecture and stack

UI and client: SvelteKit, Svelte 5, Tailwind CSS.

Infrastructure and utilities: TypeScript, Vite, Vitest.

Language distribution in the repository: TypeScript (52.7%), Svelte (39.4%), Shell (4.3%), JavaScript (2.2%), CSS (0.9%), HTML (0.5%).

Layers are separated so that the UI is unaware of transport details: API/storage adapters, domain types, presentation components. This simplifies backend replacement and targeted UX tweaks.

Key features

• SvelteKit — used in product logic: reduces the amount of custom code and speeds up the addition of new screens.
• Svelte 5 — used in product logic: reduces the amount of custom code and speeds up the addition of new screens.
• TypeScript — used in product logic: reduces the amount of custom code and speeds up the addition of new screens.
• Vite — used in product logic: reduces the amount of custom code and speeds up the addition of new screens.
• Tailwind CSS — used in product logic: reduces the amount of custom code and speeds up the addition of new screens.
• Vitest — used in product logic: reduces the amount of custom code and speeds up the addition of new screens.

Additionally:

• Integration and use of SvelteKit in product logic and interface.
• Integration and use of Svelte 5 in product logic and interface.
• Integration and use of TypeScript in product logic and interface.

Result

The MVP already covers the key scenario; next steps include expanding reporting, tests, and monitoring.

The source code is open: https://github.com/astropsy999/neurodifferent.org — you can evaluate the module structure and commit style.

An interactive demo is available via the link above — you can check the UX without local deployment.

What I would improve

The next step is observability (logs/metrics), automated regression tests, and API documentation for integrators. For high-load scenarios — profiling bottlenecks and caching reference data.