Shared Packages¶

Recron extracts reusable code into two shared libraries, both published to GitHub Packages. This keeps the main application focused on business logic while common patterns are maintained independently.

Overview¶

graph TB
    subgraph "Shared Libraries"
        EI[Extensions.Infrastructure NuGet]
        ED[Extensions.Domain NuGet]
        EA[Extensions.Application NuGet]
        UI["@jankrajewskiit/ui npm"]
    end

    subgraph "Recron Backend"
        Q[Questions.Api]
        O[Organizer.Api]
        P[Portfolio.Api]
        U[Users.Api]
    end

    subgraph "Recron Frontend"
        RW[recron-web]
    end

    Q --> EI
    O --> EI
    P --> EI
    U --> EI
    EI --> ED
    EI --> EA
    RW --> UI

    style UI fill:#e1f5fe
    style EI fill:#81d4fa
    style ED fill:#b3e5fc
    style EA fill:#b3e5fc

Backend: Extensions NuGet Packages¶

Three NuGet packages provide the backend's architectural foundation.

Extensions.Application¶

CQRS abstractions with zero dependencies:

• ICommand, ICommand<TResponse>, IQuery<TResponse>
• ICommandHandler<T>, ICommandHandler<T, TResponse>, IQueryHandler<T, TResponse>

Extensions.Domain¶

Domain building blocks:

• AuditableEntity — base entity with CreatedAt, ModifiedAt, CreatedBy, ModifiedBy
• Domain exception types
• Domain abstractions

Extensions.Infrastructure¶

Cross-cutting concerns (references both Application and Domain):

• PostgreSQL + EF Core setup with DbContextBase
• UserContext — extracts user info from JWT claims
• UserScopedEntity — auto-filters queries by current user
• Exception handling middleware
• Keycloak JWT authentication setup
• HybridCache configuration
• OpenTelemetry + Serilog logging
• Service registration extensions

Consuming Extensions¶

Each API project references only Extensions.Infrastructure:

<PackageReference Include="Extensions.Infrastructure" Version="1.0.*" />

NuGet is configured to fetch from GitHub Packages. See Getting Started for authentication setup.

Frontend: @jankrajewskiit/ui¶

A SolidJS component library providing all shared UI primitives, layout components, theming, hooks, and utilities. Full component catalog and library documentation: VelvetUi.

Consuming in recron-web¶

Install:

cd recron-web && npm install

The package is already listed in package.json. Authentication requires GHCR_TOKEN — see Getting Started.

Import components:

import { Button, Footer, MainLayout, Navbar, type NavItem, type Props } from '@jankrajewskiit/ui';

Import styles (once, in the entry point):

// src/index.tsx
import '@jankrajewskiit/ui/styles';

This imports the bundled CSS containing all design tokens (globals.css) and component styles.

Wiring i18n to Generic Components¶

VelvetUi components accept text as props. In recron-web, resolve translations at the call site:

// recron-web Navbar wrapper
import { LocaleSwitcher, Navbar as NavbarShell, ThemeToggle } from '@jankrajewskiit/ui';
import { useI18n } from '~/store/i18n';

const Navbar = (props: Props) => {
  const { t, ts } = useI18n();

  return (
    <NavbarShell
      navItems={resolvedNavItems()}
      logo={<NavLogo />}
      toggleMenuLabel={ts('nav.toggleMenu')}
      actions={
        <>
          <ThemeToggle lightLabel={ts('theme.switchToLight')} darkLabel={ts('theme.switchToDark')} />
          <LocaleSwitcher locale="EN" label="EN" switchLabel={ts('locale.switchTo')} onSwitch={handleSwitch} />
          <AuthButton />
        </>
      }
    />
  );
};

What Stays in recron-web¶

App-specific components that depend on Recron's auth, i18n stores, or business logic remain local:

• RequireAuth / AuthRedirect — Keycloak auth guards
• AuthButton — login/logout button using useAuth()
• NavLogo — Recron-specific branding
• All feature components (organizer, questions, portfolio, settings)
• All store files, API clients, models