Itqan CMS Frontend

An open-source Quranic Content Management System frontend built with Angular 20. Itqan CMS empowers developers and publishers by providing a comprehensive platform to access, manage, and distribute Quranic assets with proper licensing. Built for the global Islamic tech community to create innovative Quranic applications and services.

🌟 Features

• Quranic Asset Management - Browse, search, and manage Quranic content including recitations, translations, tafsir, and more
• Publisher Portal - Empowers publishers to safely publish and manage their Quranic content with proper licensing
• Developer-Friendly API - Provides structured access to Quranic assets for building apps and services
• Content Standards - Comprehensive guidelines ensuring quality and authenticity of Quranic content
• License Management - Track, manage, and enforce content licenses to protect intellectual property
• Internationalization - Multi-language support (English & Arabic) with RTL support
• Authentication & Authorization - Secure user management with role-based access control
• Responsive Design - Modern, accessible UI built with Ng-Zorro (Ant Design for Angular)

🚀 Quick Start

Prerequisites

• Node.js 20 or higher
• npm 9 or higher (comes with Node.js)
• Git

Installation

# Clone the repository
git clone https://github.com/Itqan-community/cms-frontend.git

# Navigate to the project directory
cd cms-frontend

# Install dependencies
npm install

# Start the development server
npm start

The application will be available at http://localhost:4200/

📦 Tech Stack

• Framework: Angular 20
• UI Library: Ng-Zorro (Ant Design)
• Styling: LESS
• Internationalization: @ngx-translate
• Build Tool: Angular CLI
• Testing: Karma + Jasmine

🛠️ Development

Available Scripts

Command	Description
npm start	Start development server on http://localhost:4200
npm run build	Build for production
npm run build:staging	Build for staging environment
npm run build:production	Build for production environment
npm run test	Run unit tests with Karma
npm run lint	Lint the codebase
npm run format	Format code with Prettier
npm run format:check	Check code formatting without modifying files

Project Structure

cms-frontend/
├── public/                   # Static assets
│   ├── assets/              # Images, icons, fonts
│   └── i18n/                # Translation files
├── src/
│   ├── app/
│   │   ├── core/            # Core functionality (auth, constants, enums)
│   │   ├── features/        # Feature modules (gallery, publishers, etc.)
│   │   └── shared/          # Shared components and services
│   ├── environments/        # Environment configurations
│   └── styles/              # Global styles
├── angular.json             # Angular CLI configuration
├── netlify.toml            # Netlify deployment configuration
└── package.json            # Dependencies and scripts

Angular Configuration

The project uses Angular 20 with:

• Build System: Application builder (@angular/build:application)
• Style Preprocessor: LESS
• Routing: Standalone components with Angular Router
• State Management: RxJS + Angular Signals
• HTTP Client: Angular HttpClient with interceptors

Code Generation

# Generate a new component
ng generate component component-name

# Generate a new service
ng generate service service-name

# Generate a new module
ng generate module module-name

# For more options
ng generate --help

🌍 Environments

The application supports two deployment environments:

Environment	Branch	URL	Config File
Staging	staging	https://staging.cms.itqan.dev	environment.staging.ts
Production	master	https://cms.itqan.dev	environment.prod.ts

Building for Different Environments

# Staging build (default for local development)
npm run build -- --configuration=staging

# Production build
npm run build -- --configuration=production

🚢 Deployment

The project is configured for automatic deployment on Netlify:

• Staging Branch → Staging environment
• Master Branch → Production environment

Deployment is handled automatically via netlify.toml configuration.

Manual Deployment

# Build for production
npm run build

# Deploy the dist/cms-frontend/browser directory to your hosting provider

🧪 Testing

# Run unit tests
npm run test

# Run tests in headless mode (CI)
npm run test -- --browsers=ChromeHeadless --watch=false

# Run tests with code coverage
npm run test -- --code-coverage

🎨 Code Style

This project uses:

• Prettier for code formatting
• EditorConfig for consistent editor settings
• ESLint for linting (if configured)

Format Code

# Format all files
npm run format

# Check formatting
npm run format:check

Automated Quality Checks

This project uses Git hooks to maintain code quality:

• Pre-commit: Auto-formats code with Prettier
• Commit-msg: Validates commit messages follow Conventional Commits
• Pre-push: Validates branch naming convention

These hooks are automatically installed when you run npm install.

🤝 Contributing

We welcome contributions from the community! Please read our Contributing Guide to get started.

Development Workflow

1. Fork the repository
2. Create a feature branch from staging
3. Make your changes
4. Write/update tests as needed
5. Ensure all tests pass
6. Submit a Pull Request to staging branch

Please read CODE_OF_CONDUCT.md before contributing.

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

🔗 Links

• Backend Repository: cms-backend
• Production Site: https://cms.itqan.dev
• Community Forum: community.itqan.dev
• Documentation: Angular Docs | Ng-Zorro Docs
• Issues: Report a Bug
• Discussions: GitHub Discussions

👥 Contributors

Thanks to all our contributors! See the Contributors page.

🤝 Community

• Website: https://itqan.dev
• Community Forum: community.itqan.dev
• LinkedIn: Itqan Community
• GitHub: Itqan Community

---

Made with ❤️ by the Itqan Community