Islamic App - Full-Stack Application with Enterprise DevOps

A production-ready Islamic application built with modern full-stack technologies and enterprise-grade DevOps practices. This project demonstrates comprehensive CI/CD automation, containerization, Kubernetes orchestration, and GitOps deployment methodologies while serving the Muslim community with essential digital Islamic tools.

Developer Information

Khaled Hawil

GitHub: @khaledhawil
Email: khaledhawil91@gmail.com
LinkedIn: khaledhawi
Portfolio: DevOps Engineer

Project Overview

The Islamic App is a full-stack web application that combines traditional Islamic resources with cutting-edge technology to provide an accessible platform for worship, learning, and spiritual growth. Built with modern architecture principles and enterprise DevOps practices, this project serves as both a functional application and a demonstration of professional software development and deployment practices.

Key Objectives

Digital Islamic Tools: Prayer times, Quran reader, Hadith collections, digital Tasbeh
DevOps Excellence: Complete CI/CD pipeline with automated testing and deployment
Scalability: Kubernetes-native architecture with auto-scaling capabilities
Security: Integrated security scanning and best practices
Maintainability: Comprehensive documentation and monitoring

Documentation Hub

This project includes extensive documentation for all components:

Component	Documentation	Description
Overview	`DEVOPS_GUIDE.md`	Complete DevOps architecture and workflows
File Reference	`FILE_INDEX.md`	Comprehensive file-by-file documentation
Frontend	`frontend/BUILD.md`	React TypeScript build instructions
Backend	`backend/BUILD.md`	Flask API build and deployment
Database	`database/DATABASE.md`	PostgreSQL setup and management
Docker	`docker-compose.md`	Container orchestration guide
Jenkins	`Jenkinsfile.md`	CI/CD pipeline documentation
Kubernetes	`k8s/k8s-documentation.md`	Container orchestration
ArgoCD	`argocd/argocd-documentation.md`	GitOps deployment
Nginx	`nginx/nginx-documentation.md`	Load balancer configuration
Scripts	`k8s/SCRIPTS.md`	Deployment automation scripts

📋 Application Features

Islamic Functionality

Digital Tasbeh Counter: Advanced counter with achievement system and progress tracking
Quran Reader: Complete Quran with Arabic text, translations, and search functionality
Quran Audio: High-quality recitations with multiple reciters and playback controls
Hadith Collection: Searchable database with authentic hadiths from major collections
Prayer Times: Location-based prayer time calculations with notifications
Azkar and Duas: Collection of Islamic supplications and daily remembrances
User Profiles: Personal settings, preferences, and spiritual progress tracking
Islamic Calendar: Hijri calendar integration with important Islamic dates

Technical Features

Responsive Design: Mobile-first approach with cross-device compatibility
Theme Support: Dark/light mode with user preferences
Secure Authentication: JWT-based authentication with user management
Performance Optimization: Lazy loading, caching, and optimized bundle sizes
Multi-language Support: Internationalization for global Muslim community
Accessibility: WCAG compliant design for inclusive user experience

DevOps Infrastructure

Containerization: Docker containers for all services with multi-stage builds
Orchestration: Kubernetes deployment with auto-scaling and self-healing
CI/CD Pipeline: Jenkins automated build, test, and deployment
GitOps: ArgoCD for continuous delivery and configuration management
Load Balancing: Nginx reverse proxy with SSL termination
Database: PostgreSQL with persistent storage and automated backups
Security Scanning: Trivy vulnerability assessment in CI/CD pipeline
Monitoring: Application health checks and performance monitoring

🏗️ Architecture Overview

graph TB
    subgraph "Client Layer"
        A[Web Browser] --> B[React Frontend]
    end
    
    subgraph "Load Balancer"
        B --> C[Nginx Ingress]
    end
    
    subgraph "Application Layer"
        C --> D[Flask Backend API]
    end
    
    subgraph "Data Layer"
        D --> E[PostgreSQL Database]
    end
    
    subgraph "DevOps Pipeline"
        F[Git Repository] --> G[Jenkins CI/CD]
        G --> H[Docker Registry]
        H --> I[ArgoCD GitOps]
        I --> J[Kubernetes Cluster]
    end
    
    subgraph "External APIs"
        D --> K[Prayer Times API]
        D --> L[Quran API]
        D --> M[Hadith API]
    end

