How designbycode/ui.designbycode works
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: web.php Web routes · pages Pages · Theme.php Domain models · components Shared UI
Components 24
Laravel backend
HTTP entrypoints, controllers, middleware, actions, console, and services.
- Front entry · Laravel's web entrypoint for requests.
public/index.php - Web routes · Browser-facing route definitions and page wiring.
routes/web.php - API routes · JSON/API endpoints for search and theme data.
routes/api.php - Settings routes · Account and preference route definitions.
routes/settings.php - Console routes · Artisan command wiring and scheduled tasks.
routes/console.php - Page props · Global Inertia and appearance state shaping.
app/Http/Middleware/HandleInertiaRequests.php - Auth core · Fortify actions and social login integration.
app/Providers/FortifyServiceProvider.php - Theme controllers · Theme browsing, creation, show, and search-related endpoints.
app/Http/Controllers/ThemesController.php - Registry actions · Isolated registry list, fetch, store, update, delete, and CSS upload operations.
app/Actions/Registry/GetRegistryListAction.php - Registry build · Offline registry compilation and generation workflow.
app/Console/Commands/RegistryBuildCommand.php - Billing · Subscriptions, transactions, and paid access flows.
app/Http/Controllers/SubscriptionController.php - Marketing · Home, pricing, and newsletter acquisition surfaces.
app/Http/Controllers/HomePageController.php - Blade 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 · Route-level React screens for auth, dashboard, marketing, settings, themes, components, fonts, and animate.css.
resources/js/pages - Layouts · Auth, main, app, settings, and theme creator layout composition.
resources/js/layouts - Shared UI · Reusable app chrome, theme editor, preview, and UI primitives.
resources/js/components - Client state · Theme creator state and package-manager state.
resources/js/store/theme-creator.ts - Route helpers · 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 · Themes, registries, fonts, animations, socials, subscriptions, and users.
app/Models/Theme.php - Schema · Database tables for themes, registries, auth, tags, newsletter, and billing.
database/migrations/2026_05_08_174618_create_themes_table.php - Seed data · Initial content for themes, fonts, registries, socials, tags, and roles.
database/seeders/ThemeSeeder.php - Theme observer · Lifecycle behavior attached to theme persistence.
app/Observers/ThemeObserver.php
Build and quality
Asset pipeline, tests, and repository automation.
- Feature tests · Coverage for auth, billing, themes, registry build, newsletter, settings, and components.
tests/Feature/ThemesControllerTest.php - Vite build · Frontend bundling into public/build with committed compiled assets.
vite.config.ts
Connections 28
- 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.