refactor: improve formatting, type safety, and component organization

- Adjusted inconsistent formatting for better readability across components and services.
- Enhanced type safety by adding placeholders for ignored error parameters and improving types across services.
- Improved component organization by reordering imports consistently and applying formatting updates in UI components.

README.md

@@ -59,12 +59,28 @@ Pour approfondir vos connaissances techniques sur le projet :
 
 ## Comment l'utiliser ?
 
-### Installation locale
+### Déploiement en Production
 
-1. Clonez le dépôt.
+Le projet est prêt pour la production via Docker Compose.
-2. Installez les dépendances avec `pnpm install`.
+
-3. Configurez les variables d'environnement (voir `.env.example`).
+1. **Prérequis** : Docker et Docker Compose installés.
-4. Lancez les services via Docker ou manuellement.
+2. **Variables d'environnement** : Copiez `.env.example` en `.env.prod` et ajustez les valeurs (clés secrètes, hosts, Sentry DSN, etc.).
+3. **Lancement** :
+   ```bash
+   docker-compose -f docker-compose.prod.yml up -d
+   ```
+4. **Services inclus** :
+   - **Frontend** : Next.js en mode standalone optimisé.
+   - **Backend** : NestJS avec clustering et monitoring Sentry.
+   - **Caddy** : Gestion automatique du SSL/TLS.
+   - **ClamAV** : Scan antivirus en temps réel des médias.
+   - **Redis** : Cache, sessions et limitation de débit (Throttling/Bot detection).
+   - **MinIO** : Stockage compatible S3.
+
+### Sécurité et Performance
+- **Transcodage Auto** : Toutes les images sont converties en WebP et les vidéos en WebM pour minimiser la bande passante.
+- **Bot Detection** : Système intégré de détection et de bannissement automatique des crawlers malveillants via Redis.
+- **Monitoring** : Tracking d'erreurs et profilage de performance via Sentry (Node.js et Next.js).
 
 ### Clés API
 

backend/src/auth/dto/register.dto.ts

