# designbycode/ui.designbycode architecture

> Architecture diagram of the GitHub repository designbycode/ui.designbycode, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-06-21). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/designbycode/ui.designbycode
- Repository: https://github.com/designbycode/ui.designbycode

## Overview

1. **Overall shape**
   - This is a **Laravel backend + Inertia React frontend** monolith.
   - Laravel serves the HTTP layer, authentication, persistence, background/console tasks, and API endpoints.
   - React lives under `resources/js` and is bundled with Vite into `public/build`.

2. **Request entry and view boundary**
   - The main server entry is `public/index.php`, with Laravel routing in `routes/web.php`, `routes/api.php`, `routes/settings.php`, and `routes/console.php`.
   - Blade is used mainly as the Inertia shell (`resources/views/app.blade.php`) plus a small MCP auth view.
   - Most user-facing screens are rendered as Inertia pages, not server-rendered Blade pages.

3. **Frontend application structure**
   - The frontend is organized by **pages**, **layouts**, **shared components**, **hooks**, **stores**, and **generated route helpers**.
   - `resources/js/pages` maps directly to app areas like auth, dashboard, themes, fonts, pricing, components, and settings.
   - `resources/js/layouts` defines major shells for auth, main marketing pages, app dashboard, settings, and theme creation.

4. **Main product domains**
   - The repository centers on a **theme/registry system**:
     - `app/Models/Theme`, `Registry`, `Font`, `Animate`, `Social`
     - Controllers for themes, registries, fonts, components, animate CSS
     - React pages for theme browsing/creation/showing and registry installation
   - This looks like a product for browsing, creating, previewing, and exporting UI themes/components.

5. **Registry subsystem**
   - Registry operations are isolated behind action classes in `app/Actions/Registry`.
   - Controllers call actions to list, fetch, store, update, delete, and upload registry content/CSS.
   - There is a build command (`app/Console/Commands/RegistryBuildCommand.php`) suggesting registries are also generated or compiled offline, not only edited interactively.

6. **Theme creation and preview flow**
   - Theme editing is split between backend models/seeders and frontend editor components.
   - `resources/js/components/themes` and `resources/js/layouts/theme-creator-layout.tsx` handle color, typography, radius, preview, and export behavior.
   - Frontend state for theme creation lives in `resources/js/store/theme-creator.ts` and `resources/js/store/theme.ts`, indicating a client-heavy editing experience with server persistence.

7. **Authentication and account management**
   - Auth is built around **Laravel Fortify** and **Socialite**:
     - Fortify actions under `app/Actions/Fortify`
     - Social login controller in `app/Http/Controllers/Auth/SocialiteController.php`
   - Settings cover profile, security, password, and two-factor authentication.
   - React auth pages and settings pages mirror those server-side capabilities.

8. **Subscriptions and billing**
   - Billing is present through **Cashier** configuration and the `customers/subscriptions/subscription_items/transactions` migrations.
   - The app exposes subscription-related controllers, routes, tests, and a settings subscription page.
   - This is a distinct business subsystem from the theme/registry builder and likely gates access to premium functionality.

9. **Newsletter and marketing surfaces**
   - Newsletter signup is handled by a dedicated model, migration, controller, request/test set, and a UI section/dialog in the main site pages.
   - There are marketing pages such as home and pricing, plus navigation/footer components in the frontend.
   - This suggests a public acquisition layer feeding into the authenticated product.

10. **Fonts, animations, and components catalog**
   - Fonts and animate.css content each have their own model, controller, seeder, and page area.
   - Components browsing is also separate, with API/search controllers for theme tags and theme search.
   - These areas likely power the public catalog/discovery experience and feed the registry/theme builder.

11. **Data and persistence boundaries**
   - Persistence is classic Laravel Eloquent with migrations, seeders, factories, and observers.
   - Notable tables include users, themes, registries, fonts, animations, socials, tags, newsletter subscriptions, permissions, and billing tables.
   - `ThemeObserver` implies some lifecycle logic is attached to theme records.

