SWBS Admin-Dashboard

The admin dashboard is a Next.js 15 client application that acts as the CMS for every content type on the SWBS Platform. Technically it follows modern React patterns without the overhead of a heavyweight CMS.

State management: TanStack Query (React Query v5) as server state manager for all API data. Optimistic updates for immediate UI feedback, automatic cache invalidation after mutations, pagination through query keys.

Forms: React Hook Form with Zod validation throughout. Multi-tab forms for complex entities (the technology form, for example, has German, English, content, SEO and settings tabs). Multi-select with search for technology relationships.

Components: shadcn/ui as the base component system (built on Radix UI and Tailwind CSS). A custom media upload component for S3 file uploads. Tables with server-side pagination, search (300 ms debounce), category filters and A→Z / Z→A sorting.

Technology management: a complete editor for 200+ technologies with use cases, FAQs, benefits, relatedTechnologies (multi-select search across slugs) and compatibility (multi-select across names). Every field exists in both German and English.

Auth: JWT-based authentication with an httpOnly cookie session. Protected routes via Next.js middleware. Refresh token rotation for long sessions.

Managing 200+ technologies and 15+ content types from a single dashboard at scale, without the performance problems that come from too many concurrent API requests.

Server-side pagination in the admin as well: the technology table loads only 25 entries per page via the useTechnologiesPage hook. Multi-select fields (relatedTechnologies) use useAllTechnologies, which loads every page dynamically based on the total field.