⚙️ Technology Stack

Frontend Technologies

Technology	Version	Purpose
React	18.2.0	Modern UI framework with hooks and concurrent features
TypeScript	4.9.5	Type-safe development with enhanced IDE support
Material-UI	5.13.0	Production-ready React components and design system
React Router	6.18.0	Declarative routing for single-page applications
Zustand	4.4.6	Lightweight state management without boilerplate
Axios	1.5.2	Promise-based HTTP client with interceptors

Backend Technologies

Technology	Version	Purpose
Flask	2.2+	Lightweight and flexible Python web framework
SQLAlchemy	Latest	Python SQL toolkit and Object-Relational Mapping
Flask-JWT-Extended	Latest	JWT token authentication for Flask applications
PostgreSQL	15	Advanced open-source relational database
Gunicorn	Latest	Python WSGI HTTP Server for production

DevOps & Infrastructure

Tool	Purpose	Environment
Docker	Containerization platform	All environments
Kubernetes	Container orchestration at scale	Production
Jenkins	Continuous Integration/Continuous Deployment	CI/CD Pipeline
ArgoCD	GitOps continuous delivery	Production
Nginx	Reverse proxy and load balancer	Production
Trivy	Vulnerability scanner for containers	Security

🛠️ Development & Deployment Tools

Version Control & Repository Management

Tool	Purpose	Configuration
Git/GitHub	Source code version control and collaboration	- Repository hosting - Webhook integration for CI/CD - Access tokens for Jenkins integration

Containerization & Orchestration

Tool	Purpose	Configuration
Docker	Application containerization	- Multi-stage builds for optimization - Container image management
Docker Compose	Local development environment	- Multi-service orchestration - Volume management for development
Kubernetes (kubeadm)	Production container orchestration	- 3-node cluster setup - Auto-scaling and self-healing - Persistent storage management

CI/CD Pipeline

Tool	Purpose	Configuration
Jenkins	Continuous Integration/Deployment	- Containerized deployment for easy management - Multibranch pipeline for branch-based builds - Ignore Git Committer strategy to prevent infinite webhook loops - Discord integration for real-time build notifications - GitHub access token integration for secure API access
Ngrok	Local development webhook tunneling	- Development tunnel for GitHub webhook forwarding - Enables GitHub webhooks to reach local Jenkins instance - Simplifies local development and testing of CI/CD workflows

GitOps & Deployment

Tool	Purpose	Configuration
ArgoCD	GitOps continuous delivery	- Deployed in Kubernetes cluster - Automated application synchronization - Staging and production environments

Infrastructure & Networking

Tool	Purpose	Configuration
Nginx	Reverse proxy and load balancer	- SSL termination - Static file serving - Request routing
Vagrant	Development environment virtualization	- 3-node Kubernetes cluster - Consistent development environment - kubeadm cluster setup

Development Environment

Tool	Purpose	Configuration
VS Code	Primary development IDE	- Extensions for React, Python, Docker, Kubernetes - Integrated terminal and debugging
Bash Scripting	Automation and deployment	- Deployment scripts in `k8s/` directory - Database migration scripts - Easy-to-use automation tools

Notification & Monitoring

Tool	Purpose	Configuration
Discord	Build status notifications	- Real-time pipeline status updates - Success/failure notifications - Team collaboration

Security & Authentication

Component	Purpose	Implementation
GitHub Access Tokens	Jenkins-GitHub integration	- Secure API access for Jenkins - Webhook authentication - Repository access management
Webhook Protection	Infinite loop prevention	- Git committer ignore rules - Smart triggering logic

Key DevOps Practices Implemented

