Expert guidance for Angular 18 microservices event planning app with offline-first patterns, PrimeNG UI, and JWT auth
Expert AI assistant for EventPlanify, an Angular 18 event planning application with microservices backend, offline-first fallback strategy, and PrimeNG UI components.
EventPlanify uses a **microservices architecture** with three backend services:
The frontend is built with **Angular 18 standalone components**, **lazy loading**, and **PrimeNG UI library**.
When creating or modifying services:
```typescript
// Standard service structure
@Injectable({ providedIn: 'root' })
export class {Entity}Service {
private API = environment.{microservice}Url + '/{endpoint}';
{entities}: {Entity}Model[] = [];
fallback{Entity}: {Entity}Model[] = [];
// Constructor with HttpClient injection
}
```
**CRITICAL**: Every HTTP call must implement fallback to local test data from `src/app/assets/`:
```typescript
// Pattern for all HTTP requests
this.http.get<ResponsePage<EntityModel>>(this.API).pipe(
catchError(() => {
return this.loadLocalEntitiesWithFallback().pipe(
tap((data) => {
console.warn('✅ Cargando entities locales como fallback')
this.fallbackEntity = data.filter(a => a.killed == 0);
})
);
})
)
```
**Test Data Locations**:
```typescript
// Route pattern
{
path: 'feature',
loadComponent: () => import('./feature/feature.component').then(m => m.FeatureComponent)
}
```
The `src/app/auth/jwt-interceptor.ts` automatically adds JWT tokens:
When creating authenticated endpoints, ensure they target `localhost:8080` for automatic token injection.
All entities follow these patterns:
```typescript
export interface EntityModel {
id?: number;
killed?: number; // 0 = active, 1 = soft deleted
idUser: number; // User association
// ... other fields
}
```
**Soft Delete**: Always filter by `killed == 0` for active records.
```typescript
console.warn('✅ Cargando datos locales como fallback');
console.error('❌ Error al cargar datos del servidor');
```
All three microservices must be running locally:
1. `localhost:8080` - Auth Service
2. `localhost:8081` - MS-Reserves
3. `localhost:8082` - MS-Templates
The extensive test data allows frontend work without backend. Always ensure fallback data is realistic and up-to-date.
When generating new code:
1. **Always check** if similar patterns exist in the codebase first
2. **Follow microservice boundaries** - don't mix MS-Reserves and MS-Templates logic
3. **Implement fallback strategy** for every HTTP call
4. **Use standalone components** with proper imports
5. **Apply soft delete pattern** to all entity models
6. **Include JWT consideration** for authenticated endpoints
7. **Maintain consistent naming** as per conventions
8. **Provide realistic test data** in assets when adding entities
1. Create model in `src/app/models/ms_{microservice}/{entity}Model.ts`
2. Create service in `src/app/shared/ms_{microservice}/{entity}Service.service.ts`
3. Add test data to `src/app/assets/{microservice}-test-data.ts`
4. Implement HTTP methods with fallback strategy
5. Create component with lazy-loaded route
Edit `src/app/enviroments/enviroment.local.ts`:
```typescript
export const environment = {
msReservesUrl: 'http://localhost:8081',
msTemplatesUrl: 'http://localhost:8082',
authUrl: 'http://localhost:8080'
};
```
When implementing local tunneling for external access:
```bash
npm uninstall -g localtunnel
npx lt --port 4200
```
Leave a review
No reviews yet. Be the first to review this skill!
# Download SKILL.md from killerskills.ai/api/skills/eventplanify-architecture-assistant/raw