12. **Frontend/server integration**
   - The frontend uses generated route helpers under `resources/js/routes`, so navigation and form submissions are strongly coupled to Laravel route names.
   - Shared types in `resources/js/types` define contracts for auth, registry, theme, pagination, and navigation data.
   - Middleware such as `HandleInertiaRequests` and `HandleAppearance` shape the global page props and user appearance state.

13. **Static assets and media**
   - Built assets are committed under `public/build`, indicating the deployed app serves precompiled JS/CSS bundles.
   - Audio files exist under `resources/music` and `public/music`, which suggests the product includes rich preview/media content as part of the frontend experience.

14. **Tooling, quality gates, and repo conventions**
   - Tests are extensive and feature-oriented, covering auth, billing, themes, registry build, newsletter, settings, and controllers.
   - CI runs linting and tests via GitHub Actions.
   - The repo also includes custom agent/skill metadata, but that is auxiliary to runtime architecture rather than part of the application itself.

Main entry points: [`routes/web.php`](https://github.com/designbycode/ui.designbycode/blob/main/routes/web.php) (Web routes), [`resources/js/pages`](https://github.com/designbycode/ui.designbycode/tree/main/resources/js/pages) (Pages), [`app/Models/Theme.php`](https://github.com/designbycode/ui.designbycode/blob/main/app/Models/Theme.php) (Domain models), [`resources/js/components`](https://github.com/designbycode/ui.designbycode/tree/main/resources/js/components) (Shared UI)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_backend["Laravel backend"]
  node_public_index["Front entry<br/>http entry<br/>[index.php]"]
  node_routes_web["Web routes<br/>route map<br/>[web.php]"]
  node_routes_api["API routes<br/>route map<br/>[api.php]"]
  node_routes_settings["Settings routes<br/>route map<br/>[settings.php]"]
  node_routes_console["Console routes<br/>route map<br/>[console.php]"]
  node_middleware["Page props<br/>middleware"]
  node_auth_core["Auth core<br/>fortify/socialite"]
  node_theme_controllers["Theme controllers<br/>http controllers"]
  node_registry_actions["Registry actions<br/>action layer"]
  node_registry_build["Registry build<br/>console command"]
  node_billing["Billing<br/>cashier"]
  node_marketing["Marketing<br/>public pages"]
  node_blade_shell["Blade shell<br/>view shell<br/>[app.blade.php]"]
end

subgraph group_frontend["Inertia React frontend"]
  node_pages["Pages"]
  node_layouts["Layouts<br/>ui shells"]
  node_components["Shared UI<br/>components"]
  node_stores["Client state<br/>stores<br/>[theme-creator.ts]"]
  node_routes_js["Route helpers<br/>generated routes"]
end

subgraph group_data["Persistence"]
  node_models[("Domain models<br/>eloquent models<br/>[Theme.php]")]
  node_migrations["Schema<br/>migrations"]
  node_seeders["Seed data<br/>seeders<br/>[ThemeSeeder.php]"]
  node_observer["Theme observer<br/>[ThemeObserver.php]"]
end

subgraph group_ops["Build and quality"]
  node_tests["Feature tests<br/>pest tests"]
  node_build["Vite build<br/>asset pipeline<br/>[vite.config.ts]"]
end

node_public_index -->|"dispatches"| node_routes_web
node_routes_web -->|"hydrates"| node_middleware
node_routes_web -->|"auth flows"| node_auth_core
node_routes_web -->|"theme screens"| node_theme_controllers
node_routes_web -->|"registry ops"| node_registry_actions
node_routes_web -->|"subscriptions"| node_billing
node_routes_web -->|"public site"| node_marketing
node_routes_web -->|"renders"| node_blade_shell
node_routes_api -->|"search/data"| node_theme_controllers
node_routes_settings -->|"account settings"| node_auth_core
node_routes_console -->|"runs"| node_registry_build
node_theme_controllers -->|"loads themes"| node_models
node_registry_actions -->|"reads/writes"| node_models
node_registry_build -.->|"generates"| node_seeders
node_models -->|"schema"| node_migrations
node_models -->|"events"| node_observer
node_seeders -->|"boots data"| node_models
node_pages -->|"composes"| node_layouts
node_pages -->|"uses"| node_components
node_pages -->|"state"| node_stores
node_pages -->|"calls"| node_routes_js
node_components -->|"binds state"| node_stores
node_layouts -->|"embeds"| node_components
node_build -->|"bundles"| node_pages
node_build -->|"bundles"| node_components
node_tests -.->|"verifies"| node_routes_web
node_tests -.->|"verifies"| node_registry_build
node_tests -.->|"verifies"| node_billing

click node_public_index "https://github.com/designbycode/ui.designbycode/blob/main/public/index.php"
click node_routes_web "https://github.com/designbycode/ui.designbycode/blob/main/routes/web.php"
click node_routes_api "https://github.com/designbycode/ui.designbycode/blob/main/routes/api.php"
click node_routes_settings "https://github.com/designbycode/ui.designbycode/blob/main/routes/settings.php"
click node_routes_console "https://github.com/designbycode/ui.designbycode/blob/main/routes/console.php"
click node_middleware "https://github.com/designbycode/ui.designbycode/blob/main/app/Http/Middleware/HandleInertiaRequests.php"
click node_auth_core "https://github.com/designbycode/ui.designbycode/blob/main/app/Providers/FortifyServiceProvider.php"
click node_theme_controllers "https://github.com/designbycode/ui.designbycode/blob/main/app/Http/Controllers/ThemesController.php"
click node_registry_actions "https://github.com/designbycode/ui.designbycode/blob/main/app/Actions/Registry/GetRegistryListAction.php"
click node_registry_build "https://github.com/designbycode/ui.designbycode/blob/main/app/Console/Commands/RegistryBuildCommand.php"
click node_billing "https://github.com/designbycode/ui.designbycode/blob/main/app/Http/Controllers/SubscriptionController.php"
click node_marketing "https://github.com/designbycode/ui.designbycode/blob/main/app/Http/Controllers/HomePageController.php"
click node_blade_shell "https://github.com/designbycode/ui.designbycode/blob/main/resources/views/app.blade.php"
click node_pages "https://github.com/designbycode/ui.designbycode/tree/main/resources/js/pages"
click node_layouts "https://github.com/designbycode/ui.designbycode/tree/main/resources/js/layouts"
click node_components "https://github.com/designbycode/ui.designbycode/tree/main/resources/js/components"
click node_stores "https://github.com/designbycode/ui.designbycode/blob/main/resources/js/store/theme-creator.ts"
click node_routes_js "https://github.com/designbycode/ui.designbycode/tree/main/resources/js/routes"
click node_models "https://github.com/designbycode/ui.designbycode/blob/main/app/Models/Theme.php"
click node_migrations "https://github.com/designbycode/ui.designbycode/blob/main/database/migrations/2026_05_08_174618_create_themes_table.php"
click node_seeders "https://github.com/designbycode/ui.designbycode/blob/main/database/seeders/ThemeSeeder.php"
click node_observer "https://github.com/designbycode/ui.designbycode/blob/main/app/Observers/ThemeObserver.php"
click node_tests "https://github.com/designbycode/ui.designbycode/blob/main/tests/Feature/ThemesControllerTest.php"
click node_build "https://github.com/designbycode/ui.designbycode/blob/main/vite.config.ts"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_public_index,node_routes_web,node_routes_api,node_routes_settings,node_routes_console,node_middleware,node_auth_core,node_theme_controllers,node_registry_actions,node_registry_build,node_billing,node_marketing,node_blade_shell toneBlue
class node_pages,node_layouts,node_components,node_stores,node_routes_js toneAmber
class node_models,node_migrations,node_seeders,node_observer toneMint
class node_tests,node_build toneRose
```

## Components

### Laravel backend

HTTP entrypoints, controllers, middleware, actions, console, and services.

- [Front entry](https://github.com/designbycode/ui.designbycode/blob/main/public/index.php): http entry · Laravel's web entrypoint for requests. · `public/index.php`
- [Web routes](https://github.com/designbycode/ui.designbycode/blob/main/routes/web.php): route map · Browser-facing route definitions and page wiring. · `routes/web.php`
- [API routes](https://github.com/designbycode/ui.designbycode/blob/main/routes/api.php): route map · JSON/API endpoints for search and theme data. · `routes/api.php`
- [Settings routes](https://github.com/designbycode/ui.designbycode/blob/main/routes/settings.php): route map · Account and preference route definitions. · `routes/settings.php`
- [Console routes](https://github.com/designbycode/ui.designbycode/blob/main/routes/console.php): route map · Artisan command wiring and scheduled tasks. · `routes/console.php`
- [Page props](https://github.com/designbycode/ui.designbycode/blob/main/app/Http/Middleware/HandleInertiaRequests.php): middleware · Global Inertia and appearance state shaping. · `app/Http/Middleware/HandleInertiaRequests.php`
- [Auth core](https://github.com/designbycode/ui.designbycode/blob/main/app/Providers/FortifyServiceProvider.php): fortify/socialite · Fortify actions and social login integration. · `app/Providers/FortifyServiceProvider.php`
- [Theme controllers](https://github.com/designbycode/ui.designbycode/blob/main/app/Http/Controllers/ThemesController.php): http controllers · Theme browsing, creation, show, and search-related endpoints. · `app/Http/Controllers/ThemesController.php`
- [Registry actions](https://github.com/designbycode/ui.designbycode/blob/main/app/Actions/Registry/GetRegistryListAction.php): action layer · Isolated registry list, fetch, store, update, delete, and CSS upload operations. · `app/Actions/Registry/GetRegistryListAction.php`
- [Registry build](https://github.com/designbycode/ui.designbycode/blob/main/app/Console/Commands/RegistryBuildCommand.php): console command · Offline registry compilation and generation workflow. · `app/Console/Commands/RegistryBuildCommand.php`
- [Billing](https://github.com/designbycode/ui.designbycode/blob/main/app/Http/Controllers/SubscriptionController.php): cashier · Subscriptions, transactions, and paid access flows. · `app/Http/Controllers/SubscriptionController.php`
- [Marketing](https://github.com/designbycode/ui.designbycode/blob/main/app/Http/Controllers/HomePageController.php): public pages · Home, pricing, and newsletter acquisition surfaces. · `app/Http/Controllers/HomePageController.php`
- [Blade shell](https://github.com/designbycode/ui.designbycode/blob/main/resources/views/app.blade.php): view shell · Inertia host view and MCP authorization view. · `resources/views/app.blade.php`

### Inertia React frontend

Pages, layouts, shared components, stores, hooks, and generated route helpers.

- [Pages](https://github.com/designbycode/ui.designbycode/tree/main/resources/js/pages): inertia pages · Route-level React screens for auth, dashboard, marketing, settings, themes, components, fonts, and animate.css. · `resources/js/pages`
- [Layouts](https://github.com/designbycode/ui.designbycode/tree/main/resources/js/layouts): ui shells · Auth, main, app, settings, and theme creator layout composition. · `resources/js/layouts`
- [Shared UI](https://github.com/designbycode/ui.designbycode/tree/main/resources/js/components): components · Reusable app chrome, theme editor, preview, and UI primitives. · `resources/js/components`
- [Client state](https://github.com/designbycode/ui.designbycode/blob/main/resources/js/store/theme-creator.ts): stores · Theme creator state and package-manager state. · `resources/js/store/theme-creator.ts`
- [Route helpers](https://github.com/designbycode/ui.designbycode/tree/main/resources/js/routes): generated routes · Typed client-side helpers bound to Laravel route names. · `resources/js/routes`

### Persistence

Models, migrations, seeders, and observers that define the domain state.

- [Domain models](https://github.com/designbycode/ui.designbycode/blob/main/app/Models/Theme.php): eloquent models · Themes, registries, fonts, animations, socials, subscriptions, and users. · `app/Models/Theme.php`
- [Schema](https://github.com/designbycode/ui.designbycode/blob/main/database/migrations/2026_05_08_174618_create_themes_table.php): migrations · Database tables for themes, registries, auth, tags, newsletter, and billing. · `database/migrations/2026_05_08_174618_create_themes_table.php`
- [Seed data](https://github.com/designbycode/ui.designbycode/blob/main/database/seeders/ThemeSeeder.php): seeders · Initial content for themes, fonts, registries, socials, tags, and roles. · `database/seeders/ThemeSeeder.php`
- [Theme observer](https://github.com/designbycode/ui.designbycode/blob/main/app/Observers/ThemeObserver.php): observer · Lifecycle behavior attached to theme persistence. · `app/Observers/ThemeObserver.php`

### Build and quality

Asset pipeline, tests, and repository automation.

- [Feature tests](https://github.com/designbycode/ui.designbycode/blob/main/tests/Feature/ThemesControllerTest.php): pest tests · Coverage for auth, billing, themes, registry build, newsletter, settings, and components. · `tests/Feature/ThemesControllerTest.php`
- [Vite build](https://github.com/designbycode/ui.designbycode/blob/main/vite.config.ts): asset pipeline · Frontend bundling into public/build with committed compiled assets. · `vite.config.ts`

## Connections

- Front entry → Web routes: dispatches · HTTP requests enter Laravel through web routing.
- Web routes → Page props: hydrates · Inertia responses are shaped by global middleware.
- Web routes → Auth core: auth flows · Login, registration, verification, and social auth routes.
- Web routes → Theme controllers: theme screens · Browser screens for browsing, creating, and showing themes.
- Web routes → Registry actions: registry ops · Registry pages and uploads are backed by action classes.
- Web routes → Billing: subscriptions · Account billing and subscription pages.
- Web routes → Marketing: public site · Home, pricing, and newsletter surfaces.
- Web routes → Blade shell: renders · Inertia boots through the Blade host shell.
- API routes → Theme controllers: search/data · API endpoints expose theme tags and search.
- Settings routes → Auth core: account settings · Profile, security, and password management.
- Console routes → Registry build: runs · Console routing connects to registry compilation.
- Theme controllers → Domain models: loads themes · Theme controllers read and persist domain models.
- Registry actions → Domain models: reads/writes · Registry actions operate on registry records and content.
- Registry build → Seed data: generates · Offline build work complements seeded registry content.
- Domain models → Schema: schema · Eloquent models are backed by application migrations.
- Domain models → Theme observer: events · Theme lifecycle hooks add domain behavior.
- Seed data → Domain models: boots data · Seeders populate core product catalog data.
- Pages → Layouts: composes · Route screens are wrapped in shared layouts.
- Pages → Shared UI: uses · Pages rely on shared UI and feature components.
- Pages → Client state: state · Theme creation and editor interactions are client-state driven.
- Pages → Route helpers: calls · Generated helpers keep client navigation aligned with server routes.
- Shared UI → Client state: binds state · Theme editor and interactive widgets read client stores.
- Layouts → Shared UI: embeds · Shells are assembled from shared components.
- Vite build → Pages: bundles · Vite compiles the React frontend and assets.
- Vite build → Shared UI: bundles · Shared UI and editor widgets are part of the frontend build.
- Feature tests → Web routes: verifies · Feature tests cover the primary request boundaries.
- Feature tests → Registry build: verifies · Command behavior is covered by tests.
- Feature tests → Billing: verifies · Subscription flows are tested.