Infrastructure as Code: All configurations version-controlled
GitOps Workflow: ArgoCD manages deployments from Git
Containerized CI/CD: Jenkins running in containers
Multi-Environment Support: Staging and production pipelines
Automated Testing: Integrated into pipeline stages
Security Scanning: Vulnerability assessment with Trivy
Zero-Downtime Deployments: Rolling updates with Kubernetes
Monitoring & Alerting: Real-time notifications via Discord

📁 Project Structure

islamic-app/
├── 📁 frontend/                     # React TypeScript Application
│   ├── 📁 src/
│   │   ├── 📁 components/          # Reusable UI components
│   │   ├── 📁 pages/               # Main application pages
│   │   ├── 📁 contexts/            # React context providers
│   │   ├── 📁 hooks/               # Custom React hooks
│   │   ├── 📁 services/            # API service layer
│   │   ├── 📁 stores/              # Zustand state management
│   │   └── 📁 utils/               # Utility functions
│   ├── 📄 BUILD.md                 # Frontend build documentation
│   ├── 📄 Dockerfile               # Frontend container definition
│   └── 📄 package.json             # Dependencies and scripts
├── 📁 backend/                      # Flask Python API
│   ├── 📁 models/                  # SQLAlchemy database models
│   ├── 📁 routes/                  # API endpoint handlers
│   ├── 📁 schemas/                 # Data validation schemas
│   ├── 📁 utils/                   # Backend utility functions
│   ├── 📄 BUILD.md                 # Backend build documentation
│   ├── 📄 app.py                   # Flask application entry point
│   ├── 📄 Dockerfile               # Backend container definition
│   └── 📄 requirements.txt         # Python dependencies
├── 📁 database/                     # Database Management
│   ├── 📄 DATABASE.md              # Database documentation
│   ├── 📄 init.sql                 # Initial schema creation
│   ├── 📄 migrate.sh               # Migration script
│   └── 📁 migrations/              # Version-controlled migrations
├── 📁 k8s/                         # Kubernetes Manifests
│   ├── 📄 k8s-documentation.md     # Kubernetes deployment guide
│   ├── 📄 SCRIPTS.md               # Deployment scripts documentation
│   ├── 📄 *.yaml                   # Kubernetes resource definitions
│   ├── 📄 build-images.sh          # Docker image build script
│   ├── 📄 deploy.sh                # Complete deployment automation
│   ├── 📄 deploy-only.sh           # Deploy without building
│   ├── 📄 setup.sh                 # Initial cluster setup
│   └── 📄 cleanup.sh               # Resource cleanup
├── 📁 argocd/                      # GitOps Configuration
│   ├── 📄 argocd-documentation.md  # ArgoCD setup and usage
│   ├── 📄 application.yaml         # Production application definition
│   ├── 📄 application-staging.yaml # Staging application definition
│   ├── 📄 project.yaml             # ArgoCD project configuration
│   └── 📄 deploy.sh                # ArgoCD deployment script
├── 📁 nginx/                       # Load Balancer Configuration
│   ├── 📄 nginx-documentation.md   # Nginx configuration guide
│   └── 📄 nginx.conf               # Nginx server configuration
├── 📄 docker-compose.yml           # Development environment
├── 📄 docker-compose.md            # Docker Compose documentation
├── 📄 Jenkinsfile                  # CI/CD Pipeline definition
├── 📄 Jenkinsfile.md               # Jenkins pipeline documentation
├── 📄 DEVOPS_GUIDE.md              # Master DevOps documentation
├── 📄 FILE_INDEX.md                # Complete file reference
└── 📄 README.md                    # This file

Quick Start

Prerequisites

Node.js 16+
Python 3.8+
PostgreSQL 12+
Docker 20+
Docker Compose 2.0+

Development Setup

One-command setup:

git clone <repository-url>
cd Full-DevOps-Project-islamic-app
docker-compose up -d

Access points:

Frontend: http://localhost:3000
API: http://localhost:5000
Database: localhost:5432

Manual setup:

# Frontend
cd frontend && npm install && npm start

# Backend
cd backend && python -m venv venv && source venv/bin/activate
pip install -r requirements.txt && python app.py

