Jet

Angular starter-kit for building quality web apps fast. Now with Supabase.

<br /> <p align="center"> <img alt="Logo" src="./public/images/logo.svg" width="64" /> </p> <br /> <div align="center"> <a href="https://opensource.org/license/mit"><img alt="GitHub License" src="https://img.shields.io/github/license/karmasakshi/jet?color=brightgreen"></a> <a href="https://developer.mozilla.org/en-US/observatory/analyze?host=jet-tau.vercel.app"><img alt="Mozilla HTTP Observatory Grade" src="https://img.shields.io/mozilla-observatory/grade/jet-tau.vercel.app?color=brightgreen"></a> </div> <div align="center"> <a href="https://github.com/karmasakshi/jet/commits/main"><img alt="GitHub commit activity" src="https://img.shields.io/github/commit-activity/t/karmasakshi/jet?color=brightgreen"></a> <a href="https://github.com/karmasakshi/jet/commits/main"><img alt="GitHub last commit" src="https://img.shields.io/github/last-commit/karmasakshi/jet?color=brightgreen"></a> <a href="https://github.com/karmasakshi/jet/pulls"><img alt="Static Badge" src="https://img.shields.io/badge/prs-welcome-brightgreen"></a> </div> <div align="center"> <a href="https://github.com/karmasakshi/jet/releases"><img alt="GitHub Release" src="https://img.shields.io/github/v/release/karmasakshi/jet?color=blue"></a> <a href="https://github.com/angular/angular/releases"><img alt="GitHub package.json prod dependency version" src="https://img.shields.io/github/package-json/dependency-version/karmasakshi/jet/%40angular%2Fcore?color=blue"></a> <a href="https://github.com/angular/components/releases"><img alt="GitHub package.json prod dependency version" src="https://img.shields.io/github/package-json/dependency-version/karmasakshi/jet/%40angular%2Fmaterial?color=blue"></a> <a href="https://github.com/supabase/supabase-js/releases"><img alt="GitHub package.json prod dependency version" src="https://img.shields.io/github/package-json/dependency-version/karmasakshi/jet/%40supabase%2Fsupabase-js?color=blue"></a> </div> <div align="center"> <img src="https://api.visitorbadge.io/api/visitors?path=https%3A%2F%2Fgithub.com%2Fkarmasakshi%2Fjet&countColor=white&style=plastic"> <a href="https://x.com/jetprojectdev"><img alt="X (formerly Twitter) Follow" src="https://img.shields.io/twitter/follow/jetprojectdev?style=plastic&logo=X&label=%40jetprojectdev&color=white"></a> <a href="https://github.dev/karmasakshi/jet"><img alt="Static Badge" src="https://img.shields.io/badge/click%20to-code-6e4b3a?style=plastic"></a> </div> <br />

Highlights

• 🆕 Modern Angular: Uses Signals, new template syntax, Zoneless, Standalone, lazy-loaded routes, and more.
• 📲 PWA-ready: Has safe-area styles for native-like edge-to-edge content in both portrait and landscape. Has background updating and offline support via @angular/service-worker.
• 🎨 Customizable: Support for light/dark/automatic color schemes. Theme generation via Angular Material. Support for multiple languages and language tools via Transloco. Custom fonts per language, RTL support, and more.
• 🌿 Pre-built features: Production-ready, responsive components for authentication and profile management. Authentication, profile management and RBAC flows integrated with Supabase. Easily set up your own back-end using migrations and swap out Supabase.
• 🚂 Services: Production-ready services for managing alerts, analytics, PWA updates, progress bar, browser storage, and more.
• 🚀 Performant: Modular and tree-shakeable. 80+ on PageSpeed Insights.
• 🔒 Secure: Locked-down CSP and other security headers. 80+ on Mozilla Observatory.
• 📏 Strict linting and formatting: Strict configurations for ESLint, Prettier and TypeScript.
• 🎁 Release management: Commit linting via @commitlint/*. Automatic versioning and changelog generation via Release Please.
• 🌻 Environment support: Easily configure environments via @ngx-env/builder and injection tokens.
• 🗻 Always updated: Actively maintained and regularly built from the ground-up. See 1000+ commits.

<br />

<br />

Demo

<a href="https://jet-tau.vercel.app"><img alt="Static Badge" src="https://img.shields.io/badge/click%20to-open-6e4b3a?style=plastic"></a>

Get started in 30 seconds

<a href="https://github.com/new?template_name=jet&template_owner=karmasakshi"><img alt="Static Badge" src="https://img.shields.io/badge/click%20to-use-6e4b3a?style=plastic"></a>

• Click the button above, create your repository, then clone it
• Create a copy of .env.example and name it .env
• Delete ./.github/FUNDING.yml
• Delete ./CHANGELOG.md; a fresh one will be created on first release
• Delete ./LICENSE and the license property in ./package.json and ./package-lock.json
• Reset the version property in both ./package.json and ./package-lock.json to 0.0.0
• Run npm install; this will also enable Husky
• Find and replace https://jet-tau.vercel.app with the base URL of your app
• Run ng serve and start building!

Nice to do:

• Set namespace name in StorageService and project_id in ./supabase/config.toml to something unique to your app
• Update ./README.md (this file)

Contents

• Features
  • Components
  • Constants
  • Directives
  • Enums
  • Guards
  • Injection Tokens
  • Interceptors
  • Services
  • GitHub Actions
  • GitHub Issue Templates
• Guides
  • Add elements
    • Add a component
    • Add a page component
    • Add a service
  • Manage code
    • Format code
    • Lint code
    • Test code
    • Commit code
    • Update commit scopes
    • Update precommit tasks
  • Manage icons
  • Manage styles
    • Add styles
    • Generate a Material theme
    • Override Material styles
  • Manage i18n
    • Add a language
    • Change the default language
    • Remove a language
  • Manage environments
    • Add an environment
    • Add an environment variable
  • Manage releases
    • Set up Release Please
    • Cut a release
    • Cut a major release
  • Deploy
    • Vercel
  • Supabase
    • Cheat sheet
    • Set up Supabase
    • Link a Supabase project
    • Run Supabase locally
    • Remove RBAC
    • Remove Supabase
  • Squeeze out more performance
• License

<br />

↑ Back to Contents

Features

Components

• AppComponent
• FooterComponent
• HomePageComponent
• MessagePageComponent
• PageComponent
• ProfilePageComponent
• ResetPasswordPageComponent
• SettingsPageComponent
• SidenavComponent
• SignInPageComponent
• SignOutPageComponent
• SignUpPageComponent
• ToolbarComponent
• UpdatePasswordPageComponent

<br />

↑ Back to Contents

Constants

• AVATAR_FILE_MAX_SIZE_MB
• COLOR_SCHEME_OPTIONS
• DEFAULT_COLOR_SCHEME_OPTION
• DEFAULT_LANGUAGE_OPTION
• DEFAULT_SETTINGS
• LANGUAGE_OPTIONS
• NAVIGATION_MENU_ITEMS

<br />

↑ Back to Contents

Directives

• AnalyticsDirective

<br />

↑ Back to Contents

Enums

• [AppRole](./src/app/enums/a