Angular Boilerplate

Angular starter for enterprise-grade front-end projects, built under a clean architecture
that helps to scale and maintain a fast workflow.

https://angularboilerplate.vercel.app

Contributing Guidelines · Submit an Issue

⚗️ Features

• Strict mode.
• Lazy loading.
• Smart and pure components pattern.
• SCAM pattern.
• Self-contained components and encapsulated modules.
• Components types (e.g. component, page).
• Amazing directory structure.
• PWA
• Dynamic titles and content meta tags.
• TailwindCSS.
• Dark mode and theme configuration.
• Scalable CSS architecture in favor of TailwindCSS layers.
• Lighthouse reports improved.
• ESLint.
• Run unit tests & lint code using Husky & validate commit messages using commitlint

📄 Pages

• General
  • home
  • not-found
• Auth
  • sign-in
  • sign-up
  • forgot-password
  • forgot-password-email-sent
  • password-reset
  • password-reset-succeeded
  • password-reset-failed
• Settings
  • account
  • appearance
  • billing
  • blocked-Users
  • notifications
  • security
  • security-log
• User
  • my-profile
  • overview
• Features
  • dashboard

🧱 Self-contained components

• footer
• header
• layout

📡 Services

• AuthService
• SeoService
• ThemeService

📛 Custom directives

• click-outside: detects when the user clicks outside an element.

🧪 Custom pipes

• bytes: transforms a numeric value into bytes, KB, MB, GB, etc.

🛠️ Make some initial tweaks

• Change pages routes:

  Go to src/app/core/utils/router.utils.ts to find all the registered routes inside a config object.

  For example, you could replace sign-in with SignIn, login or iniciar_sesion

• Change your TailwindCSS configuration:

  You can find the config file in the project root, then you can refer to https://tailwindcss.com/docs/configuration to learn how to make your own adjustments.

• Set a default theme (First time load)

  Go to src\app\@core\services\theme\theme.config.ts and change the following line of code

  from operating system preference

  export const DEFAULT_BASE_THEME = ThemeList.System;

  to light mode

  export const DEFAULT_BASE_THEME = ThemeList.Light;

  or dark mode

  export const DEFAULT_BASE_THEME = ThemeList.Dark;

⛩️ Project structure

├───app
│   ├───@core
│   │   ├───directives
│   │   │   └───click-outside
│   │   ├───guards
│   │   ├───interceptors
│   │   ├───pipes
│   │   │   └───bytes
│   │   ├───services
│   │   │   ├───seo
│   │   │   └───theme
│   │   └───utils
│   ├───@shell
│   │   ├───ft
│   │   └───ui (layout components)
│   │       ├───footer
│   │       ├───header
│   │       ├───layout
│   │       └───not-found
│   ├───components (generic shared components)
│   └───pages
│       ├───auth
│       │   ├───pages
│       │   │   ├───forgot-password
│       │   │   ├───forgot-password-email-sent
│       │   │   ├───password-reset
│       │   │   ├───password-reset-failed
│       │   │   ├───password-reset-succeeded
│       │   │   ├───sign-in
│       │   │   └───sign-up
│       │   └───services
│       ├───dashboard
│       ├───home
│       ├───settings
│       │   └───pages
│       │       ├───account
│       │       ├───appearance
│       │       ├───billing
│       │       ├───blocked-users
│       │       ├───notifications
│       │       ├───security
│       │       └───security-log
│       └───user
│           └───pages
│               ├───my-profile
│               └───overview
├───assets
├───environments
└───theme
    ├───01-base
    ├───02-components
    └───03-utilities

🧙‍♂️ Commands