{"id":30797157,"url":"https://github.com/krguptaa/ionic-angular-boilerplate","last_synced_at":"2025-09-05T17:48:18.288Z","repository":{"id":312372328,"uuid":"1046981338","full_name":"krguptaa/ionic-angular-boilerplate","owner":"krguptaa","description":"Ionic 8 + Angular 17 Boilerplate 🚀 – A production-ready starter kit for building cross-platform apps (Android, iOS, Web/PWA) with JWT authentication, secure storage, API layer, and modular theme customization.","archived":false,"fork":false,"pushed_at":"2025-08-30T05:05:16.000Z","size":251,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-08-30T07:06:43.792Z","etag":null,"topics":["cross-platform","hybrid-app","ionic","ionic-android","ionic-angular","ionic-angular-boilerplate","ionic-apps","ionic-boilerplate","ionic-framework","ionic-ios","ionic-native","ionic-pwa","ionic-starter","ionic8","mobile-app","mobile-app-development","mobile-application","mobile-development","progressive-web-app"],"latest_commit_sha":null,"homepage":"","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/krguptaa.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":"2025-08-29T14:41:17.000Z","updated_at":"2025-08-30T05:22:49.000Z","dependencies_parsed_at":"2025-08-30T07:18:37.172Z","dependency_job_id":null,"html_url":"https://github.com/krguptaa/ionic-angular-boilerplate","commit_stats":null,"previous_names":["krguptaa/ionic-angular-boilerplate"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/krguptaa/ionic-angular-boilerplate","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/krguptaa%2Fionic-angular-boilerplate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/krguptaa%2Fionic-angular-boilerplate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/krguptaa%2Fionic-angular-boilerplate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/krguptaa%2Fionic-angular-boilerplate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/krguptaa","download_url":"https://codeload.github.com/krguptaa/ionic-angular-boilerplate/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/krguptaa%2Fionic-angular-boilerplate/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273794924,"owners_count":25169724,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-05T02:00:09.113Z","response_time":402,"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":["cross-platform","hybrid-app","ionic","ionic-android","ionic-angular","ionic-angular-boilerplate","ionic-apps","ionic-boilerplate","ionic-framework","ionic-ios","ionic-native","ionic-pwa","ionic-starter","ionic8","mobile-app","mobile-app-development","mobile-application","mobile-development","progressive-web-app"],"created_at":"2025-09-05T17:48:13.473Z","updated_at":"2025-09-05T17:48:18.279Z","avatar_url":"https://github.com/krguptaa.png","language":"TypeScript","readme":"# Ionic 8 + Angular Boilerplate\n\nA comprehensive, production-ready Ionic 8 + Angular boilerplate with authentication, theming, platform-specific features, and modern development practices.\n\n![Ionic](https://img.shields.io/badge/Ionic-8.0.0-blue.svg)\n![Angular](https://img.shields.io/badge/Angular-20.0.0-red.svg)\n![TypeScript](https://img.shields.io/badge/TypeScript-5.8.0-blue.svg)\n![Capacitor](https://img.shields.io/badge/Capacitor-7.0.0-green.svg)\n\n## ✨ Features\n\n### 🔐 Authentication \u0026 Security\n- JWT-based authentication with refresh tokens\n- Secure storage for sensitive data\n- Route guards with role-based access control\n- Automatic token refresh and session management\n- Password reset and account recovery\n\n### 🎨 Theming \u0026 UI\n- Comprehensive theme system with light/dark/auto modes\n- Responsive design with breakpoints\n- Reusable UI components (buttons, inputs, modals, alerts, toasts)\n- Customizable color schemes and typography\n- Platform-specific styling\n\n### 📱 Platform Support\n- **Web/PWA**: Full PWA support with service worker and offline capabilities\n- **Android**: Native Android app with full device integration\n- **iOS**: Native iOS app with platform-specific features\n- Cross-platform camera, location, and push notification support\n\n### 🔧 Core Services\n- **API Service**: Generic HTTP client with interceptors and error handling\n- **State Management**: Angular Signals-based reactive state management\n- **Platform Service**: Device detection and platform-specific features\n- **Network Monitoring**: Real-time connectivity status and offline support\n\n### 📦 Additional Features\n- Form validation utilities\n- Date/time formatting helpers\n- File upload and management\n- Push notifications with background handling\n- Biometric authentication support\n- Haptic feedback and device vibration\n- Clipboard and sharing capabilities\n\n## 🚀 Quick Start\n\n### Prerequisites\n- Node.js 18+ and npm\n- Ionic CLI: `npm install -g @ionic/cli`\n- Angular CLI: `npm install -g @angular/cli`\n\n### Installation\n\n1. **Clone the repository**:\n   ```bash\n   git clone https://github.com/krguptaa/ionic-angular-boilerplate.git\n   cd ionic-angular-boilerplate\n   ```\n\n2. **Install dependencies**:\n   ```bash\n   npm install\n   ```\n\n3. **Set up environment variables**:\n   ```bash\n   cp src/environments/environment.ts src/environments/environment.prod.ts\n   # Edit environment files with your API endpoints\n   ```\n\n4. **Run the development server**:\n   ```bash\n   npm start\n   ```\n\n## 📋 Project Structure\n\n```\nsrc/\n├── app/\n│   ├── auth/                    # Authentication module\n│   │   ├── login/              # Login page\n│   │   ├── register/           # Registration page\n│   │   └── auth-routing.module.ts\n│   ├── guards/                 # Route guards\n│   │   └── auth.guard.ts       # Authentication guard\n│   ├── home/                   # Home page\n│   ├── interceptors/           # HTTP interceptors\n│   │   └── auth.interceptor.ts # JWT token interceptor\n│   ├── models/                 # TypeScript interfaces\n│   ├── services/               # Application services\n│   │   ├── api.service.ts      # Generic API service\n│   │   ├── auth.service.ts     # Authentication service\n│   │   ├── camera.service.ts   # Camera functionality\n│   │   ├── location.service.ts # Geolocation service\n│   │   ├── platform.service.ts # Platform utilities\n│   │   ├── push-notifications.service.ts # Push notifications\n│   │   └── state/              # State management\n│   │       ├── base-state.service.ts\n│   │       ├── user-state.service.ts\n│   │       ├── app-state.service.ts\n│   │       └── network-state.service.ts\n│   ├── shared/                 # Shared components and modules\n│   │   ├── components/         # Reusable UI components\n│   │   │   ├── alert/          # Alert component\n│   │   │   ├── toast/          # Toast notifications\n│   │   │   ├── card/           # Card component\n│   │   │   ├── badge/          # Badge component\n│   │   │   ├── custom-button/  # Enhanced button\n│   │   │   ├── custom-input/   # Enhanced input\n│   │   │   ├── custom-modal/   # Enhanced modal\n│   │   │   └── loading-spinner/ # Loading spinner\n│   │   └── shared.module.ts    # Shared module\n│   ├── utilities/              # Utility classes\n│   │   ├── date.utils.ts       # Date formatting\n│   │   ├── validation.utils.ts # Form validation\n│   │   ├── platform.utils.ts   # Platform detection\n│   │   └── index.ts            # Utility exports\n│   ├── constants/              # Application constants\n│   ├── theme/                  # Theme configuration\n│   │   └── variables.scss      # SCSS variables\n│   └── environments/           # Environment configurations\n├── assets/                     # Static assets\n├── android/                    # Android platform files\n├── ios/                        # iOS platform files\n└── resources/                  # Icon and splash screen sources\n```\n\n## 🏗️ Architecture\n\n### State Management\nThe application uses Angular Signals for reactive state management:\n\n```typescript\n// User state example\nexport class UserStateService extends BaseStateService\u003cUserState\u003e {\n  public readonly isLoggedIn = computed(() =\u003e this.state().isAuthenticated);\n  public readonly currentUser = computed(() =\u003e this.state().currentUser);\n\n  setUser(user: User, token: string) {\n    this.updateState({\n      currentUser: user,\n      isAuthenticated: true,\n      session: { token, refreshToken: null, expiresAt: null }\n    });\n  }\n}\n```\n\n### Service Layer\nClean separation of concerns with dedicated services:\n\n```typescript\n// API Service with error handling\n@Injectable({ providedIn: 'root' })\nexport class ApiService {\n  get\u003cT\u003e(endpoint: string, options?: ApiOptions): Observable\u003cT\u003e {\n    return this.request\u003cT\u003e('GET', endpoint, null, options);\n  }\n\n  post\u003cT\u003e(endpoint: string, data: any, options?: ApiOptions): Observable\u003cT\u003e {\n    return this.request\u003cT\u003e('POST', endpoint, data, options);\n  }\n}\n```\n\n### Component Architecture\nReusable, platform-aware components:\n\n```typescript\n@Component({\n  selector: 'app-custom-button',\n  template: `\n    \u003cion-button [class.loading]=\"loading\" (click)=\"onClick($event)\"\u003e\n      \u003cion-spinner *ngIf=\"loading\"\u003e\u003c/ion-spinner\u003e\n      \u003cng-content\u003e\u003c/ng-content\u003e\n    \u003c/ion-button\u003e\n  `\n})\nexport class CustomButtonComponent {\n  @Input() loading = false;\n  @Output() buttonClick = new EventEmitter\u003cEvent\u003e();\n}\n```\n\n## 📱 Platform-Specific Setup\n\n### Android Setup\n\n1. **Add Android platform**:\n   ```bash\n   npx cap add android\n   ```\n\n2. **Configure permissions** in `android/app/src/main/AndroidManifest.xml`\n\n3. **Build and run**:\n   ```bash\n   npx cap run android\n   ```\n\n### iOS Setup\n\n1. **Add iOS platform**:\n   ```bash\n   npx cap add ios\n   ```\n\n2. **Configure permissions** in `ios/App/App/Info.plist`\n\n3. **Build and run**:\n   ```bash\n   npx cap run ios\n   ```\n\n### PWA Setup\n\n1. **Build for production**:\n   ```bash\n   npm run build\n   ```\n\n2. **Serve with HTTPS** for full PWA functionality\n\n3. **Register service worker** (automatically configured)\n\n## 🎨 Theming\n\n### Theme Configuration\nThe application supports multiple theme modes:\n\n```scss\n// Light theme (default)\n:root {\n  --theme-bg-primary: #ffffff;\n  --theme-text-primary: #000000;\n  --theme-primary: #3880ff;\n}\n\n// Dark theme\n[data-theme=\"dark\"] {\n  --theme-bg-primary: #1e1e1e;\n  --theme-text-primary: #ffffff;\n  --theme-primary: #4c8dff;\n}\n```\n\n### Theme Service\n```typescript\n@Injectable({ providedIn: 'root' })\nexport class ThemeService {\n  setTheme(theme: 'light' | 'dark' | 'auto') {\n    // Implementation\n  }\n\n  toggleTheme() {\n    // Implementation\n  }\n}\n```\n\n## 🔐 Authentication Flow\n\n### Login Process\n```typescript\n// Login component\nasync onLogin(credentials: LoginRequest) {\n  try {\n    const response = await this.authService.login(credentials).toPromise();\n    this.userState.setUser(response.user, response.accessToken);\n    this.router.navigate(['/home']);\n  } catch (error) {\n    this.toastService.showError('Login failed');\n  }\n}\n```\n\n### Route Protection\n```typescript\n// Route guard\ncanActivate(route: ActivatedRouteSnapshot): boolean {\n  if (!this.authService.isLoggedIn()) {\n    this.router.navigate(['/auth/login']);\n    return false;\n  }\n  return true;\n}\n```\n\n## 📡 API Integration\n\n### Base API Configuration\n```typescript\n// API Service\nexport const APP_CONSTANTS = {\n  API_BASE_URL: 'https://api.example.com',\n  TIMEOUTS: {\n    HTTP_REQUEST: 30000,\n    CACHE_EXPIRY: 3600000\n  }\n};\n```\n\n### HTTP Interceptor\n```typescript\n// Auth Interceptor\nintercept(request: HttpRequest\u003cany\u003e, next: HttpHandler): Observable\u003cHttpEvent\u003cany\u003e\u003e {\n  // Add JWT token to requests\n  const token = await this.authService.getAccessToken();\n  if (token) {\n    request = request.clone({\n      setHeaders: { Authorization: `Bearer ${token}` }\n    });\n  }\n  return next.handle(request);\n}\n```\n\n## 🧪 Testing\n\n### Unit Tests\n```bash\nnpm run test\n```\n\n### E2E Tests\n```bash\nnpm run e2e\n```\n\n### Linting\n```bash\nnpm run lint\n```\n\n## 📦 Build \u0026 Deployment\n\n### Development\n```bash\nnpm start          # Development server\nnpm run watch      # Watch mode\n```\n\n### Production Build\n```bash\nnpm run build      # Web build\nnpx cap build      # Native builds\n```\n\n### Deployment\n```bash\n# Web deployment\nnpm run build --prod\n# Deploy to hosting service\n\n# Android deployment\nnpx cap build android\n# Sign and upload to Play Store\n\n# iOS deployment\nnpx cap build ios\n# Archive and upload to App Store\n```\n\n## 🔧 Configuration\n\n### Environment Variables\n```typescript\n// src/environments/environment.ts\nexport const environment = {\n  production: false,\n  apiUrl: 'https://api-dev.example.com',\n  enableDebug: true,\n  firebaseConfig: { /* ... */ }\n};\n```\n\n### Capacitor Configuration\n```typescript\n// capacitor.config.ts\nconst config: CapacitorConfig = {\n  appId: 'com.yourcompany.boilerplate',\n  appName: 'Ionic Boilerplate',\n  webDir: 'www',\n  plugins: {\n    Camera: { allowEditing: true },\n    Geolocation: { enableHighAccuracy: true },\n    PushNotifications: { presentationOptions: [\"badge\", \"sound\", \"alert\"] }\n  }\n};\n```\n\n## 📚 Documentation\n\n- [Ionic Documentation](https://ionicframework.com/docs)\n- [Angular Documentation](https://angular.io/docs)\n- [Capacitor Documentation](https://capacitorjs.com/docs)\n- [Icons \u0026 Splash Screens Guide](./ICONS_SPLASH_README.md)\n\n## 🤝 Contributing\n\n1. Fork the repository\n2. Create a feature branch: `git checkout -b feature/amazing-feature`\n3. Commit your changes: `git commit -m 'Add amazing feature'`\n4. Push to the branch: `git push origin feature/amazing-feature`\n5. Open a Pull Request\n\n## 📄 License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n## 🙏 Acknowledgments\n\n- Ionic Framework team\n- Angular team\n- Capacitor team\n- All contributors and the open-source community\n\n## 📞 Support\n\nFor support, email webworldgk@gmail.com (Kamlesh Gupta).\n\n---\n\n**Happy coding! 🚀**\n\nBuilt with ❤️ using Ionic 8 + Angular","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkrguptaa%2Fionic-angular-boilerplate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkrguptaa%2Fionic-angular-boilerplate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkrguptaa%2Fionic-angular-boilerplate/lists"}