Skip to Content
Engineering11 Documentation 🔥
Frontend

Frontend — Engineering11 Full-Stack Foundation

The Foundation provides comprehensive frontend support across multiple frameworks and platforms, enabling teams to build modern, responsive applications with consistent patterns and integrated platform services.

Overview

The Foundation’s frontend ecosystem includes:

  • Seed Applications for React, Angular, React Native, and Flutter
  • TypeScript SDKs for type-safe API integration
  • Shared Component Libraries for consistent UI/UX
  • Authentication & Authorization patterns
  • State Management best practices
  • Build & Deployment tooling

Supported Frameworks

Web Applications

React

  • Next.js-based seed applications
  • Server-side rendering support
  • App Router and Pages Router patterns
  • Material UI integration
  • TypeScript throughout

Angular

  • Modern Angular (v14+) seed applications
  • Standalone components
  • RxJS for reactive patterns
  • Angular Material integration
  • Strict TypeScript configuration

Mobile Applications

React Native

  • Expo-based development workflow
  • iOS and Android support
  • React Navigation
  • Shared code with web applications
  • Over-the-air updates

Flutter

  • Cross-platform mobile development
  • Material Design widgets
  • Dart language
  • Hot reload for rapid iteration
  • Native performance

Architecture Patterns

Monorepo Structure

Foundation frontend applications use a monorepo structure similar to the backend:

frontend-repo/
├── apps/
│   ├── consumer-web/         # Consumer-facing web app (Next.js/React)
│   ├── admin-web/            # Admin dashboard (Angular)
│   ├── mobile/               # Mobile app (React Native or Flutter)
│   └── ...                   # Additional applications
├── packages/
│   ├── ui/                   # Shared UI components
│   ├── eslint-config/        # Shared ESLint configuration
│   ├── typescript-config/    # Shared TypeScript configuration
│   └── ...                   # Additional shared packages
├── package.json              # Workspace root
├── pnpm-workspace.yaml       # pnpm workspaces configuration
└── turbo.json                # Turborepo build orchestration

Development Tools

Monorepo Management:

  • Angular: Nx with npm, Angular CLI for project scaffolding
  • React: pnpm workspaces with Turborepo for build orchestration

Code Quality:

  • ESLint for linting (with framework-specific plugins)
  • Prettier for formatting
  • TypeScript for type safety
  • Husky + lint-staged for pre-commit hooks (auto-formatting)
  • Commitlint for conventional commits (Angular repos)

Testing:

  • Angular: Karma + Jasmine
  • React: Vitest (Jest for React Native packages)

Component Documentation:

  • Storybook for interactive component development and documentation

Versioning & Releases:

  • Angular: Release Please for automated versioning and changelogs
  • React: Changesets for version management and publishing
  • Syncpack for keeping dependency versions aligned across packages

Integration with Backend

TypeScript SDKs

The Foundation provides generated TypeScript SDKs for all backend services:

import { UserService, AuthService } from '@engineering11/sdk';
 
// Type-safe API calls
const user = await UserService.getCurrentUser();
const session = await AuthService.refreshToken();

Benefits:

  • Full type safety from backend to frontend
  • Auto-completion in IDEs
  • Compile-time error detection
  • Synchronized with backend API changes

Authentication

Pre-built authentication flows integrated with service-auth:

// Authentication wrapper
import { AuthProvider, useAuth } from '@engineering11/auth';
 
function App() {
  return (
    <AuthProvider>
      <YourApp />
    </AuthProvider>
  );
}
 
// In components
function Profile() {
  const { user, logout } = useAuth();
 
  return (
    <div>
      <h1>Welcome, {user.displayName}</h1>
      <button onClick={logout}>Logout</button>
    </div>
  );
}

State Management

Recommended patterns for each framework:

React:

  • React Context for global state
  • TanStack Query (React Query) for server state
  • Zustand or Redux for complex client state

Angular:

  • RxJS observables for reactive state
  • NgRx for enterprise state management
  • Signals (Angular 16+) for fine-grained reactivity

