HaloLight Development Documentation
This documentation collection covers the shared patterns and implementation specifications for the HaloLight multi-framework admin dashboard project, guiding the development of each framework version.
Table of Contents
Architecture Design
- Architecture - Overall project architecture and directory structure specifications
- Components - UI component library design specifications
- State Management - State management patterns and best practices
Feature Modules
- API Patterns - API service layer architecture and data fetching strategies
- Authentication - User authentication and permission control implementation
- Dashboard - Draggable dashboard implementation specifications
- Theming - Theme switching and skin preset system
Development Guide
- Implementation Guide - Guide for implementing new framework versions
Framework Status
All framework versions have been implemented and deployed (preview links available in respective repository READMEs). Reference implementations (for specification validation):
Other frameworks：Angular · Nuxt · SvelteKit · Astro · Solid.js · Qwik · Remix · Preact · Lit · Fresh (Deno)。
| Framework | Status | Preview | Repository |
|---|---|---|---|
| Next.js 14 | ✅ Deployed | Preview | GitHub |
| Vue 3.5 | ✅ Deployed | Preview | GitHub |
| Angular 21 | ✅ Deployed | Preview | GitHub |
| Nuxt 4 | ✅ Deployed | Preview | GitHub |
| SvelteKit 2 | ✅ Deployed | Preview | GitHub |
| Astro 5 | ✅ Deployed | Preview | GitHub |
| Solid.js | ✅ Deployed | Preview | GitHub |
| Qwik | ✅ Deployed | Preview | GitHub |
| Remix | ✅ Deployed | Preview | GitHub |
| Preact | ✅ Deployed | Preview | GitHub |
| Lit | ✅ Deployed | Preview | GitHub |
| Fresh (Deno) | ✅ Deployed | Preview | GitHub |
Tech Stack Overview
Common Tech Stack
- TypeScript - Type safety
- Tailwind CSS - Style system
- shadcn/ui - UI component library (framework-specific versions)
- Mock.js - Development environment data simulation
- ECharts - Chart visualization
Framework-Specific Dependencies
| Feature | React/Next.js | Vue 3 | Angular | Svelte |
|---|---|---|---|---|
| State Management | Zustand | Pinia | Signals/RxJS | Svelte Stores |
| Data Fetching | TanStack Query | TanStack Query | RxJS | TanStack Query |
| Routing | Next.js App Router | Vue Router | Angular Router | SvelteKit |
| Forms | React Hook Form | VeeValidate | Reactive Forms | Superforms |
| Drag Layout | react-grid-layout | grid-layout-plus | angular-gridster2 | svelte-grid |
