{"id":51158657,"url":"https://github.com/zahirinatzuke/angular-template-project","last_synced_at":"2026-06-26T12:02:07.106Z","repository":{"id":245195340,"uuid":"805959429","full_name":"ZahiriNatZuke/angular-template-project","owner":"ZahiriNatZuke","description":"Modern Angular 21 template with zoneless change detection, NgRx SignalStore, ultra-secure HttpOnly cookie authentication, TailwindCSS v4, and i18n support. Production-ready with best practices for security, performance, and scalability.","archived":false,"fork":false,"pushed_at":"2025-12-21T17:22:31.000Z","size":1430,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-12-23T06:07:57.298Z","etag":null,"topics":["angular","biomejs","rxjs","signal-store","tailwindcss-v4"],"latest_commit_sha":null,"homepage":"https://angular-template-project.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ZahiriNatZuke.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2024-05-26T00:43:03.000Z","updated_at":"2025-12-21T18:56:15.000Z","dependencies_parsed_at":"2024-06-20T12:54:10.602Z","dependency_job_id":"54983fcb-e1ce-4508-93b7-58554198d042","html_url":"https://github.com/ZahiriNatZuke/angular-template-project","commit_stats":null,"previous_names":["zahirinatzuke/angular-template-project"],"tags_count":2,"template":true,"template_full_name":null,"purl":"pkg:github/ZahiriNatZuke/angular-template-project","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ZahiriNatZuke%2Fangular-template-project","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ZahiriNatZuke%2Fangular-template-project/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ZahiriNatZuke%2Fangular-template-project/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ZahiriNatZuke%2Fangular-template-project/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ZahiriNatZuke","download_url":"https://codeload.github.com/ZahiriNatZuke/angular-template-project/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ZahiriNatZuke%2Fangular-template-project/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34815669,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-26T02:00:06.560Z","response_time":106,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","biomejs","rxjs","signal-store","tailwindcss-v4"],"created_at":"2026-06-26T12:02:05.650Z","updated_at":"2026-06-26T12:02:07.092Z","avatar_url":"https://github.com/ZahiriNatZuke.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Angular Template Project\n\nA modern, production-ready Angular 21 template with best practices, security-first authentication, and performance optimizations built-in.\n\n## Overview\n\nThis template provides a solid foundation for building scalable Angular applications with enterprise-grade features including zoneless change detection, signal-based state management, ultra-secure authentication, and internationalization support.\n\n## Key Features\n\n### Modern Angular Stack\n- **Angular 21** with standalone components (no modules)\n- **Zoneless change detection** for optimal performance\n- **Signal-based reactivity** throughout the application\n- **NgRx SignalStore** for state management\n- **TailwindCSS v4** with DaisyUI components\n- **Vitest** for fast unit testing\n\n### Ultra-Secure Authentication\n- **HttpOnly + Secure cookies** for token storage (immune to XSS attacks)\n- **CSRF protection** with token rotation on mutations\n- **Automatic session validation** on application startup\n- **No tokens in localStorage** - zero client-side storage of sensitive data\n- Backend-agnostic authentication flow (see `docs/BACKEND_AUTH_REQUIREMENTS.md`)\n\n### State Management\n- **NgRx SignalStore** for global state (auth, language, theme)\n- **No services for state** - follows modern Angular patterns\n- Fully reactive with signals and computed values\n- Type-safe state updates with `patchState`\n\n### Internationalization (i18n)\n- **ngx-translate** integration with reactive language switching\n- Multi-language support (English/Spanish included)\n- Dynamic locale configuration\n- Translation files in `src/assets/i18n/*.json`\n\n### Theming\n- Light/Dark mode with system preference detection\n- Cookie-based theme persistence\n- TailwindCSS v4 integration\n- DaisyUI component library\n\n### SEO Optimization\n- Reactive SEO service with automatic meta tag updates\n- Router-based SEO integration with translation support\n- Dynamic title and description per route\n- Waits for translations to load before applying SEO tags\n\n### Developer Experience\n- **Biome** for ultra-fast linting and formatting\n- **Husky** pre-commit hooks for code quality\n- **pnpm** for efficient package management\n- Path aliases (`@app/*`, `@core/*`, `@environments/*`)\n- No barrel files for better tree-shaking\n\n## Project Structure\n\n```\nsrc/\n├── app/\n│   ├── core/                    # Core application features\n│   │   ├── guards/              # Route guards (auth, anonymous)\n│   │   ├── interceptors/        # HTTP interceptors (auth with CSRF)\n│   │   ├── pipes/               # Shared pipes (safe-html, safe-url)\n│   │   ├── services/            # Utility services (SEO, notifications, router state)\n│   │   ├── stores/              # NgRx SignalStores (auth, language, theme)\n│   │   ├── types/               # TypeScript types and enums\n│   │   │   ├── enums/           # Languages, Themes\n│   │   │   └── interfaces/      # Shared interfaces (SEO)\n│   │   └── utils/               # Utility functions (cookies, router-seo)\n│   ├── features/                # Feature modules (see structure below)\n│   ├── app.component.ts         # Root component\n│   ├── app.config.ts            # Application configuration\n│   └── app.routes.ts            # Application routes\n├── assets/\n│   └── i18n/                    # Translation files (en.json, es.json)\n├── environments/                # Environment configurations\n│   ├── environment.ts           # Development environment\n│   └── environment.production.ts # Production environment\n└── styles.scss                  # Global styles\n```\n\n### Feature Module Structure\n\nThis template follows a **feature-first architecture**, where each feature is organized as a self-contained module with its own structure similar to `core/`:\n\n```\napp/features/\n├── authentication/              # Example: Authentication feature\n│   ├── components/              # Feature-specific components\n│   │   ├── login-form/\n│   │   └── register-form/\n│   ├── pages/                   # Feature pages/views\n│   │   ├── login.page.ts\n│   │   └── register.page.ts\n│   ├── services/                # Feature-specific services\n│   │   └── auth-api.service.ts\n│   ├── stores/                  # Feature-specific stores (if needed)\n│   │   └── auth-form.store.ts\n│   ├── types/                   # Feature-specific types\n│   │   ├── models/              # Data models\n│   │   └── enums/               # Feature enums\n│   ├── guards/                  # Feature-specific guards\n│   ├── utils/                   # Feature-specific utilities\n│   └── authentication.routes.ts # Feature routes\n│\n└── products/                    # Example: Products feature\n    ├── components/\n    │   ├── product-card/\n    │   └── product-list/\n    ├── pages/\n    │   ├── product-detail.page.ts\n    │   └── products-list.page.ts\n    ├── services/\n    │   └── products-api.service.ts\n    ├── stores/\n    │   └── products.store.ts\n    ├── types/\n    │   └── models/\n    │       └── product.model.ts\n    └── products.routes.ts\n```\n\n#### Feature Module Guidelines\n\n**1. Self-Contained Features**\n- Each feature should be independent and contain everything it needs\n- Avoid cross-feature dependencies (use `core/` for shared functionality)\n- Features can be developed, tested, and maintained independently\n\n**2. Lazy Loading**\nFeatures should be lazy-loaded for optimal performance:\n\n```typescript\n// app.routes.ts\nexport const routes: Routes = [\n  {\n    path: 'auth',\n    loadChildren: () =\u003e import('./features/authentication/authentication.routes')\n  },\n  {\n    path: 'products',\n    loadChildren: () =\u003e import('./features/products/products.routes')\n  }\n];\n```\n\n**3. Feature Routes**\nEach feature defines its own routes:\n\n```typescript\n// features/authentication/authentication.routes.ts\nimport { Routes } from '@angular/router';\nimport { LoginPage } from './pages/login.page';\nimport { RegisterPage } from './pages/register.page';\n\nexport default [\n  { path: 'login', component: LoginPage },\n  { path: 'register', component: RegisterPage }\n] as Routes;\n```\n\n**4. Core vs Feature**\n- **Core**: App-wide singleton services, global state, shared utilities\n- **Features**: Domain-specific logic, UI components, feature state\n- **Shared** (if needed): Reusable UI components used across multiple features\n\n**5. Naming Conventions**\n- Pages: `*.page.ts` (routable components)\n- Components: `*.component.ts` (reusable UI pieces)\n- Stores: `*.store.ts` (feature-specific state)\n- Services: `*.service.ts` (feature-specific logic)\n\n**Benefits of Feature-First Architecture:**\n- ✅ Better code organization and maintainability\n- ✅ Clear boundaries between features\n- ✅ Team can work on features independently\n- ✅ Easier to test, refactor, or remove features\n- ✅ Natural lazy-loading boundaries\n- ✅ Scales well with application growth\n\n## Getting Started\n\n### Prerequisites\n\n- Node.js 18+\n- pnpm 8+\n\n### Installation\n\n```bash\n# Install dependencies\npnpm install\n```\n\n### Development\n\n```bash\n# Start development server\npnpm start\n\n# Navigate to http://localhost:4200\n```\n\n### Build\n\n```bash\n# Production build\npnpm build\n\n# Build output in dist/angular-template-project\n```\n\n### Testing\n\n```bash\n# Run tests\npnpm test\n\n# Run tests with UI\npnpm test:ui\n\n# Generate coverage report\npnpm test:coverage\n```\n\n### Code Quality\n\n```bash\n# Run linter with auto-fix\npnpm lint\n\n# Run formatter\npnpm format\n\n# Run both (pre-commit hook)\npnpm precommit\n```\n\n## Commands Reference\n\n### Development\n- `pnpm start` - Start dev server on http://localhost:4200\n- `pnpm build` - Production build\n- `pnpm watch` - Development build with watch mode\n\n### Testing\n- `pnpm test` - Run Vitest tests\n- `pnpm test:ui` - Run tests with UI\n- `pnpm test:coverage` - Generate coverage report\n\n### Code Quality\n- `pnpm lint` - Biome linter with auto-fix\n- `pnpm format` - Biome formatter\n- `pnpm precommit` - Lint + format (husky hook)\n\n### Angular CLI\n- `ng generate component name` - Generate component\n- `ng generate service name` - Generate service\n- `ng generate guard name` - Generate guard\n\n## Configuration\n\n### Environment Variables\n\nLocated in `src/environments/`:\n\n```typescript\n{\n  production: boolean,\n  apiUrl: string,                    // Backend API URL\n  defaultTitle: string,              // Default page title\n  defaultLanguage: Languages,        // Default language (EN/ES)\n  languageKey: string,               // Cookie key for language\n  themeKey: string,                  // Cookie key for theme\n  timeZone: string                   // Default timezone\n}\n```\n\n### Path Aliases\n\nConfigured in `tsconfig.json`:\n\n```typescript\n\"@app/*\": [\"src/app/*\"]              // Application root\n\"@core/*\": [\"src/app/core/*\"]        // Core features\n\"@environments/*\": [\"src/environments/*\"]  // Environment configs\n```\n\n## Authentication Flow\n\nThis template uses **HttpOnly cookies** for maximum security:\n\n1. User logs in → Backend sets HttpOnly cookie with JWT\n2. Frontend automatically sends cookies with every request\n3. CSRF token fetched and attached to mutations (POST/PUT/DELETE/PATCH)\n4. Session validated on app startup\n5. Automatic logout on 401 (expired session)\n\n**Backend Requirements**: See `docs/BACKEND_AUTH_REQUIREMENTS.md` for complete backend implementation guide.\n\n## State Management Pattern\n\n### Using SignalStores\n\n```typescript\n// Inject store in component\nexport class MyComponent {\n  authStore = inject(AuthStore);\n  themeStore = inject(ThemeStore);\n  languageStore = inject(LanguageStore);\n\n  // Access signals in template\n  isAuth = this.authStore.isAuthenticated;\n  isDark = this.themeStore.isDarkMode;\n  currentLang = this.languageStore.current;\n}\n\n// Call actions\nthis.authStore.login({ email, password, rememberMe });\nthis.themeStore.toggleTheme();\nthis.languageStore.setLanguage(Languages.English);\n```\n\n### Available Stores\n\n**AuthStore** (`@core/stores/auth.store.ts`):\n- `isAuthenticated()`, `user()`, `csrfToken()`\n- `login()`, `logout()`, `refreshUser()`, `checkAuth()`\n\n**LanguageStore** (`@core/stores/language.store.ts`):\n- `current()`, `isEnglish()`, `isSpanish()`\n- `setLanguage()`, `toggleLanguage()`\n\n**ThemeStore** (`@core/stores/theme.store.ts`):\n- `current()`, `isDarkMode()`, `isLightMode()`\n- `setTheme()`, `toggleTheme()`\n\n## Routing \u0026 SEO\n\nRoutes are defined in `app.routes.ts` with SEO metadata:\n\n```typescript\n{\n  path: 'home',\n  component: HomeComponent,\n  data: {\n    title: 'routes.home.title',           // Translation key\n    description: 'routes.home.description' // Translation key\n  }\n}\n```\n\nSEO tags are automatically updated on route changes and wait for translations to load.\n\n## Styling\n\n### TailwindCSS v4\n\nUse Tailwind utility classes throughout the application:\n\n```html\n\u003cbutton class=\"btn btn-primary\"\u003eClick me\u003c/button\u003e\n\u003cdiv class=\"card bg-base-100 shadow-xl\"\u003e...\u003c/div\u003e\n```\n\n### Dark Mode\n\nTheme is managed by `ThemeStore` and applies via `data-theme` attribute:\n\n```typescript\n// Toggle theme\nthis.themeStore.toggleTheme();\n\n// Set specific theme\nthis.themeStore.setTheme(Themes.Dark);\n```\n\n## Best Practices Implemented\n\n### Security\n- ✅ HttpOnly cookies for authentication\n- ✅ CSRF protection on all mutations\n- ✅ No sensitive data in localStorage\n- ✅ XSS-safe pipes (safe-html, safe-url)\n- ✅ Automatic session validation\n\n### Performance\n- ✅ Zoneless change detection\n- ✅ Signal-based reactivity\n- ✅ No barrel files (better tree-shaking)\n- ✅ Lazy loading ready\n- ✅ Fetch API instead of XMLHttpRequest\n\n### Code Quality\n- ✅ Strict TypeScript configuration\n- ✅ Biome for fast linting/formatting\n- ✅ Pre-commit hooks with Husky\n- ✅ Path aliases for clean imports\n- ✅ Consistent code style\n\n### Architecture\n- ✅ Feature-based folder structure\n- ✅ Standalone components (no NgModules)\n- ✅ SignalStore for state management\n- ✅ Reactive patterns throughout\n- ✅ Separation of concerns\n\n### Developer Experience\n- ✅ Fast testing with Vitest\n- ✅ Type-safe routing with input binding\n- ✅ Auto-reload on file changes\n- ✅ Comprehensive error handling\n- ✅ Clear documentation\n\n## Additional Resources\n\n- **CLAUDE.md** - Detailed project documentation and patterns\n- **docs/BACKEND_AUTH_REQUIREMENTS.md** - Backend auth implementation guide\n- [Angular Documentation](https://angular.dev)\n- [NgRx SignalStore](https://ngrx.io/guide/signals)\n- [TailwindCSS v4](https://tailwindcss.com)\n- [Vitest](https://vitest.dev)\n- [Angular 2025 Project Structure Guide](https://www.ismaelramos.dev/blog/angular-2025-project-structure-with-the-features-approach/)\n- [Angular Feature-First Architecture](https://www.angulararchitects.io/blog/modern-architectures-with-angular-part-1-strategic-design-with-sheriff-and-standalone-components/)\n\n## Author\n\n**Yohan González Almaguer**\n- Email: yohan.gonzalez.almaguer@gmail.com\n- GitHub: [@ZahiriNatZuke](https://github.com/ZahiriNatZuke)\n- LinkedIn: [Yohan González Almaguer](https://www.linkedin.com/in/yohan-gonz%C3%A1lez-almaguer)\n\nThis template was created with modern Angular best practices, focusing on security, performance, and developer experience.\n\n## License\n\nMIT License - feel free to use this template for any project.\n\n## Support\n\nFor issues or questions about this template, please refer to:\n- Angular CLI: `ng help` or [Angular CLI Docs](https://angular.io/cli)\n- Project-specific patterns: See `CLAUDE.md`\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzahirinatzuke%2Fangular-template-project","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzahirinatzuke%2Fangular-template-project","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzahirinatzuke%2Fangular-template-project/lists"}