📝 DevJournal

Un moteur de blog technique moderne — Symfony 8 · PHP 8.4 · React 19 · Tailwind CSS v4

Blog de développement pour publier des articles, des retours de bugs et des récits de parcours, avec back-office EasyAdmin, sitemap SEO dynamique, monitoring de sécurité et upload d'images.

Fonctionnalités · Stack · Installation · Fixtures · Admin · Architecture

📖 À propos

DevJournal est un moteur de blog technique full-stack pensé pour partager du contenu de développeur : articles de fond, retours d'expérience sur des bugs résolus, et récits de parcours professionnel. Le projet combine un back-end Symfony 8 / PHP 8.4 robuste avec un front-end React 19 intégré via Vite, le tout stylé avec Tailwind CSS v4.

Il met l'accent sur trois axes souvent négligés dans les projets « vitrine » :

Le SEO technique — sitemap XML dynamique, slugs propres, temps de lecture calculé, données structurées.
La sécurité applicative — journalisation des événements de sécurité, blocage d'IP/comptes, monitoring des tentatives de connexion.
L'expérience d'administration — un back-office EasyAdmin 5 complet avec tableau de bord statistique.

💡 Ce dépôt sert aussi de démonstration de savoir-faire full-stack : conception d'entités Doctrine, cycle de vie des entités (lifecycle callbacks), intégration front/back moderne, et bonnes pratiques de sécurité.

✨ Fonctionnalités

Côté public (blog)

Trois types de contenus typés via une énumération PHP : Article 📝, Bug / Retour d'expérience 🐛, Parcours 🚀 — chacun avec son badge coloré et son icône.
Slugs automatiques générés à partir du titre (via AsciiSlugger), garantis uniques.
Temps de lecture calculé automatiquement à partir du contenu.
Compteur de vues par article.
Système de tags en relation Many-to-Many, avec pages d'archives par tag.
Articles mis en avant (featured) avec positionnement personnalisable.
Upload d'image de couverture géré par VichUploaderBundle.
Formulaire de contact avec validation et anti-spam basique (stockage IP).

Côté SEO

Sitemap XML dynamique (/sitemap.xml) listant accueil, pages par type, tags, articles publiés et page contact — avec priority, changefreq et lastmod.
Cache HTTP sur le sitemap (s-maxage=3600).
Contenus riches (Markdown → HTML via league/commonmark).

Côté sécurité

Journal des événements de sécurité (SecurityEventLog) : connexions réussies/échouées, blocages, accès admin refusés, activités suspectes.
Blocage d'IP et de comptes dès la première tentative échouée, avec page de blocage dédiée.
Indexation optimisée (index Doctrine sur event_type, ip_address, created_at).

Côté administration

Back-office EasyAdmin 5 thématisé ($_ DevJournal).
Tableau de bord avec statistiques : nombre d'articles, publiés/brouillons, tags, total des vues, derniers articles, plus consultés.
Gestion des utilisateurs avec rôles, blocage de compte et vérification email.

🛠️ Stack technique

Domaine	Technologies
Back-end	PHP 8.4, Symfony 8.1, Doctrine ORM 3.6
Front-end	React 19, Redux, React Router, Tailwind CSS v4, Vite 8
Intégration	pentatrion/vite-bundle, Symfony UX (Turbo, Stimulus)
Base de données	MySQL / MariaDB (compatible via Doctrine DBAL)
Admin	EasyAdmin 5
Uploads	VichUploaderBundle
Sécurité	symfony/security-bundle, rate-limiter
Contenu	league/commonmark (Markdown → HTML)
Emails	symfony/mailer + verify-email-bundle
Outils dev	Maker Bundle, Fixtures Bundle, PHPUnit 13, Web Profiler

📦 Prérequis

Avant de commencer, assure-toi d'avoir installé :

PHP ≥ 8.4 avec les extensions ctype, iconv, pdo_mysql
Composer 2.x
Node.js ≥ 20 et npm
MySQL 8 ou MariaDB 10.6+
(Optionnel) Symfony CLI pour le serveur de dev local

🚀 Installation

1. Cloner le dépôt

git clone https://github.com/Amar1921/devjournal.git
cd devjournal

2. Installer les dépendances PHP

composer install

3. Installer les dépendances front-end

npm install

4. Configurer l'environnement

Copie le fichier d'environnement et adapte-le :

cp .env.exemple .env.local

Édite .env.local pour renseigner ta connexion base de données et tes variables :

# .env.local
APP_ENV=dev
APP_SECRET=change_me

