Part 8: Pre-Commit Hooks, Linting with Ruff, ESLint, and CI Pipeline Integration

Module: Module 1: Architecture, Monorepo Setup & Tooling
Category: Technology
Keywords: django, graphql, angular, erp, architecture, docker
Meta Description: Enforcing zero-defect code quality with automated formatting, type-checking, and linting.

1. Executive Summary & System Architecture

Configure Git pre-commit hooks running Ruff for Python and ESLint/Prettier for Angular TypeScript.

In enterprise Educational Resource Planning (ERP) systems, orchestrating students, faculty, schedules, attendance, grading, and finances demands a robust, loosely-coupled architecture. We pair Django (leveraging its robust ORM, transactional integrity, and battle-tested security) with GraphQL (providing flexible, client-driven data graphs with zero over-fetching) and Angular (featuring strict TypeScript typing, Standalone components, reactive Signals, and Apollo Client normalization).

2. Backend Database Modeling (Django ORM & PostgreSQL)

Below is the production-grade Django model definition enforcing data integrity, foreign key constraints, indexes, and audit metadata:

# backend/apps/erp/models.py
# pyproject.toml
[tool.ruff]
line-length = 100
select = ["E", "F", "I", "B", "UP"]

Key Architectural Highlights:

• Audit Logging: Inherits from a base audit model capturing created_at, updated_at, created_by, and soft-delete flags.
• Index Optimization: Explicit database indexes (db_index=True, indexes=[models.Index(...)]) positioned for high-frequency queries.
• Validation: Enforces domain constraints via clean validation methods and unique constraints across academic years and tenant boundaries.

3. GraphQL API Layer (Types, Queries & Mutations)

The GraphQL layer exposes precise schema definitions, input validation, and transactional mutation execution:

# backend/apps/erp/schema.py
# Django system checks for schema validation
# python manage.py check --deploy

Resolver & Data Fetching Patterns:

• Batch Loading: Resolvers integrate with DataLoader to eliminate N+1 database queries when fetching nested relationships.
• Permission Enforcement: Mutations verify caller authorization via role-based access decorators before touching the database.
• Transactional Consistency: Multi-table updates execute inside transaction.atomic() context blocks to ensure ACID atomicity.

4. Frontend Angular Implementation (Signals & Apollo Client)

The modern Angular implementation features Standalone components, reactive Signals, and type-safe Apollo Client interactions:

// frontend/src/app/erp/components/feature.component.ts
.eslintrc.json configuring @typescript-eslint/recommended rules,
disallowing any, and enforcing strict signal conventions.

Frontend Architectural Patterns:

• Reactivity with Signals: Uses Angular signal(), computed(), and effect primitives for fine-grained DOM updates without unnecessary change detection cycles.
• Type-Safe GraphQL: Consumes strongly-typed operations generated by @graphql-codegen.
• User Feedback: Integrates reactive loading state indicators, optimistic UI updates, and error handling toasts.

5. Security, Permissions & Multi-Tenancy

Prevent vulnerable packages or committed secret keys from entering git history using automated secret scanners.

6. Critical Pitfalls & Production Anti-Patterns

When deploying this module in large-scale institutions with thousands of concurrent users, avoid these traps:

1. Bypassing pre-commit hooks with git commit --no-verify.
2. Inconsistent formatting causing massive git diff noise across teams.
3. Allowing untyped any variables to bypass TypeScript checks.

7. Enterprise Best Practices & Production Checklist

• ✅ Automate code formatting with Ruff (Python) and Prettier (TypeScript).
• ✅ Enforce strict linting in GitHub Actions pull request gates.
• ✅ Scan for hardcoded secrets with git-leaks or trufflehog.
• ✅ Run test suites with coverage thresholds before allowing branch merges.

Part 8 of the comprehensive Fullstack Student ERP Tutorial Series.