ui

Personal Assistant UI Guidelines

Project Overview

The Personal Assistant UI is built with Angular and follows modern best practices for scalable frontend applications. It interfaces with the Personal Assistant API to provide a user-friendly interface for content creation and management.

Project Structure

src/
├── app/
│   ├── core/                   # Core modules, services, and components
│   │   ├── components/         # Shared components (navbar, layout)
│   │   ├── guards/             # Route guards
│   │   ├── interceptors/       # HTTP interceptors
│   │   ├── models/             # Data models
│   │   └── services/           # Core services
│   ├── features/               # Feature modules
│   │   ├── auth/               # Authentication feature
│   │   │   └── components/     # Login, register, profile components
│   │   └── dashboard/          # Dashboard feature
│   ├── app.ts                  # Root component
│   ├── app.html                # Root component template
│   ├── app.scss                # Root component styles
│   ├── app.routes.ts           # Application routes
│   └── app.config.ts           # Application configuration
├── assets/                     # Static assets
└── environments/               # Environment configuration

Code Organization Guidelines

Component Structure

Components must be split into separate files for TypeScript, HTML, and SCSS:

component-name/
├── component-name.component.ts
├── component-name.component.html
├── component-name.component.scss
└── component-name.component.spec.ts

Component Definition

All components should be standalone and use the following structure:

import { Component, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-example',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.scss']
})
export class ExampleComponent implements OnInit {
  // Component properties
  
  constructor() {}
  
  ngOnInit(): void {
    // Initialization logic
  }
  
  // Component methods
}