# Base de données (adapte user/password/dbname)
DATABASE_URL="mysql://app_user:app_password@127.0.0.1:3306/devjournal?serverVersion=8.0&charset=utf8mb4"

# Mailer (exemple)
MAILER_DSN=smtp://localhost:1025

# Email admin (pour la page de blocage et les alertes)
ADMIN_EMAIL=admin@amarsyll.pro

5. Créer la base de données et le schéma

# Créer la base
php bin/console doctrine:database:create

# Jouer les migrations (schéma versionné)
php bin/console doctrine:migrations:migrate

🔧 Alternative rapide en dev (sans migrations) :
php bin/console doctrine:schema:update --force

6. Charger les données de démo (fixtures)

php bin/console doctrine:fixtures:load

Voir la section Fixtures pour le détail de ce qui est généré.

7. Compiler les assets front-end

# En mode développement (hot-reload)
npm run dev

# OU pour un build de production
npm run build

8. Lancer le serveur

# Avec Symfony CLI (recommandé)
symfony serve -d

# OU avec le serveur PHP intégré
php -S localhost:8000 -t public/

L'application est accessible sur http://localhost:8000 🎉 Le back-office se trouve sur http://localhost:8000/admin.

🌱 Données de démo (fixtures)

Le projet fournit des fixtures pour peupler la base avec un jeu de données réaliste, idéal pour tester ou faire une démo :

php bin/console doctrine:fixtures:load

⚠️ Cette commande vide la base avant de recharger les données (elle demande confirmation). Pour l'exécuter sans confirmation :

php bin/console doctrine:fixtures:load --no-interaction

Les fixtures génèrent :

1 utilisateur administrateur — identifiants par défaut :
- Email : admin@amarsyll.pro
- Mot de passe : admin1234
~20 tags techniques (Symfony, React, Doctrine, Vite, JWT, DevOps…).
50+ articles répartis sur les trois types (Article, Bug, Parcours) :
- dates de publication réparties sur ~18 mois,
- ~80 % publiés / 20 % en brouillon,
- quelques articles mis en avant (featured),
- 2 à 4 tags aléatoires par article,
- contenu HTML riche (titres, listes, blocs de code).

🔐 Pense à changer le mot de passe admin avant tout déploiement en production.

🔐 Back-office EasyAdmin

Le back-office est protégé par le rôle ROLE_ADMIN et accessible sur /admin.

Connexion

Utilise le compte admin créé par les fixtures (ou crée le tien) :

# Créer un utilisateur admin manuellement (exemple via Maker ou tinker)
php bin/console make:user

Pour promouvoir un utilisateur existant en admin, tu peux mettre à jour son champ roles en base (["ROLE_ADMIN"]) ou passer par une petite commande dédiée.

Ce que tu peux gérer

Section	Actions
Tableau de bord	Stats globales (articles, vues, brouillons, tags), derniers articles, plus consultés
Articles	CRUD complet, publication, mise en avant, upload de couverture, gestion des tags
Tags	Création et édition (slug auto-généré)
Utilisateurs	Rôles, blocage de compte, statut de vérification

Le tableau de bord affiche notamment le total cumulé des vues via une requête DQL d'agrégation, et met en valeur les 5 articles les plus récents et les plus consultés.

🏗️ Architecture

Modèle de données (entités Doctrine)

Post ─────────┬──── ManyToMany ────── Tag
              │
              ├──── ManyToOne  ────── User (author)
              │
              └──── UploadableField ── coverImage (VichUploader)

User ───────── implements UserInterface, PasswordAuthenticatedUserInterface

SecurityEventLog ──── ManyToOne (nullable) ── User

ContactMessage ────── (autonome)

Points techniques remarquables

Énumération typée (PostType) avec méthodes métier : label(), badgeClasses() (classes Tailwind), icon() et choices() pour les formulaires — le type est mappé directement en base via enumType.
Lifecycle callbacks Doctrine sur Post (PrePersist / PreUpdate) : génération du slug, gestion automatique de publishedAt, createdAt, updatedAt.
Index de base de données explicites pour les performances (idx_post_published, idx_event_type, etc.).
Sécurité : User gère les rôles, le blocage de compte (isBlocked), la vérification email, et un plainPassword non persisté pour les formulaires admin.
SEO : SitemapController construit un sitemap complet et cacheable en une seule passe.
Intégration Vite/Symfony : deux points d'entrée (app.js public et admin/index.jsx), manifest activé, minification CSS, alias @ vers assets/.

Structure du projet

