​
Admin Panel Architecture

A modular admin panel built with SolidStart, following the Monorepo with Module Boundaries pattern for maximum scalability and build performance.

​
📁 Structure

admin/
├── apps/
│   └── panel/                   # @monorepo/solid-admin-panel
│       ├── src/
│       │   ├── routes/          # Feature routes
│       │   ├── components/      # App-specific components
│       │   ├── app.tsx          # Main app
│       │   └── app.css          # Global styles
│       └── package.json
│
└── packages/
    ├── core/                    # @monorepo/solid-pkg-core
    │   ├── src/
    │   │   ├── api/             # REST API client
    │   │   ├── auth/            # Better Auth integration
    │   │   ├── hooks/           # TanStack Query hooks
    │   │   ├── config/           # Environment config
    │   │   └── utils/           # Utilities (cn)
    │   └── package.json
    │
    └── ui/                      # @monorepo/solid-pkg-ui
        ├── src/
        │   ├── components/      # Shared UI components
        │   │   ├── GlassCard.tsx
        │   │   ├── GlassButton.tsx
        │   │   └── auth/
        │   └── utils/           # UI utilities
        └── package.json

​
🎯 Module Boundaries

​
Core Logic (@monorepo/solid-pkg-core)

Purpose: Shared business logic and data layer Contents:
  • REST API client with TypeScript types
  • Better Auth integration
  • TanStack Query hooks for data fetching
  • Environment configuration
  • Utility functions
Dependencies:
  • @tanstack/solid-query
  • better-auth
  • solid-js

​
UI Components (@monorepo/solid-pkg-ui)

Purpose: Shared UI components and design system Contents:
  • Glassmorphism design system components
  • Auth guards and protected routes
  • Reusable UI utilities
Dependencies:
  • @monorepo/solid-pkg-core (for utilities)
  • @kobalte/core (accessible components)
  • class-variance-authority (variants)
  • solid-js

​
Main Application (@monorepo/solid-admin-panel)

Purpose: Shell app that composes features Contents:
  • Route definitions
  • Page components
  • App-specific logic
  • Layout components
Dependencies:
  • @monorepo/solid-pkg-core
  • @monorepo/solid-pkg-ui
  • @solidjs/router
  • @solidjs/start

​
🎨 Tech Stack

​
Core Technologies

  • Framework: SolidStart (SPA mode)
  • Language: TypeScript
  • Styling: Tailwind CSS v4 + Glassmorphism
  • State: TanStack Query
  • Auth: Better Auth

​
Design System

  • Components: Glass morphism design
  • Variants: class-variance-authority
  • Accessibility: @kobalte/core
  • Utilities: clsx + tailwind-merge