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

---

⚗️ 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

Command	Description	NPM	Yarn	Pnpm	Background command
ng	See available commands	npm run ng	yarn ng	pnpm ng	ng
start	Run your app in development mode	npm start	yarn start	pnpm start	ng serve
build	Build your app for production	npm run build	yarn build	pnpm build	ng build
watch	Run build when files change.	npm run watch	yarn watch	pnpm watch	ng build --watch --configuration development
test	Run your unit tests	npm run test	yarn test	pnpm test	ng test
lint	Use ESLint to lint your app	npm run lint	yarn lint	pnpm lint	ng lint