devjournal/
├── assets/                 # Front-end (React, JS, CSS)
│   ├── app.js              # Point d'entrée public
│   └── admin/index.jsx     # Point d'entrée admin
├── config/                 # Configuration Symfony
├── migrations/             # Migrations Doctrine versionnées
├── public/                 # Racine web (build Vite → public/build)
├── src/
│   ├── Controller/         # Contrôleurs (Blog, Sitemap, Security…)
│   │   └── Admin/          # DashboardController + CRUD EasyAdmin
│   ├── Entity/             # Post, Tag, User, SecurityEventLog, ContactMessage
│   ├── Enum/               # PostType
│   ├── Repository/         # Repositories Doctrine
│   ├── Service/            # SecurityMonitorService…
│   └── DataFixtures/       # AppFixtures
├── templates/              # Vues Twig
├── composer.json
├── package.json
├── vite.config.js
└── tailwind.config.js

🧪 Tests

# Lancer la suite de tests PHPUnit
php bin/phpunit

# Avec couverture (si Xdebug/PCOV activé)
php bin/phpunit --coverage-html var/coverage

📜 Commandes utiles

Commande	Description
`symfony serve -d`	Démarrer le serveur de dev en arrière-plan
`npm run dev`	Serveur Vite avec hot-reload
`npm run build`	Build de production des assets
`php bin/console doctrine:migrations:migrate`	Appliquer les migrations
`php bin/console doctrine:fixtures:load`	Recharger les données de démo
`php bin/console cache:clear`	Vider le cache Symfony
`php bin/console debug:router`	Lister toutes les routes

🚢 Déploiement (production)

Quelques points d'attention pour un déploiement propre (typiquement sur un VPS Ubuntu avec Apache/Nginx + PHP-FPM) :

# 1. Optimiser l'autoloader et passer en prod
composer install --no-dev --optimize-autoloader
APP_ENV=prod APP_DEBUG=0

# 2. Compiler les assets
npm ci && npm run build

# 3. Vider et préchauffer le cache
php bin/console cache:clear --env=prod
php bin/console cache:warmup --env=prod

# 4. Jouer les migrations
php bin/console doctrine:migrations:migrate --no-interaction --env=prod

Configure le DocumentRoot sur le dossier public/.
Active HTTPS (Let's Encrypt).
Renseigne un vrai MAILER_DSN et un ADMIN_EMAIL.
Change APP_SECRET et le mot de passe admin.

🗺️ Roadmap (idées d'évolution)

Flux RSS/Atom des articles publiés
Données structurées JSON-LD (Article, BreadcrumbList)
Recherche full-text côté public
Système de commentaires modérés
Cache d'application (Redis) sur les pages les plus consultées
Tests fonctionnels du back-office

👤 Auteur

Amar Syll — Développeur full-stack (Symfony / React)

🌐 Portfolio : amarsyll.pro
💼 GitHub : @Amar1921
✉️ Contact : amar91syll@gmail.com

📄 Licence

Construit avec ❤️ et beaucoup de ☕ — Symfony · React · Tailwind

Name		Name	Last commit message	Last commit date
Latest commit History 3 Commits
assets		assets
bin		bin
config		config
migrations		migrations
public		public
src		src
templates		templates
tests		tests
translations		translations
.editorconfig		.editorconfig
.env.dev		.env.dev
.env.exemple		.env.exemple
.env.test		.env.test
.gitignore		.gitignore
Readme.md		Readme.md
compose.override.yaml		compose.override.yaml
compose.yaml		compose.yaml
composer.json		composer.json
composer.lock		composer.lock
importmap.php		importmap.php
package.json		package.json
phpunit.dist.xml		phpunit.dist.xml
symfony.lock		symfony.lock
tailwind.config.js		tailwind.config.js
vite.config.js		vite.config.js
yarn.lock		yarn.lock

Folders and files

Latest commit

History

Repository files navigation

📝 DevJournal

📖 À propos

✨ Fonctionnalités

Côté public (blog)

Côté SEO

Côté sécurité

Côté administration

🛠️ Stack technique

📦 Prérequis

🚀 Installation

1. Cloner le dépôt

2. Installer les dépendances PHP

3. Installer les dépendances front-end

4. Configurer l'environnement

5. Créer la base de données et le schéma

6. Charger les données de démo (fixtures)

7. Compiler les assets front-end

8. Lancer le serveur

🌱 Données de démo (fixtures)

🔐 Back-office EasyAdmin

Connexion

Ce que tu peux gérer

🏗️ Architecture

Modèle de données (entités Doctrine)

Points techniques remarquables

Structure du projet

🧪 Tests

📜 Commandes utiles

🚢 Déploiement (production)

🗺️ Roadmap (idées d'évolution)

👤 Auteur

📄 Licence

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

Packages