RuhNetConsulting
/
Adminator-admin-dashboard
mirror of https://github.com/puikinsh/Adminator-admin-dashboard
1
0
Fork 0
Code Issues 0 Projects 0 Releases 16 Wiki Activity
Browse Source

Merge pull request #322 from codomposer/fix/doc_project_structure 

add project structure to docs
pull/323/head
Aigars Silkalns 1 month ago
committed by GitHub
parent
341311e3fc 1eef231766
commit
62654560c2
No known key found for this signature in database GPG Key ID: B5690EEEBB952194
1 changed files with 320 additions and 0 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +320
    -0
      docs/getting-started/project-structure.md

+ 320
- 0
docs/getting-started/project-structure.md View File

@ -0,0 +1,320 @@
# Project Structure
This guide explains the folder structure and organization of the Adminator admin dashboard template.
## Overview
Adminator follows a modern, modular architecture with clear separation of concerns. The project is organized into source files, build configuration, and documentation.
```
adminator-admin-dashboard/
├── src/ # Source files
├── dist/ # Built/compiled files (generated)
├── webpack/ # Build configuration
├── docs/ # Documentation
├── node_modules/ # Dependencies (generated)
└── Configuration files
```
## Root Directory
### Configuration Files
| File | Purpose |
|------|---------|
| `package.json` | Node.js dependencies and npm scripts |
| `webpack.config.js` | Webpack entry point |
| `.babelrc` | Babel ES6+ transpiler configuration |
| `eslint.config.mjs` | ESLint 9.x flat configuration for code linting |
| `.stylelintrc.json` | Stylelint configuration for SCSS/CSS linting |
| `.editorconfig` | Editor settings for consistent code style |
| `browserslist` | Target browser versions for compilation |
| `.gitignore` | Git ignore patterns |
| `.gitattributes` | Git attributes configuration |
| `.nvmrc` | Node.js version specification |
### Documentation Files
| File | Purpose |
|------|---------|
| `README.md` | Main project documentation |
| `CHANGELOG.md` | Version history and release notes |
| `LICENSE` | MIT license information |
| `CODE_OF_CONDUCT.md` | Community guidelines |
## Source Directory (`src/`)
The `src/` directory contains all template source files that are compiled into the final application.
### HTML Templates
Located directly in `src/`, these are the template pages:
```
src/
├── index.html # Main dashboard page
├── blank.html # Blank page template
├── 404.html # 404 error page
├── 500.html # 500 error page
├── signin.html # Sign in page
├── signup.html # Sign up page
├── email.html # Email inbox
├── compose.html # Email compose
├── chat.html # Chat application
├── calendar.html # Calendar view
├── charts.html # Charts showcase
├── forms.html # Form elements
├── buttons.html # Button styles
├── ui.html # UI elements showcase
├── basic-table.html # Basic table
├── datatable.html # Data table with features
├── google-maps.html # Google Maps integration
└── vector-maps.html # Vector maps
```
### Assets Directory (`src/assets/`)
Contains all JavaScript, styles, images, and fonts.
```
src/assets/
├── scripts/ # JavaScript files
├── styles/ # SCSS stylesheets
└── static/ # Static assets (images, fonts)
```
## JavaScript Structure (`src/assets/scripts/`)
Modern, jQuery-free vanilla JavaScript architecture.
### Main Application
```
scripts/
├── app.js # Main application entry point
├── index.js # Module exports
└── components/ # Reusable components
├── Sidebar.js # Sidebar navigation component
└── Chart.js # Chart component wrapper
```
### Feature Modules
Each feature has its own directory with an `index.js` entry point:
```
scripts/
├── charts/ # Chart implementations
│ ├── chartJS/ # Chart.js integration
│ ├── easyPieChart/ # Pie chart component
│ └── sparkline/ # Sparkline mini charts
├── chat/ # Chat application logic
├── email/ # Email application logic
├── fullcalendar/ # Calendar integration
├── googleMaps/ # Google Maps integration
├── vectorMaps/ # Vector maps integration
├── datatable/ # Data table functionality
├── datepicker/ # Date picker component
├── masonry/ # Masonry grid layout
├── popover/ # Popover components
├── scrollbar/ # Custom scrollbar
├── search/ # Search functionality
├── sidebar/ # Sidebar behavior
├── skycons/ # Weather icons
└── ui/ # UI components
```
### Utilities and Constants
```
scripts/
├── utils/ # Utility functions
│ ├── dom.js # DOM manipulation helpers
│ ├── date.js # Date utilities (Day.js wrapper)
│ ├── theme.js # Theme management (dark/light mode)
│ └── index.js # Utility exports
└── constants/ # Application constants
└── colors.js # Color definitions
```
## Styles Structure (`src/assets/styles/`)
SCSS-based styling with modular architecture following ITCSS methodology.
```
styles/
├── index.scss # Main style entry point
├── spec/ # Custom styles
│ ├── components/ # Component styles
│ │ ├── sidebar.scss
│ │ ├── topbar.scss
│ │ ├── footer.scss
│ │ ├── forms.scss
│ │ ├── loader.scss
│ │ ├── masonry.scss
│ │ ├── pageContainer.scss
│ │ ├── progressBar.scss
│ │ └── easyPieChart.scss
│ ├── generic/ # Base/reset styles
│ │ └── base.scss
│ ├── screens/ # Page-specific styles
│ │ ├── chat.scss
│ │ └── email.scss
│ ├── settings/ # Variables and configuration
│ │ ├── baseColors.scss
│ │ ├── materialColors.scss
│ │ ├── borders.scss
│ │ ├── breakpoints.scss
│ │ └── fonts.scss
│ ├── tools/ # Mixins and functions
│ │ └── mixins/
│ └── utils/ # Utility classes
│ ├── colors.scss
│ ├── theme.css # CSS variables for dark mode
│ └── layout/ # Layout helpers
└── vendor/ # Third-party plugin styles
```
## Static Assets (`src/assets/static/`)
```
static/
├── fonts/ # Icon fonts
│ ├── themify-icons/ # Themify Icons
│ └── font-awesome/ # Font Awesome (if used)
└── images/ # Images and graphics
├── logo.svg # Application logo
├── bg.jpg # Background images
├── 404.png # Error page illustrations
└── 500.png
```
## Webpack Configuration (`webpack/`)
Modular webpack configuration split into logical parts:
```
webpack/
├── config.js # Main webpack configuration
├── manifest.js # Build constants and paths
├── devServer.js # Development server settings
├── plugins/ # Webpack plugins configuration
│ ├── index.js
│ ├── html.js # HTML generation
│ ├── copy.js # File copying
│ ├── extractCSS.js # CSS extraction
│ └── ...
└── rules/ # Webpack loaders configuration
├── index.js
├── javascript.js # Babel loader
├── styles.js # SCSS/CSS loaders
├── fonts.js # Font loaders
└── images.js # Image loaders
```
## Build Output (`dist/`)
Generated directory containing compiled production files:
```
dist/
├── index.html # Compiled HTML files
├── *.html # All other pages
├── assets/
│ ├── bundle.[hash].js # Compiled JavaScript
│ ├── styles.[hash].css # Compiled CSS
│ └── static/ # Copied static assets
└── ...
```
## Documentation (`docs/`)
GitHub Pages documentation site:
```
docs/
├── index.md # Documentation home
├── getting-started/ # Getting started guides
│ ├── installation.md
│ └── project-structure.md (this file)
├── customization/ # Customization guides
│ └── theme-system.md
├── api/ # API documentation
│ └── theme-api.md
└── examples/ # Code examples
└── theme-integration.md
```
## Key Architecture Decisions
### 1. **jQuery-Free**
All JavaScript is written in modern vanilla JavaScript (ES6+) without jQuery dependency, resulting in smaller bundle size and better performance.
### 2. **Component-Based**
JavaScript is organized into reusable components (`Sidebar`, `Chart`, etc.) using ES6 classes.
### 3. **Modular SCSS**
Styles follow ITCSS methodology with clear separation of settings, tools, generic, components, and utilities.
### 4. **Modern Build System**
Webpack 5 with Babel for ES6+ transpilation, SCSS compilation, and asset optimization.
### 5. **Dark Mode Support**
CSS custom properties (variables) enable seamless theme switching between light and dark modes.
## File Naming Conventions
- **JavaScript**: camelCase for files and classes (`app.js`, `Sidebar.js`)
- **SCSS**: kebab-case for files (`sidebar.scss`, `page-container.scss`)
- **HTML**: kebab-case for files (`basic-table.html`, `google-maps.html`)
- **Components**: PascalCase for class names (`Sidebar`, `ChartComponent`)
## Import Paths
The project uses webpack aliases for cleaner imports:
```javascript
// Instead of: import Sidebar from '../../components/Sidebar'
import Sidebar from '@/components/Sidebar';
// Available aliases:
// @/ -> src/
// @/components -> src/assets/scripts/components/
// @/utils -> src/assets/scripts/utils/
// @/constants -> src/assets/scripts/constants/
```
## Adding New Features
### Adding a New Page
1. Create HTML file in `src/` (e.g., `my-page.html`)
2. Add page-specific styles in `src/assets/styles/spec/screens/`
3. Add page-specific JavaScript in `src/assets/scripts/`
4. The build system will automatically include it
### Adding a New Component
1. Create component file in `src/assets/scripts/components/`
2. Export the component class
3. Import and use in `app.js` or other modules
4. Add component styles in `src/assets/styles/spec/components/`
### Adding a New Utility
1. Create utility file in `src/assets/scripts/utils/`
2. Export functions/classes
3. Import from `@/utils/` in other files
## Next Steps
Now that you understand the project structure:
1. **[Development Workflow](development.md)** - Learn the development process
2. **[Customize Themes](../customization/theme-system.md)** - Set up dark mode and theming
3. **[Build for Production](build-deployment.md)** - Deploy your application
4. **[API Reference](../api/theme-api.md)** - JavaScript API documentation
---
**Need Help?** Check the [main README](../../README.md) or [open an issue](https://github.com/puikinsh/Adminator-admin-dashboard/issues).

Write Preview
Loading…
Cancel
Save