Directory Structure

Alpha Fusion's directory structure might look overwhelming at first, but taking some time to understand it will help immensely.
Alpha Fusion is built around multi-purpose and multi-layout concepts. You can think of it as a starter kit and a guide rather than just a simple template. The purpose is not only to provide pre-made styles and components but also to guide you where and how to structure your code.

It answers questions like "Where should I put this file?" or "Which folder should contain this piece of code?" rather than being just a collection of example pages and ready-to-use styles.

Here’s a simplified version of the essential directory structure of Alpha Fusion:

Alpha Fusion Directory Structure (Essential)

app
├─ core
│  ├─ guards
│  ├─ interceptors
│  └─ services
├─ layouts
│  ├─ blank
│  └─ full
├─ pages
│  ├─ account-settings
│  ├─ apps
│  │  ├─ calendar
│  │  ├─ chat-layout
│  │  ├─ mail-app
│  │  └─ scrumboard
│  ├─ authentication
│  ├─ coming-soon
│  ├─ dashboards
│  ├─ documentation
│  ├─ errors
│  ├─ faq
│  ├─ invoice
│  ├─ ui
│  └─ users
├─ shared
│  ├─ classes
│  ├─ components
│  ├─ constants
│  ├─ datetime
│  ├─ directives
│  ├─ models
│  ├─ pipes
│  ├─ services
│  └─ validators
├─ assets
│  ├─ data
│  ├─ docs
│  ├─ i18n
│  ├─ images
│  └─ scss
└─ environments

/app/

This directory contains all application-related code. It is where you will put your main app logic, modules, and components.

/app/core/

This folder contains the core features of your application:

• Guards: AuthGuard, NoAuthGuard
• Interceptors: HTTP interceptors
• Services: singleton services like AuthService, LoggerService, etc.

Note: Do not place components, templates, or directives here. Core is only for logic that can be shared across the app.

/app/layouts/

This folder contains all layout-related code:

• Blank layout: minimal layout without header/footer
• Full layout: layout with header, footer, and sidebar
• You can also put common layout components here such as messages, notifications, search, shortcuts, and user menu.

/app/pages/

This folder contains all feature modules and pages:

• Account Settings: account-profile, billing-history, notification-settings, security-overview
• Applications: calendar, chat-layout, mail-app, scrumboard
• Authentication: login, register, forgot password pages
• Coming Soon: placeholder pages
• Dashboards: analytics, finance, crypto, project, etc.
• Documentation: project guides and manuals
• Errors: 404, 500 pages
• FAQ: frequently asked questions pages
• Invoice: invoice pages and printing
• UI: UI demo pages (charts, tables, forms, components)
• Users: user profile and management pages

/app/shared/

This folder contains reusable code and utilities used across pages/modules:

• Classes: shared classes
• Components: reusable components like cards, dialogs, buttons
• Constants: shared constants
• Datetime: date/time utilities
• Directives: custom Angular directives
• Models: TypeScript models
• Pipes: custom data transformation pipes
• Services: reusable API calls or helper services
• Validators: form validation utilities

/assets/

This folder contains all static assets:

• Data: JSON or static datasets
• Docs: project documentation files
• i18n: translation files for internationalization
• Images: logos, backgrounds, product images, profile pictures
• SCSS: global styles, layout-specific SCSS, Material custom theme, and theme variables

/environments/

This folder contains environment-specific configuration files for Angular (development, production, etc.).