# Database
docker run -d --name islamic-db \
  -e POSTGRES_DB=islamic_app \
  -e POSTGRES_USER=islamic_user \
  -e POSTGRES_PASSWORD=islamic_pass123 \
  -p 5432:5432 postgres:15-alpine

Deployment

Docker Compose (Development)

# Start all services
docker-compose up -d

# View logs
docker-compose logs -f

# Clean rebuild
docker-compose down -v && docker-compose up --build -d

Kubernetes (Production)

# Quick deployment
cd k8s && ./setup.sh && ./deploy.sh

# Manual deployment
kubectl apply -f k8s/

# Verify deployment
kubectl get pods -n islamic-app

GitOps with ArgoCD

# Deploy ArgoCD applications
cd argocd && ./deploy.sh

# Access ArgoCD UI
kubectl port-forward svc/argocd-server -n argocd 8080:443

CI/CD Pipeline

Jenkins Pipeline Features

The Jenkins pipeline (Jenkinsfile) provides enterprise-grade CI/CD automation:

Pipeline Stages:

Checkout & Change Detection: Smart detection of frontend/backend changes
Build: Multi-architecture Docker image builds
Security Scan: Trivy vulnerability assessment
Push: Registry upload with semantic versioning
Deploy: Automated Kubernetes deployment
Notify: Discord webhook notifications

Key Features:

Smart Building: Only builds changed components
Security First: Mandatory vulnerability scanning
Multi-Environment: Separate pipelines for staging/production
Rollback Support: Automated rollback on failure
Resource Optimization: Parallel builds and caching

# Manual pipeline trigger
# Webhook URL: https://jenkins.yourdomain.com/github-webhook/

# Build specific components
curl -X POST "https://jenkins.yourdomain.com/job/islamic-app/buildWithParameters" \
  -d "BUILD_TYPE=frontend-only"

Pipeline Monitoring

Build Status Dashboard:

Build success/failure rates
Build duration trends
Security scan results
Deployment status across environments

API Documentation

Authentication

Method	Endpoint	Description
POST	`/api/auth/register`	User registration
POST	`/api/auth/login`	User authentication
GET	`/api/auth/profile`	Get user profile
PUT	`/api/auth/profile`	Update profile

Islamic Content

Method	Endpoint	Description
GET	`/api/quran/surah/{id}`	Get specific Surah
GET	`/api/quran/search`	Search Quran text
GET	`/api/hadith/collections`	Get hadith collections
GET	`/api/prayer-times`	Get prayer times
GET	`/api/tasbeh/phrases`	Get tasbeh counts
POST	`/api/tasbeh/increment`	Increment phrase count

Health Monitoring

Method	Endpoint	Description
GET	`/health`	Application health check
GET	`/api/health/detailed`	Detailed health status
GET	`/metrics`	Prometheus metrics

Security & Performance

Security Features

JWT-based authentication with refresh tokens
bcrypt password hashing
CORS configuration and input validation
Container vulnerability scanning with Trivy
TLS encryption and RBAC in Kubernetes
Secrets management and network policies

Performance Optimization

Frontend: Code splitting, lazy loading, service workers
Backend: Connection pooling, query optimization, caching
Infrastructure: Auto-scaling, resource optimization, CDN integration

Monitoring

Application health checks and performance metrics
Kubernetes and container monitoring
Error tracking and alerting
Discord/Slack notifications for incidents

Testing & Quality Assurance

Testing Strategy

# Frontend tests
npm test                    # Unit tests with Jest
npm run test:integration    # Integration tests
npm run test:e2e           # End-to-end tests with Cypress

# Backend tests
pytest tests/unit/         # Unit tests
pytest tests/integration/  # Integration tests
pytest tests/api/          # API tests

Code Quality

TypeScript strict mode with ESLint + Prettier
Python PEP 8 compliance with type hints
Automated security scanning in CI/CD
Comprehensive test coverage (>80%)

📸 Screenshots & Documentation

🕌 Application Features

Main Application Interface

Main dashboard with Islamic resources and navigation

Authentication System

Login Interface	Registration Interface

Islamic Features

Prayer Times	Digital Tasbeh

