Skip to main content

​
Welcome to Jet

Jet is an Angular starter kit designed to help you build quality web applications fast. It comes with modern Angular features, Supabase integration, and a complete set of production-ready components and services.

Live Demo

Check out the live demo to see Jet in action

​
Why Jet?

Jet eliminates the tedious setup work so you can focus on building your application’s unique features. It’s built with best practices, strict configurations, and battle-tested patterns.

Quick Start

Get up and running in 30 seconds

Installation

Detailed setup and configuration guide

Modern Angular

Signals, new template syntax, Zoneless, Standalone components

Production Ready

PWA support, security headers, performance optimized

​
Key Features

​
Modern Angular Architecture

  • Latest Angular (v21+): Uses Signals, new control flow syntax, Zoneless change detection
  • Standalone components: No NgModules, fully modular and tree-shakeable
  • Lazy-loaded routes: Optimized bundle sizes with smart code splitting
  • Strict TypeScript: Enhanced type safety with strict compiler options

​
PWA Ready

  • Native-like experience: Safe-area styles for edge-to-edge content
  • Offline support: Works without internet via @angular/service-worker
  • Background updates: Automatic update checks and notifications
  • Installable: Add to home screen on mobile devices

​
Customizable Theming

  • Light/Dark/Auto modes: Automatic theme switching based on system preferences
  • Angular Material: Custom theme generation with Material Design 3
  • Multi-language support: i18n via Transloco with custom fonts per language
  • RTL support: Full right-to-left language support

​
Pre-built Features

  • Authentication flows: Sign in, sign up, password reset, email verification
  • Profile management: User profiles with avatar upload and account settings
  • RBAC: Role-based access control integrated with Supabase
  • Responsive UI: Mobile-first design with Angular Material components

​
Production Services

Jet includes battle-tested services for common needs:
  • AlertService: Global notifications and error handling
  • AnalyticsService: Google Analytics integration with event tracking
  • ProgressBarService: HTTP request progress indication
  • StorageService: Type-safe browser storage with namespace isolation
  • SettingsService: Persistent user preferences management

​
Performance & Security

Fast

80+ on PageSpeed Insights with optimized bundles

Secure

80+ on Mozilla Observatory with strict CSP headers

​
Developer Experience

  • Strict linting: ESLint with Angular-specific rules
  • Auto formatting: Prettier with import organization
  • Commit linting: Conventional commits enforced via Commitlint
  • Release automation: Automatic versioning and changelog generation
  • Environment support: Easy configuration via @ngx-env/builder

​
Tech Stack

{
  "dependencies": {
    "@angular/core": "^21.2.0",
    "@angular/material": "^21.2.0",
    "@supabase/supabase-js": "^2.98.0",
    "@jsverse/transloco": "^8.2.1",
    "rxjs": "^7.8.2"
  }
}
Jet is actively maintained with 1000+ commits and regular updates to keep dependencies current.

​
Architecture Highlights

​
Component Structure

All components follow Angular best practices: 
import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
import { LoggerService } from '@jet/services/logger/logger.service';
import { TranslocoModule } from '@jsverse/transloco';
import { PageComponent } from '../page/page.component';

@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [TranslocoModule, PageComponent],
  selector: 'jet-home-page',
  styleUrl: './home-page.component.scss',
  templateUrl: './home-page.component.html',
})
export class HomePageComponent {
  readonly #loggerService = inject(LoggerService);

  public constructor() {
    this.#loggerService.logComponentInitialization('HomePageComponent');
  }
}

​
Path Aliases

Jet uses TypeScript path aliases for clean imports: 
import { AlertService } from '@jet/services/alert/alert.service';
import { AppRole } from '@jet/enums/app-role.enum';
import { Settings } from '@jet/interfaces/settings.interface';

​
What’s Included

  • AppComponent - Root application component
  • PageComponent - Base page wrapper with SEO
  • HomePageComponent - Landing page
  • SignInPageComponent - Authentication
  • ProfilePageComponent - User profile management
  • SettingsPageComponent - App settings
  • ToolbarComponent - Top navigation
  • SidenavComponent - Side navigation
  • FooterComponent - Page footer
  • AlertService - Global notifications
  • AnalyticsService - Event tracking
  • LoggerService - Logging abstraction
  • ProfileService - User profile operations
  • ProgressBarService - Loading indicators
  • ServiceWorkerService - PWA updates
  • SettingsService - User preferences
  • StorageService - Browser storage
  • UserService - Authentication state
  • signedInGuard - Protect authenticated routes
  • signedOutGuard - Redirect authenticated users
  • unsavedChangesGuard - Prevent data loss

​
Next Steps

1

Quick Start

Follow the Quick Start guide to create your first Jet app in 30 seconds
2

Installation

Read the Installation guide for detailed setup instructions
3

Build

Start building your application with pre-built components and services
Join the community on Twitter @jetprojectdev for updates and tips!

Build docs developers (and LLMs) love

Get started for freeTalk to us