@@ -12,7 +12,8 @@ export class RegisterDto {
 	@IsNotEmpty()
 	@MaxLength(32)
 	@Matches(/^[a-z0-9_]+$/, {
-		message: "username must contain only lowercase letters, numbers, and underscores",
+		message:
+			"username must contain only lowercase letters, numbers, and underscores",
 	})
 	username!: string;
 

frontend/src/app/(auth)/login/page.tsx

@@ -108,7 +108,10 @@ export default function LoginPage() {
 					</CardHeader>
 					<CardContent>
 						{show2fa ? (
-							<form onSubmit={onOtpSubmit} className="space-y-6 flex flex-col items-center">
+							<form
+								onSubmit={onOtpSubmit}
+								className="space-y-6 flex flex-col items-center"
+							>
 								<InputOTP
 									maxLength={6}
 									value={otpValue}
@@ -126,7 +129,11 @@ export default function LoginPage() {
 										<InputOTPSlot index={5} />
 									</InputOTPGroup>
 								</InputOTP>
-								<Button type="submit" className="w-full" disabled={loading || otpValue.length !== 6}>
+								<Button
+									type="submit"
+									className="w-full"
+									disabled={loading || otpValue.length !== 6}
+								>
 									{loading ? "Vérification..." : "Vérifier le code"}
 								</Button>
 								<Button

frontend/src/app/(auth)/register/page.tsx

@@ -31,7 +31,8 @@ const registerSchema = z.object({
 		.string()
 		.min(3, { message: "Le pseudo doit faire au moins 3 caractères" })
 		.regex(/^[a-z0-9_]+$/, {
-			message: "Le pseudo ne doit contenir que des minuscules, chiffres et underscores",
+			message:
+				"Le pseudo ne doit contenir que des minuscules, chiffres et underscores",
 		}),
 	email: z.string().email({ message: "Email invalide" }),
 	password: z
@@ -43,7 +44,9 @@ const registerSchema = z.object({
 		.regex(/[a-z]/, {
 			message: "Le mot de passe doit contenir au moins une minuscule",
 		})
-		.regex(/[0-9]/, { message: "Le mot de passe doit contenir au moins un chiffre" })
+		.regex(/[0-9]/, {
+			message: "Le mot de passe doit contenir au moins un chiffre",
+		})
 		.regex(/[^A-Za-z0-9]/, {
 			message: "Le mot de passe doit contenir au moins un caractère spécial",
 		}),

frontend/src/app/(dashboard)/admin/reports/page.tsx

@@ -1,15 +1,15 @@
 "use client";
 
-import { useEffect, useState } from "react";
-import { toast } from "sonner";
 import {
-	CheckCircle,
-	XCircle,
 	AlertCircle,
-	MoreHorizontal,
 	ArrowLeft,
+	CheckCircle,
+	MoreHorizontal,
+	XCircle,
 } from "lucide-react";
 import Link from "next/link";
+import { useCallback, useEffect, useState } from "react";
+import { toast } from "sonner";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
@@ -34,34 +34,34 @@ import {
 	TableRow,
 } from "@/components/ui/table";
 import { adminService } from "@/services/admin.service";
-import { ReportStatus, type Report } from "@/services/report.service";
+import { type Report, ReportStatus } from "@/services/report.service";
 
 export default function AdminReportsPage() {
 	const [reports, setReports] = useState<Report[]>([]);
 	const [loading, setLoading] = useState(true);
 
-	const fetchReports = async () => {
+	const fetchReports = useCallback(async () => {
 		setLoading(true);
 		try {
 			const data = await adminService.getReports();
 			setReports(data);
-		} catch (error) {
+		} catch (_error) {
 			toast.error("Erreur lors du chargement des signalements.");
 		} finally {
 			setLoading(false);
 		}
-	};
+	}, []);
 
 	useEffect(() => {
 		fetchReports();
-	}, []);
+	}, [fetchReports]);
 
 	const handleUpdateStatus = async (reportId: string, status: ReportStatus) => {
 		try {
 			await adminService.updateReportStatus(reportId, status);
 			toast.success("Statut mis à jour.");
 			fetchReports();
-		} catch (error) {
+		} catch (_error) {
 			toast.error("Erreur lors de la mise à jour du statut.");
 		}
 	};
@@ -128,9 +128,7 @@ export default function AdminReportsPage() {
 							) : (
 								reports.map((report) => (
 									<TableRow key={report.uuid}>
-										<TableCell>
+										<TableCell>{report.reporterId.substring(0, 8)}...</TableCell>
-											{report.reporterId.substring(0, 8)}...
-										</TableCell>
 										<TableCell>
 											{report.contentId ? (
 												<Link
@@ -188,9 +186,7 @@ export default function AdminReportsPage() {
 													</DropdownMenuItem>
 													{report.contentId && (
 														<DropdownMenuItem asChild>
-															<Link href={`/meme/${report.contentId}`}>
+															<Link href={`/meme/${report.contentId}`}>Voir le contenu</Link>
-																Voir le contenu
-															</Link>
 														</DropdownMenuItem>
 													)}
 												</DropdownMenuContent>

frontend/src/app/(dashboard)/settings/page.tsx

@@ -3,6 +3,7 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import {
 	AlertTriangle,
+	Download,
 	Laptop,
 	Loader2,
 	Moon,
@@ -12,7 +13,6 @@ import {
 	Sun,
 	Trash2,
 	User as UserIcon,
-	Download,
 } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { useTheme } from "next-themes";
@@ -20,6 +20,7 @@ import * as React from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import * as z from "zod";
+import { TwoFactorSetup } from "@/components/two-factor-setup";
 import {
 	AlertDialog,
 	AlertDialogAction,
@@ -53,7 +54,6 @@ import { Label } from "@/components/ui/label";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 import { Spinner } from "@/components/ui/spinner";
 import { Textarea } from "@/components/ui/textarea";
-import { TwoFactorSetup } from "@/components/two-factor-setup";
 import { useAuth } from "@/providers/auth-provider";
 import { UserService } from "@/services/user.service";
 
@@ -326,7 +326,8 @@ export default function SettingsPage() {
 							<CardTitle>Portabilité des données</CardTitle>
 						</div>
 						<CardDescription>
-							Conformément au RGPD, vous pouvez exporter l'intégralité de vos données rattachées à votre compte.
+							Conformément au RGPD, vous pouvez exporter l'intégralité de vos données
+							rattachées à votre compte.
 						</CardDescription>
 					</CardHeader>
 					<CardContent>
@@ -334,7 +335,8 @@ export default function SettingsPage() {
 							<div className="space-y-1">
 								<p className="font-bold">Exporter mes données</p>
 								<p className="text-sm text-muted-foreground">
-									Téléchargez un fichier JSON contenant votre profil, vos mèmes et vos favoris.
+									Téléchargez un fichier JSON contenant votre profil, vos mèmes et vos
+									favoris.
 								</p>
 							</div>
 							<Button

frontend/src/components/content-card.tsx

@@ -35,7 +35,6 @@ import { useAuth } from "@/providers/auth-provider";
 import { ContentService } from "@/services/content.service";
 import { FavoriteService } from "@/services/favorite.service";
 import type { Content } from "@/types/content";
-import { ReportDialog } from "./report-dialog";
 import { UserContentEditDialog } from "./user-content-edit-dialog";
 
 interface ContentCardProps {
@@ -51,7 +50,7 @@ export function ContentCard({ content, onUpdate }: ContentCardProps) {
 	const [isLiked, setIsLiked] = React.useState(content.isLiked || false);
 	const [likesCount, setLikesCount] = React.useState(content.favoritesCount);
 	const [editDialogOpen, setEditDialogOpen] = React.useState(false);
-	const [reportDialogOpen, setReportDialogOpen] = React.useState(false);
+	const [_reportDialogOpen, setReportDialogOpen] = React.useState(false);
 
 	const isAuthor = user?.uuid === content.authorId;
 	const isVideo = !content.mimeType.startsWith("image/");

frontend/src/components/report-dialog.tsx

@@ -48,10 +48,12 @@ export function ReportDialog({
 				reason,
 				description,
 			});
-			toast.success("Signalement envoyé avec succès. Merci de nous aider à maintenir la communauté sûre.");
+			toast.success(
+				"Signalement envoyé avec succès. Merci de nous aider à maintenir la communauté sûre.",
+			);
 			onOpenChange(false);
 			setDescription("");
-		} catch (error) {
+		} catch (_error) {
 			toast.error("Erreur lors de l'envoi du signalement.");
 		} finally {
 			setIsSubmitting(false);

frontend/src/components/two-factor-setup.tsx

@@ -1,8 +1,8 @@
 "use client";
 
+import { Loader2, Shield, ShieldAlert, ShieldCheck } from "lucide-react";
 import { useState } from "react";
 import { toast } from "sonner";
-import { Shield, ShieldCheck, ShieldAlert, Loader2 } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import {
 	Card,
@@ -18,8 +18,8 @@ import {
 	InputOTPSeparator,
 	InputOTPSlot,
 } from "@/components/ui/input-otp";
-import { AuthService } from "@/services/auth.service";
 import { useAuth } from "@/providers/auth-provider";
+import { AuthService } from "@/services/auth.service";
 
 export function TwoFactorSetup() {
 	const { user, refreshUser } = useAuth();
@@ -36,7 +36,7 @@ export function TwoFactorSetup() {
 			setQrCode(data.qrCodeUrl);
 			setSecret(data.secret);
 			setStep("setup");
-		} catch (error) {
+		} catch (_error) {
 			toast.error("Erreur lors de la configuration de la 2FA.");
 		} finally {
 			setIsLoading(false);
@@ -52,7 +52,7 @@ export function TwoFactorSetup() {
 			await refreshUser();
 			setStep("idle");
 			setOtpValue("");
-		} catch (error) {
+		} catch (_error) {
 			toast.error("Code invalide. Veuillez réessayer.");
 		} finally {
 			setIsLoading(false);
@@ -68,14 +68,14 @@ export function TwoFactorSetup() {
 			await refreshUser();
 			setStep("idle");
 			setOtpValue("");
-		} catch (error) {
+		} catch (_error) {
 			toast.error("Code invalide. Veuillez réessayer.");
 		} finally {
 			setIsLoading(false);
 		}
 	};
 
-	// Note: We need a way to know if 2FA is enabled. 
+	// Note: We need a way to know if 2FA is enabled.
 	// Assuming user object might have twoFactorEnabled property or similar.
 	// For now, let's assume it's on the user object (we might need to add it to the type).
 	const isEnabled = (user as any)?.twoFactorEnabled;
@@ -89,7 +89,8 @@ export function TwoFactorSetup() {
 						<CardTitle>Double Authentification (2FA)</CardTitle>
 					</div>
 					<CardDescription>
-						Ajoutez une couche de sécurité supplémentaire à votre compte en utilisant une application d'authentification.
+						Ajoutez une couche de sécurité supplémentaire à votre compte en utilisant
+						une application d'authentification.
 					</CardDescription>
 				</CardHeader>
 				<CardContent>
@@ -101,7 +102,9 @@ export function TwoFactorSetup() {
 								</div>
 								<div className="flex-1">
 									<p className="font-bold">La 2FA est activée</p>
-									<p className="text-sm text-muted-foreground">Votre compte est protégé par un code temporaire.</p>
+									<p className="text-sm text-muted-foreground">
+										Votre compte est protégé par un code temporaire.
+									</p>
 								</div>
 								<Button variant="outline" size="sm" onClick={() => setStep("verify")}>
 									Désactiver
@@ -114,10 +117,21 @@ export function TwoFactorSetup() {
 								</div>
 								<div className="flex-1">
 									<p className="font-bold">La 2FA n'est pas activée</p>
-									<p className="text-sm text-muted-foreground">Activez la 2FA pour mieux protéger votre compte.</p>
+									<p className="text-sm text-muted-foreground">
+										Activez la 2FA pour mieux protéger votre compte.
+									</p>
 								</div>
-								<Button variant="primary" size="sm" onClick={handleSetup} disabled={isLoading}>
+								<Button
-									{isLoading ? <Loader2 className="h-4 w-4 animate-spin" /> : "Configurer"}
+									variant="default"
+									size="sm"
+									onClick={handleSetup}
+									disabled={isLoading}
+								>
+									{isLoading ? (
+										<Loader2 className="h-4 w-4 animate-spin" />
+									) : (
+										"Configurer"
+									)}
 								</Button>
 							</>
 						)}
@@ -133,7 +147,8 @@ export function TwoFactorSetup() {
 				<CardHeader>
 					<CardTitle>Configurer la 2FA</CardTitle>
 					<CardDescription>
-						Scannez le QR Code ci-dessous avec votre application d'authentification (Google Authenticator, Authy, etc.).
+						Scannez le QR Code ci-dessous avec votre application d'authentification
+						(Google Authenticator, Authy, etc.).
 					</CardDescription>
 				</CardHeader>
 				<CardContent className="flex flex-col items-center gap-6">
@@ -143,13 +158,17 @@ export function TwoFactorSetup() {
 						</div>
 					)}
 					<div className="w-full space-y-2">
-						<p className="text-sm font-medium text-center">Ou entrez ce code manuellement :</p>
+						<p className="text-sm font-medium text-center">
+							Ou entrez ce code manuellement :
+						</p>
 						<code className="block p-2 bg-muted text-center rounded text-xs font-mono break-all">
 							{secret}
 						</code>
 					</div>
 					<div className="flex flex-col items-center gap-4 w-full border-t pt-6">
-						<p className="text-sm font-medium">Entrez le code à 6 chiffres pour confirmer :</p>
+						<p className="text-sm font-medium">
+							Entrez le code à 6 chiffres pour confirmer :
+						</p>
 						<InputOTP maxLength={6} value={otpValue} onChange={setOtpValue}>
 							<InputOTPGroup>
 								<InputOTPSlot index={0} />
@@ -166,9 +185,18 @@ export function TwoFactorSetup() {
 					</div>
 				</CardContent>
 				<CardFooter className="flex justify-between">
-					<Button variant="ghost" onClick={() => setStep("idle")}>Annuler</Button>
+					<Button variant="ghost" onClick={() => setStep("idle")}>
-					<Button onClick={handleEnable} disabled={otpValue.length !== 6 || isLoading}>
+						Annuler
-						{isLoading ? <Loader2 className="h-4 w-4 animate-spin" /> : "Activer la 2FA"}
+					</Button>
+					<Button
+						onClick={handleEnable}
+						disabled={otpValue.length !== 6 || isLoading}
+					>
+						{isLoading ? (
+							<Loader2 className="h-4 w-4 animate-spin" />
+						) : (
+							"Activer la 2FA"
+						)}
 					</Button>
 				</CardFooter>
 			</Card>
@@ -181,7 +209,8 @@ export function TwoFactorSetup() {
 				<CardHeader>
 					<CardTitle>Désactiver la 2FA</CardTitle>
 					<CardDescription>
-						Veuillez entrer le code de votre application pour désactiver la double authentification.
+						Veuillez entrer le code de votre application pour désactiver la double
+						authentification.
 					</CardDescription>
 				</CardHeader>
 				<CardContent className="flex flex-col items-center gap-6">
@@ -200,9 +229,19 @@ export function TwoFactorSetup() {
 					</InputOTP>
 				</CardContent>
 				<CardFooter className="flex justify-between">
-					<Button variant="ghost" onClick={() => setStep("idle")}>Annuler</Button>
+					<Button variant="ghost" onClick={() => setStep("idle")}>
-					<Button variant="destructive" onClick={handleDisable} disabled={otpValue.length !== 6 || isLoading}>
+						Annuler
-						{isLoading ? <Loader2 className="h-4 w-4 animate-spin" /> : "Confirmer la désactivation"}
+					</Button>
+					<Button
+						variant="destructive"
+						onClick={handleDisable}
+						disabled={otpValue.length !== 6 || isLoading}
+					>
+						{isLoading ? (
+							<Loader2 className="h-4 w-4 animate-spin" />
+						) : (
+							"Confirmer la désactivation"
+						)}
 					</Button>
 				</CardFooter>
 			</Card>

frontend/src/services/admin.service.ts

@@ -18,7 +18,10 @@ export const adminService = {
 		return response.data;
 	},
 
-	updateReportStatus: async (reportId: string, status: ReportStatus): Promise<void> => {
+	updateReportStatus: async (
+		reportId: string,
+		status: ReportStatus,
+	): Promise<void> => {
 		await api.patch(`/reports/${reportId}/status`, { status });
 	},
 

frontend/src/services/auth.service.ts

@@ -1,5 +1,9 @@
 import api from "@/lib/api";
-import type { LoginResponse, RegisterPayload, TwoFactorSetupResponse } from "@/types/auth";
+import type {
+	LoginResponse,
+	RegisterPayload,
+	TwoFactorSetupResponse,
+} from "@/types/auth";
 
 export const AuthService = {
 	async login(email: string, password: string): Promise<LoginResponse> {
@@ -31,7 +35,9 @@ export const AuthService = {
 	},
 
 	async setup2fa(): Promise<TwoFactorSetupResponse> {
-		const { data } = await api.post<TwoFactorSetupResponse>("/users/me/2fa/setup");
+		const { data } = await api.post<TwoFactorSetupResponse>(
+			"/users/me/2fa/setup",
+		);
 		return data;
 	},