Quran Audio	Quran Reader

Hadith Collection	Azkar & Duas

🚀 DevOps Pipeline & Infrastructure

Jenkins CI/CD Pipeline

Complete CI/CD pipeline with frontend and backend build stages

Advanced pipeline with security image scanning using Trivy

Build Notifications

Real-time build status notifications via Discord integration

Kubernetes & GitOps

All application resources deployed in Kubernetes cluster

ArgoCD GitOps interface showing deployment status

Kubernetes cluster resource monitoring

Development Environment

Development environment with project structure

Ngrok tunnel for GitHub webhook forwarding

Contributing

Development Workflow

Fork the repository
Create a feature branch: git checkout -b feature/your-feature
Make changes and test locally
Commit with clear messages: git commit -m "feat: add new feature"
Push and create a pull request

Code Standards

Follow TypeScript/ESLint configuration for frontend
Follow PEP 8 standards for Python backend
Maintain test coverage above 80%
Update documentation for new features

Commit Message Format

type(scope): description

Examples:
feat(auth): add two-factor authentication
fix(api): resolve prayer times calculation error
docs(k8s): update deployment instructions

Support

Getting Help

Documentation: Comprehensive guides in this repository
Issues: Create GitHub issues for bugs or feature requests
Discussions: Use GitHub Discussions for questions
Email: Contact maintainer for security issues

Project Status

Quick Reference

Essential Commands

# Development
docker-compose up -d              # Start development environment
npm start                         # Frontend development server
python app.py                     # Backend development server

# Building
npm run build                     # Build frontend for production
./k8s/build-images.sh            # Build all images for Kubernetes

# Deployment
./k8s/deploy.sh                  # Deploy to Kubernetes
./argocd/deploy.sh               # Setup GitOps deployment

# Maintenance
kubectl get all pods -n islamic-app -o wide   # Check Kubernetes status
docker-compose logs -f            # View application logs
./k8s/cleanup.sh                 # Clean up resources

Built for the Muslim community with modern technology and enterprise DevOps practices.

Name		Name	Last commit message	Last commit date
Latest commit History 86 Commits
ansible		ansible
argocd		argocd
backend		backend
database		database
frontend		frontend
helm		helm
images		images
k8s		k8s
nginx		nginx
terraform		terraform
.gitignore		.gitignore
DEVOPS_GUIDE.md		DEVOPS_GUIDE.md
Jenkinsfile		Jenkinsfile
Jenkinsfile.md		Jenkinsfile.md
README.md		README.md
deploy-infrastructure.sh		deploy-infrastructure.sh
deploy.yaml		deploy.yaml
docker-compose.md		docker-compose.md
docker-compose.yml		docker-compose.yml
helm-deploy.sh		helm-deploy.sh
setup-sonarqube.sh		setup-sonarqube.sh
sonar-project.properties		sonar-project.properties

Folders and files

Latest commit

History

Repository files navigation

Islamic App - Full-Stack Application with Enterprise DevOps

Developer Information

Project Overview

Key Objectives

Documentation Hub

Islamic Functionality

Technical Features

DevOps Infrastructure

Frontend Technologies

Backend Technologies

DevOps & Infrastructure

Version Control & Repository Management

Containerization & Orchestration

CI/CD Pipeline

GitOps & Deployment

Infrastructure & Networking

Development Environment

Notification & Monitoring

Security & Authentication

Key DevOps Practices Implemented

Quick Start

Prerequisites

Development Setup

Docker Compose (Development)

Kubernetes (Production)

GitOps with ArgoCD

Jenkins Pipeline Features

Pipeline Monitoring

Authentication

Islamic Content

Health Monitoring

Security Features

Performance Optimization

Monitoring

Testing Strategy

Code Quality

📸 Screenshots & Documentation

Main Application Interface

Authentication System

Islamic Features

Jenkins CI/CD Pipeline

Build Notifications

Kubernetes & GitOps

Development Environment

Development Workflow

Code Standards

Commit Message Format

Getting Help

Project Status

Quick Reference

Essential Commands

About

Topics

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

Packages