React Native:

  • Redux or Zustand for cross-platform state
  • AsyncStorage for persistence
  • TanStack Query for API caching

Flutter:

  • Provider or Riverpod for state management
  • BLoC pattern for complex workflows
  • GetIt for dependency injection

Component Libraries

Shared UI Package

Common components used across applications:

packages/ui/
├── src/
│   ├── components/
│   │   ├── Button/
│   │   ├── Input/
│   │   ├── Modal/
│   │   ├── DataTable/
│   │   └── ...
│   ├── hooks/
│   │   ├── useDebounce.ts
│   │   ├── useLocalStorage.ts
│   │   └── ...
│   ├── lib/
│   │   └── utils.ts
│   └── styles/
│       └── globals.css
└── package.json

Design Systems:

  • Material UI for React applications
  • Angular Material for Angular applications
  • Custom design tokens and theming
  • Accessible components (WCAG compliance)

Theming & Customization

Foundation seed apps include theming systems for white-label customization:

// Theme configuration
const theme = {
  colors: {
    primary: '#1976d2',
    secondary: '#dc004e',
    background: '#ffffff',
  },
  typography: {
    fontFamily: 'Roboto, sans-serif',
  },
  spacing: 8,
};
 
// Per-tenant theming
const tenantTheme = getTenantTheme(customerKey);

Developer Experience

Local Development

# Install dependencies
pnpm install
 
# Start development server
pnpm dev
 
# Run tests
pnpm test
 
# Build for production
pnpm build

Hot Module Replacement

All seed apps include hot reload for rapid iteration:

  • Instant feedback on code changes
  • State preservation across reloads
  • Fast refresh for React/React Native
  • HMR for Angular

Environment Configuration

// Environment variables
export const config = {
  apiUrl: process.env.NEXT_PUBLIC_API_URL,
  authDomain: process.env.NEXT_PUBLIC_AUTH_DOMAIN,
  firebaseConfig: {
    apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
    projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
  },
};

Deployment

Web Applications

Next.js / React:

  • Vercel for serverless deployment
  • Cloud Run for containerized deployment
  • Firebase Hosting for static sites
  • CDN integration for global distribution

Angular:

  • Firebase Hosting
  • Cloud Run
  • Nginx containers
  • Static site hosting

Mobile Applications

React Native:

  • Expo EAS Build for cloud builds
  • App Store and Google Play distribution
  • Over-the-air updates via Expo Updates
  • TestFlight and Play Console beta testing

Flutter:

  • Fastlane for automated deployment
  • App Store Connect and Google Play Console
  • CodeMagic or Codemagic for CI/CD

Best Practices

Code Organization

  • Feature-based folder structure
  • Colocation of related code
  • Clear separation of concerns
  • Reusable hooks and utilities

Performance

  • Code splitting and lazy loading
  • Image optimization
  • Bundle size monitoring
  • Lighthouse score tracking

Accessibility

  • Semantic HTML
  • ARIA labels and roles
  • Keyboard navigation
  • Screen reader compatibility

Error Handling

// Global error boundary
import { ErrorBoundary } from '@engineering11/error-handling';
 
<ErrorBoundary
  fallback={<ErrorPage />}
  onError={(error) => logger.error(error)}
>
  <App />
</ErrorBoundary>

What You Build

While the Foundation provides the infrastructure, your team builds:

  • Product-specific UI and user workflows
  • Custom components for your domain
  • Business logic in the frontend
  • Integration with your custom backend services
  • Branding and visual identity

Coming Soon

Detailed frontend documentation is being expanded to include:

  • Step-by-step setup guides for each framework
  • Component library reference documentation
  • State management patterns and examples
  • Authentication and authorization flows
  • Deployment and CI/CD configuration
  • Performance optimization techniques
  • Testing strategies and examples

Next Steps

For frontend-specific questions, please contact the Engineering11 team.

Last updated on
SFTP TestingEngineering Reference