26 Commits

Author SHA1 Message Date
Mathis HERRIOT
fa673d0f80 chore: bump version to 1.5.6
All checks were successful
CI/CD Pipeline / Valider backend (push) Successful in 1m39s
CI/CD Pipeline / Valider frontend (push) Successful in 1m45s
CI/CD Pipeline / Valider documentation (push) Successful in 1m48s
CI/CD Pipeline / Déploiement en Production (push) Successful in 1m32s
2026-01-28 15:39:56 +01:00
Mathis HERRIOT
8df6d15b19 refactor: update content card and list layout for better responsiveness
- Removed unused aspect-video class from content card layout.
- Improved content list layout by switching to a responsive grid system.
2026-01-28 15:39:44 +01:00
Mathis HERRIOT
0144421f03 chore: bump version to 1.5.5
All checks were successful
CI/CD Pipeline / Valider backend (push) Successful in 1m38s
CI/CD Pipeline / Valider frontend (push) Successful in 1m43s
CI/CD Pipeline / Valider documentation (push) Successful in 1m47s
CI/CD Pipeline / Déploiement en Production (push) Successful in 1m36s
2026-01-28 15:00:02 +01:00
Mathis HERRIOT
df9a6c6f36 refactor: update test mocks to use addOutputOptions for consistency
- Replaced `outputOptions` with `addOutputOptions` in media service spec test to align with updated FFmpeg strategy.
2026-01-28 14:59:40 +01:00
Mathis HERRIOT
15426a9e18 chore: bump version to 1.5.4
Some checks failed
CI/CD Pipeline / Valider backend (push) Failing after 1m10s
CI/CD Pipeline / Valider frontend (push) Successful in 1m41s
CI/CD Pipeline / Valider documentation (push) Successful in 1m45s
CI/CD Pipeline / Déploiement en Production (push) Has been skipped
2026-01-28 14:45:48 +01:00
Mathis HERRIOT
a28844e9b7 refactor: replace outputOptions with addOutputOptions in video processor strategy
- Updated FFmpeg command to use `addOutputOptions` for improved readability and consistency.
2026-01-28 14:45:41 +01:00
Mathis HERRIOT
ae916931f6 chore: bump version to 1.5.3
All checks were successful
CI/CD Pipeline / Valider backend (push) Successful in 1m39s
CI/CD Pipeline / Valider frontend (push) Successful in 1m43s
CI/CD Pipeline / Valider documentation (push) Successful in 1m47s
CI/CD Pipeline / Déploiement en Production (push) Successful in 1m33s
2026-01-28 14:39:43 +01:00
Mathis HERRIOT
e4dc5dd10b chore: simplify FFmpeg installation in Dockerfile
- Replaced custom FFmpeg build process with `apk add --no-cache ffmpeg` for reduced complexity and faster builds.
2026-01-28 14:39:33 +01:00
Mathis HERRIOT
878c35cbcd chore: bump version to 1.5.2
Some checks failed
CI/CD Pipeline / Valider backend (push) Successful in 1m35s
CI/CD Pipeline / Valider documentation (push) Successful in 1m42s
CI/CD Pipeline / Valider frontend (push) Successful in 1m49s
CI/CD Pipeline / Déploiement en Production (push) Failing after 18s
2026-01-28 14:32:57 +01:00
Mathis HERRIOT
8cf0036248 chore: update Dockerfile to fix FFmpeg download URL
- Replaced the FFmpeg URL with a version that supports redirection handling using `-L` flag.
2026-01-28 14:32:52 +01:00
Mathis HERRIOT
c389024f59 chore: bump version to 1.5.1
Some checks failed
CI/CD Pipeline / Valider backend (push) Successful in 1m38s
CI/CD Pipeline / Valider documentation (push) Successful in 1m46s
CI/CD Pipeline / Valider frontend (push) Successful in 1m47s
CI/CD Pipeline / Déploiement en Production (push) Failing after 13s
2026-01-28 14:27:43 +01:00
Mathis HERRIOT
bbdbe58af5 feat: add FFmpeg installation to Dockerfile for media processing
- Configured Dockerfile to install FFmpeg with support for various codecs and libraries.
- Optimized build process by cleaning up temporary files post-installation.
2026-01-28 14:27:29 +01:00
Mathis HERRIOT
5951e41eb5 chore: bump version to 1.5.0
All checks were successful
CI/CD Pipeline / Valider backend (push) Successful in 1m38s
CI/CD Pipeline / Valider frontend (push) Successful in 1m44s
CI/CD Pipeline / Valider documentation (push) Successful in 1m47s
CI/CD Pipeline / Déploiement en Production (push) Successful in 1m35s
2026-01-28 14:14:42 +01:00
Mathis HERRIOT
7442236e8d feat: add 'video' as a new value to content_type enum
- Updated backend migrations to include 'video' in the `content_type` enum.
- Synced migration metadata files to reflect the schema changes.
2026-01-28 14:14:05 +01:00
Mathis HERRIOT
3ef7292287 feat: add captions support for video uploads
- Enhanced video previews with `<track>` element for captions.
2026-01-28 14:10:59 +01:00
Mathis HERRIOT
f1a571196d feat: add video upload feature with support for validation and processing
- Introduced "video" as a new content type across backend and frontend.
- Updated validation schemas and MIME-type handling for video files.
- Implemented file size limits for videos (10 MB max) in configuration.
- Enhanced upload flow with auto-detection of file types (image, GIF, video).
- Expanded media processing to handle video files and convert them to WebM format.
2026-01-28 14:07:00 +01:00
Mathis HERRIOT
f4cd20a010 docs: add PlantUML backend architecture diagram
- Introduced a detailed PlantUML diagram illustrating backend modules, services, controllers, and key relationships.
- Enhanced documentation with visual representation of system architecture for improved understanding.
2026-01-28 14:00:46 +01:00
Mathis HERRIOT
988eacc281 docs: remove detailed table of contents from project dossier
- Simplified the document by removing the exhaustive table of contents to enhance readability.
- Maintained key subsections and updated in-text references for smooth navigation.
2026-01-28 13:19:49 +01:00
Mathis HERRIOT
329a150ff8 docs: refine and expand project dossier content
- Improved structure with updated headings and enhanced indentation for clarity.
- Added new sections: "Analyse et Conception," personas, user stories, and advanced diagrams (use cases, sequence flows).
- Expanded content on backend architecture, security features, and compliance (RGPD, ANSSI).
- Updated annexes with additional resources and technical glossary entries.
2026-01-28 13:01:10 +01:00
Mathis HERRIOT
4372f75025 docs: remove POO class diagram from annex in project dossier
- Deleted the class diagram representing backend entities to simplify and declutter the annex section.
2026-01-28 12:36:43 +01:00
Mathis HERRIOT
4fa163b542 docs: improve and expand project dossier structure and content
- Refined document structure with clearer heading hierarchy and indentation.
- Enhanced functional and non-functional specifications with additional subsections and technical details.
- Added comprehensive descriptions for security (PGP, ML-KEM), accessibility (A11Y), and observability improvements.
- Introduced new annexes for backend/frontend technical dossiers, live demonstrations, and advanced workflows.
2026-01-27 14:27:42 +01:00
Mathis HERRIOT
7f0749808e docs: expand project dossier with advanced CRUD flows and architecture details
- Added comprehensive sections on business workflows, CRUD operations, and security features.
- Enhanced documentation with detailed data validation, media handling, and lifecycle management.
- Incorporated diagrams for authentication, media upload, content moderation, and caching strategies.
- Reorganized and updated sections to align with newly introduced content and flow improvements.
2026-01-27 13:31:08 +01:00
Mathis HERRIOT
bcbc93d6a3 docs: restructure and enhance project dossier
- Consolidated and reordered headings for clarity and coherence.
- Updated content under functional and non-functional specifications for better readability.
- Improved sections on security, observability, and cryptography.
- Added new subsections on Green IT, accessibility, and regulatory compliance (RGPD).
- Optimized technical glossary for precision and expanded explanations.
2026-01-27 13:22:20 +01:00
Mathis HERRIOT
89587d6abc docs: update project dossier with additional sections and enhancements
- Added detailed objectives, technical overview, and regulatory compliance for "Memegoat".
- Expanded functional and non-functional specifications with rich examples and new subsections.
- Enhanced documentation with accessibility, security, UX, and Green IT strategies.
- Revised and restructured content for coherence and clarity.
2026-01-27 12:50:36 +01:00
Mathis HERRIOT
3347d693ce docs: add project dossier with detailed specifications and technical overview
- Introduced `dossier-de-projet-cda.md` outlining project scope, objectives, and covered competencies.
- Included functional and non-functional specifications, technical stack, and infrastructure details.
- Added sections on backend architecture, frontend implementation, security measures, and deployments.
2026-01-26 14:19:05 +01:00
Mathis HERRIOT
5048b4813c chore(ci): update workflow trigger to only act on tags 2026-01-21 16:36:34 +01:00
21 changed files with 3335 additions and 37 deletions

View File

@@ -4,11 +4,8 @@ name: CI/CD Pipeline
on: on:
push: push:
branches:
- '**'
tags: tags:
- 'v*' - 'v*'
pull_request:
jobs: jobs:
validate: validate:

756
backend.plantuml Normal file
View File

@@ -0,0 +1,756 @@
@startuml
!theme plain
top to bottom direction
skinparam linetype ortho
class AdminController {
constructor(adminService: AdminService):
getStats(): Promise<{users: number, contents: numbe…
}
class AdminModule
class AdminService {
constructor(usersRepository: UsersRepository, contentsRepository: ContentsRepository, categoriesRepository: CategoriesRepository):
getStats(): Promise<{users: number, contents: numbe…
}
class AllExceptionsFilter {
logger: Logger
catch(exception: unknown, host: ArgumentsHost): void
}
class ApiKeysController {
constructor(apiKeysService: ApiKeysService):
create(req: AuthenticatedRequest, createApiKeyDto: CreateApiKeyDto): Promise<{name: string, key: string, exp…
findAll(req: AuthenticatedRequest): Promise<any>
revoke(req: AuthenticatedRequest, id: string): Promise<any>
}
class ApiKeysModule
class ApiKeysRepository {
constructor(databaseService: DatabaseService):
create(data: {userId: string; name: string; prefix: string; keyHash: string; expiresAt?: Date}): Promise<any>
findAll(userId: string): Promise<any>
revoke(userId: string, keyId: string): Promise<any>
findActiveByKeyHash(keyHash: string): Promise<any>
updateLastUsed(id: string): Promise<any>
}
class ApiKeysService {
constructor(apiKeysRepository: ApiKeysRepository, hashingService: HashingService):
logger: Logger
create(userId: string, name: string, expiresAt?: Date): Promise<{name: string, key: string, exp…
findAll(userId: string): Promise<any>
revoke(userId: string, keyId: string): Promise<any>
validateKey(key: string): Promise<any>
}
class AppController {
constructor(appService: AppService):
getHello(): string
}
class AppModule {
configure(consumer: MiddlewareConsumer): void
}
class AppService {
getHello(): string
}
class AuditLogInDb
class AuthController {
constructor(authService: AuthService, bootstrapService: BootstrapService, configService: ConfigService):
register(registerDto: RegisterDto): Promise<{message: string, userId: any}>
login(loginDto: LoginDto, userAgent: string, req: Request, res: Response): Promise<Response<any, Record<string, an…
verifyTwoFactor(verify2faDto: Verify2faDto, userAgent: string, req: Request, res: Response): Promise<Response<any, Record<string, an…
refresh(req: Request, res: Response): Promise<Response<any, Record<string, an…
logout(req: Request, res: Response): Promise<Response<any, Record<string, an…
bootstrapAdmin(token: string, username: string): Promise<{message: string}>
}
class AuthGuard {
constructor(jwtService: JwtService, configService: ConfigService):
canActivate(context: ExecutionContext): Promise<boolean>
}
class AuthModule
class AuthService {
constructor(usersService: UsersService, hashingService: HashingService, jwtService: JwtService, sessionsService: SessionsService, configService: ConfigService):
logger: Logger
generateTwoFactorSecret(userId: string): Promise<{secret: string, qrCodeDataUrl:…
enableTwoFactor(userId: string, token: string): Promise<{message: string}>
disableTwoFactor(userId: string, token: string): Promise<{message: string}>
register(dto: RegisterDto): Promise<{message: string, userId: any}>
login(dto: LoginDto, userAgent?: string, ip?: string): Promise<{message: string, requires2FA: …
verifyTwoFactorLogin(userId: string, token: string, userAgent?: string, ip?: string): Promise<{message: string, access_token:…
refresh(refreshToken: string): Promise<{access_token: string, refresh_…
logout(): Promise<{message: string}>
}
class AuthenticatedRequest {
user: {sub: string, username: string}
}
class BootstrapService {
constructor(rbacService: RbacService, usersService: UsersService, configService: ConfigService):
logger: Logger
bootstrapToken: string | null
onApplicationBootstrap(): Promise<void>
generateBootstrapToken(): void
consumeToken(token: string, username: string): Promise<{message: string}>
}
class CategoriesController {
constructor(categoriesService: CategoriesService):
findAll(): Promise<any>
findOne(id: string): Promise<any>
create(createCategoryDto: CreateCategoryDto): Promise<any>
update(id: string, updateCategoryDto: UpdateCategoryDto): Promise<any>
remove(id: string): Promise<any>
}
class CategoriesModule
class CategoriesRepository {
constructor(databaseService: DatabaseService):
findAll(): Promise<any>
countAll(): Promise<number>
findOne(id: string): Promise<any>
create(data: CreateCategoryDto & {slug: string}): Promise<any>
update(id: string, data: UpdateCategoryDto & {slug?: string; updatedAt: Date}): Promise<any>
remove(id: string): Promise<any>
}
class CategoriesService {
constructor(categoriesRepository: CategoriesRepository, cacheManager: Cache):
logger: Logger
clearCategoriesCache(): Promise<void>
findAll(): Promise<any>
findOne(id: string): Promise<any>
create(data: CreateCategoryDto): Promise<any>
update(id: string, data: UpdateCategoryDto): Promise<any>
remove(id: string): Promise<any>
}
class CategoryInDb
class ClamScanner {
scanStream(stream: Readable): Promise<{isInfected: boolean, viruses: …
}
class CommonModule
class ContentInDb
class ContentType {
MEME:
GIF:
}
class ContentsController {
constructor(contentsService: ContentsService):
create(req: AuthenticatedRequest, createContentDto: CreateContentDto): Promise<any>
getUploadUrl(req: AuthenticatedRequest, fileName: string): Promise<{url: string, key: string}>
upload(req: AuthenticatedRequest, file: Express.Multer.File, uploadContentDto: UploadContentDto): Promise<any>
explore(req: AuthenticatedRequest, limit: number, offset: number, sort?: "trend" | "recent", tag?: string, category?: string, author?: string): Promise<{data: any, totalCount: any}>
trends(req: AuthenticatedRequest, limit: number, offset: number): Promise<{data: any, totalCount: any}>
recent(req: AuthenticatedRequest, limit: number, offset: number): Promise<{data: any, totalCount: any}>
findOne(idOrSlug: string, req: AuthenticatedRequest, res: Response): Promise<Response<any, Record<string, an…
incrementViews(id: string): Promise<void>
incrementUsage(id: string): Promise<void>
update(id: string, req: AuthenticatedRequest, updateContentDto: any): Promise<any>
remove(id: string, req: AuthenticatedRequest): Promise<any>
removeAdmin(id: string): Promise<any>
updateAdmin(id: string, updateContentDto: any): Promise<any>
}
class ContentsModule
class ContentsRepository {
constructor(databaseService: DatabaseService):
findAll(options: FindAllOptions): Promise<any>
create(data: NewContentInDb & {userId: string}, tagNames?: string[]): Promise<any>
findOne(idOrSlug: string, userId?: string): Promise<any>
count(options: {tag?: string; category?: string; author?: string; query?: string; favoritesOnly?: boolean; userId?: string}): Promise<number>
incrementViews(id: string): Promise<void>
incrementUsage(id: string): Promise<void>
softDelete(id: string, userId: string): Promise<any>
softDeleteAdmin(id: string): Promise<any>
update(id: string, data: Partial<typeof contents.$inferInsert>): Promise<any>
findBySlug(slug: string): Promise<any>
purgeSoftDeleted(before: Date): Promise<any>
}
class ContentsService {
constructor(contentsRepository: ContentsRepository, s3Service: IStorageService, mediaService: IMediaService, configService: ConfigService, cacheManager: Cache):
logger: Logger
clearContentsCache(): Promise<void>
getUploadUrl(userId: string, fileName: string): Promise<{url: string, key: string}>
uploadAndProcess(userId: string, file: Express.Multer.File, data: UploadContentDto): Promise<any>
findAll(options: {limit: number; offset: number; sortBy?: "trend" | "recent"; tag?: string; category?: string; author?: string; query?: string; favoritesOnly?: boolean; userId?: string}): Promise<{data: any, totalCount: any}>
create(userId: string, data: CreateContentDto): Promise<any>
incrementViews(id: string): Promise<void>
incrementUsage(id: string): Promise<void>
remove(id: string, userId: string): Promise<any>
removeAdmin(id: string): Promise<any>
updateAdmin(id: string, data: any): Promise<any>
update(id: string, userId: string, data: any): Promise<any>
findOne(idOrSlug: string, userId?: string): Promise<any>
generateBotHtml(content: {title: string; storageKey: string}): string
generateSlug(text: string): string
ensureUniqueSlug(title: string): Promise<string>
}
class CrawlerDetectionMiddleware {
logger: Logger
SUSPICIOUS_PATTERNS: RegExp[]
BOT_USER_AGENTS: RegExp[]
use(req: Request, res: Response, next: NextFunction): void
}
class CreateApiKeyDto {
name: string
expiresAt: string
}
class CreateCategoryDto {
name: string
description: string
iconUrl: string
}
class CreateContentDto {
type: "meme" | "gif"
title: string
storageKey: string
mimeType: string
fileSize: number
categoryId: string
tags: string[]
}
class CreateReportDto {
contentId: string
tagId: string
reason: "inappropriate" | "spam" | "copyright" …
description: string
}
class CryptoModule
class CryptoService {
constructor(hashingService: HashingService, jwtService: JwtService, encryptionService: EncryptionService, postQuantumService: PostQuantumService):
hashEmail(email: string): Promise<string>
hashIp(ip: string): Promise<string>
getPgpEncryptionKey(): string
hashPassword(password: string): Promise<string>
verifyPassword(password: string, hash: string): Promise<boolean>
generateJwt(payload: jose.JWTPayload, expiresIn?: string): Promise<string>
verifyJwt(token: string): Promise<T>
encryptContent(content: string): Promise<string>
decryptContent(jwe: string): Promise<string>
signContent(content: string): Promise<string>
verifyContentSignature(jws: string): Promise<string>
generatePostQuantumKeyPair(): {publicKey: Uint8Array<ArrayBufferLike>…
encapsulate(publicKey: Uint8Array): {cipherText: Uint8Array, sharedSecret: …
decapsulate(cipherText: Uint8Array, secretKey: Uint8Array): Uint8Array<ArrayBufferLike>
}
class DatabaseModule
class DatabaseService {
constructor(configService: ConfigService):
logger: Logger
pool: Pool
db: ReturnType<typeof drizzle>
onModuleInit(): Promise<void>
onModuleDestroy(): Promise<void>
getDatabaseConnectionString(): string
}
class EncryptionService {
constructor(configService: ConfigService):
logger: Logger
jwtSecret: Uint8Array
encryptionKey: Uint8Array
encryptContent(content: string): Promise<string>
decryptContent(jwe: string): Promise<string>
signContent(content: string): Promise<string>
verifyContentSignature(jws: string): Promise<string>
getPgpEncryptionKey(): string
}
class Env
class FavoriteInDb
class FavoritesController {
constructor(favoritesService: FavoritesService):
add(req: AuthenticatedRequest, contentId: string): Promise<any>
remove(req: AuthenticatedRequest, contentId: string): Promise<any>
list(req: AuthenticatedRequest, limit: number, offset: number): Promise<any>
}
class FavoritesModule
class FavoritesRepository {
constructor(databaseService: DatabaseService):
findContentById(contentId: string): Promise<any>
add(userId: string, contentId: string): Promise<any>
remove(userId: string, contentId: string): Promise<any>
findByUserId(userId: string, limit: number, offset: number): Promise<any>
}
class FavoritesService {
constructor(favoritesRepository: FavoritesRepository):
logger: Logger
addFavorite(userId: string, contentId: string): Promise<any>
removeFavorite(userId: string, contentId: string): Promise<any>
getUserFavorites(userId: string, limit: number, offset: number): Promise<any>
}
class FindAllOptions {
limit: number
offset: number
sortBy: "trend" | "recent"
tag: string
category: string
author: string
query: string
favoritesOnly: boolean
userId: string
}
class HTTPLoggerMiddleware {
logger: Logger
use(request: Request, response: Response, next: NextFunction): void
}
class HashingService {
hashEmail(email: string): Promise<string>
hashIp(ip: string): Promise<string>
hashSha256(text: string): Promise<string>
hashPassword(password: string): Promise<string>
verifyPassword(password: string, hash: string): Promise<boolean>
}
class HealthController {
constructor(databaseService: DatabaseService, cacheManager: Cache):
check(): Promise<any>
}
class IMailService {
sendEmailValidation(email: string, token: string): Promise<void>
sendPasswordReset(email: string, token: string): Promise<void>
}
class IMediaProcessorStrategy {
canHandle(mimeType: string): boolean
process(buffer: Buffer, options?: Record<string, unknown>): Promise<MediaProcessingResult>
}
class IMediaService {
scanFile(buffer: Buffer, filename: string): Promise<ScanResult>
processImage(buffer: Buffer, format?: "webp" | "avif", resize?: {width?: number; height?: number}): Promise<MediaProcessingResult>
processVideo(buffer: Buffer, format?: "webm" | "av1"): Promise<MediaProcessingResult>
}
class IStorageService {
uploadFile(fileName: string, file: Buffer, mimeType: string, metaData?: Record<string, string>, bucketName?: string): Promise<string>
getFile(fileName: string, bucketName?: string): Promise<Readable>
getFileUrl(fileName: string, expiry?: number, bucketName?: string): Promise<string>
getUploadUrl(fileName: string, expiry?: number, bucketName?: string): Promise<string>
deleteFile(fileName: string, bucketName?: string): Promise<void>
getFileInfo(fileName: string, bucketName?: string): Promise<unknown>
moveFile(sourceFileName: string, destinationFileName: string, sourceBucketName?: string, destinationBucketName?: string): Promise<string>
getPublicUrl(storageKey: string): string
}
class ImageProcessorStrategy {
logger: Logger
canHandle(mimeType: string): boolean
process(buffer: Buffer, options?: {format: "webp" | "avif"; resize?: {width?: number; height?: number}}): Promise<MediaProcessingResult>
}
class JwtService {
constructor(configService: ConfigService):
logger: Logger
jwtSecret: Uint8Array
generateJwt(payload: jose.JWTPayload, expiresIn?: string): Promise<string>
verifyJwt(token: string): Promise<T>
}
class LoginDto {
email: string
password: string
}
class MailModule
class MailService {
constructor(mailerService: MailerService, configService: ConfigService):
logger: Logger
domain: string
sendEmailValidation(email: string, token: string): Promise<void>
sendPasswordReset(email: string, token: string): Promise<void>
}
class MediaController {
constructor(s3Service: S3Service):
logger: Logger
getFile(path: string, res: Response): Promise<void>
}
class MediaModule
class MediaProcessingResult {
buffer: Buffer
mimeType: string
extension: string
width: number
height: number
size: number
}
class MediaProcessingResult {
buffer: Buffer
mimeType: string
extension: string
width: number
height: number
size: number
}
class MediaService {
constructor(configService: ConfigService, imageProcessor: ImageProcessorStrategy, videoProcessor: VideoProcessorStrategy):
logger: Logger
clamscan: ClamScanner | null
isClamAvInitialized: boolean
initClamScan(): Promise<void>
scanFile(buffer: Buffer, filename: string): Promise<ScanResult>
processImage(buffer: Buffer, format?: "webp" | "avif", resize?: {width?: number; height?: number}): Promise<MediaProcessingResult>
processVideo(buffer: Buffer, format?: "webm" | "av1"): Promise<MediaProcessingResult>
}
class NewAuditLogInDb
class NewCategoryInDb
class NewContentInDb
class NewFavoriteInDb
class NewReportInDb
class NewTagInDb
class NewUserInDb
class OptionalAuthGuard {
constructor(jwtService: JwtService, configService: ConfigService):
canActivate(context: ExecutionContext): Promise<boolean>
}
class PostQuantumService {
generatePostQuantumKeyPair(): {publicKey: Uint8Array<ArrayBufferLike>…
encapsulate(publicKey: Uint8Array): {cipherText: Uint8Array, sharedSecret: …
decapsulate(cipherText: Uint8Array, secretKey: Uint8Array): Uint8Array<ArrayBufferLike>
}
class PurgeService {
constructor(sessionsRepository: SessionsRepository, reportsRepository: ReportsRepository, usersRepository: UsersRepository, contentsRepository: ContentsRepository):
logger: Logger
purgeExpiredData(): Promise<void>
}
class RbacRepository {
constructor(databaseService: DatabaseService):
findRolesByUserId(userId: string): Promise<any>
findPermissionsByUserId(userId: string): Promise<any[]>
countRoles(): Promise<number>
countAdmins(): Promise<number>
createRole(name: string, slug: string, description?: string): Promise<any>
assignRole(userId: string, roleSlug: string): Promise<any>
}
class RbacService {
constructor(rbacRepository: RbacRepository):
logger: Logger
onApplicationBootstrap(): Promise<void>
seedRoles(): Promise<void>
getUserRoles(userId: string): Promise<any>
getUserPermissions(userId: string): Promise<any[]>
countAdmins(): Promise<number>
assignRoleToUser(userId: string, roleSlug: string): Promise<any>
}
class RefreshDto {
refresh_token: string
}
class RegisterDto {
username: string
displayName: string
email: string
password: string
}
class ReportInDb
class ReportReason {
INAPPROPRIATE:
SPAM:
COPYRIGHT:
OTHER:
}
class ReportStatus {
PENDING:
REVIEWED:
RESOLVED:
DISMISSED:
}
class ReportsController {
constructor(reportsService: ReportsService):
create(req: AuthenticatedRequest, createReportDto: CreateReportDto): Promise<any>
findAll(limit: number, offset: number): Promise<any>
updateStatus(id: string, updateReportStatusDto: UpdateReportStatusDto): Promise<any>
}
class ReportsModule
class ReportsRepository {
constructor(databaseService: DatabaseService):
create(data: {reporterId: string; contentId?: string; tagId?: string; reason: "inappropriate" | "spam" | "copyright" | "other"; description?: string}): Promise<any>
findAll(limit: number, offset: number): Promise<any>
updateStatus(id: string, status: "pending" | "reviewed" | "resolved" | "dismissed"): Promise<any>
purgeObsolete(now: Date): Promise<any>
}
class ReportsService {
constructor(reportsRepository: ReportsRepository):
logger: Logger
create(reporterId: string, data: CreateReportDto): Promise<any>
findAll(limit: number, offset: number): Promise<any>
updateStatus(id: string, status: "pending" | "reviewed" | "resolved" | "dismissed"): Promise<any>
}
class RequestWithUser {
user: {sub?: string, username?: string, id?: …
}
class RolesGuard {
constructor(reflector: Reflector, rbacService: RbacService):
canActivate(context: ExecutionContext): Promise<boolean>
}
class S3Module
class S3Service {
constructor(configService: ConfigService):
logger: Logger
minioClient: Minio.Client
bucketName: string
onModuleInit(): Promise<void>
ensureBucketExists(bucketName: string): Promise<void>
uploadFile(fileName: string, file: Buffer, mimeType: string, metaData?: Minio.ItemBucketMetadata, bucketName?: string): Promise<string>
getFile(fileName: string, bucketName?: string): Promise<stream.Readable>
getFileUrl(fileName: string, expiry?: number, bucketName?: string): Promise<string>
getUploadUrl(fileName: string, expiry?: number, bucketName?: string): Promise<string>
deleteFile(fileName: string, bucketName?: string): Promise<void>
getFileInfo(fileName: string, bucketName?: string): Promise<BucketItemStat>
moveFile(sourceFileName: string, destinationFileName: string, sourceBucketName?: string, destinationBucketName?: string): Promise<string>
getPublicUrl(storageKey: string): string
}
class ScanResult {
isInfected: boolean
virusName: string
}
class ScanResult {
isInfected: boolean
virusName: string
}
class SessionData {
accessToken: string
refreshToken: string
userId: string
}
class SessionsModule
class SessionsRepository {
constructor(databaseService: DatabaseService):
create(data: {userId: string; refreshToken: string; userAgent?: string; ipHash?: string | null; expiresAt: Date}): Promise<any>
findValidByRefreshToken(refreshToken: string): Promise<any>
update(sessionId: string, data: Record<string, unknown>): Promise<any>
revoke(sessionId: string): Promise<void>
revokeAllByUserId(userId: string): Promise<void>
purgeExpired(now: Date): Promise<any>
}
class SessionsService {
constructor(sessionsRepository: SessionsRepository, hashingService: HashingService, jwtService: JwtService):
createSession(userId: string, userAgent?: string, ip?: string): Promise<any>
refreshSession(oldRefreshToken: string): Promise<any>
revokeSession(sessionId: string): Promise<void>
revokeAllUserSessions(userId: string): Promise<void>
}
class TagInDb
class TagsController {
constructor(tagsService: TagsService):
findAll(limit: number, offset: number, query?: string, sort?: "popular" | "recent"): Promise<any>
}
class TagsModule
class TagsRepository {
constructor(databaseService: DatabaseService):
findAll(options: {limit: number; offset: number; query?: string; sortBy?: "popular" | "recent"}): Promise<any>
}
class TagsService {
constructor(tagsRepository: TagsRepository):
logger: Logger
findAll(options: {limit: number; offset: number; query?: string; sortBy?: "popular" | "recent"}): Promise<any>
}
class UpdateCategoryDto
class UpdateConsentDto {
termsVersion: string
privacyVersion: string
}
class UpdateReportStatusDto {
status: "pending" | "reviewed" | "resolved" | "…
}
class UpdateUserDto {
displayName: string
bio: string
avatarUrl: string
status: "active" | "verification" | "suspended"…
role: string
}
class UploadContentDto {
type: "meme" | "gif"
title: string
categoryId: string
tags: string[]
}
class UserInDb
class UsersController {
constructor(usersService: UsersService, authService: AuthService):
findAll(limit: number, offset: number): Promise<{data: any, totalCount: any}>
findPublicProfile(username: string): Promise<any>
findMe(req: AuthenticatedRequest): Promise<any>
exportMe(req: AuthenticatedRequest): Promise<null | {profile: any, contents:…
updateMe(req: AuthenticatedRequest, updateUserDto: UpdateUserDto): Promise<any>
updateAvatar(req: AuthenticatedRequest, file: Express.Multer.File): Promise<any>
updateConsent(req: AuthenticatedRequest, consentDto: UpdateConsentDto): Promise<any>
removeMe(req: AuthenticatedRequest): Promise<any>
removeAdmin(uuid: string): Promise<any>
updateAdmin(uuid: string, updateUserDto: UpdateUserDto): Promise<any>
setup2fa(req: AuthenticatedRequest): Promise<{secret: string, qrCodeDataUrl:…
enable2fa(req: AuthenticatedRequest, token: string): Promise<{message: string}>
disable2fa(req: AuthenticatedRequest, token: string): Promise<{message: string}>
}
class UsersModule
class UsersRepository {
constructor(databaseService: DatabaseService):
create(data: {username: string; email: string; passwordHash: string; emailHash: string}): Promise<any>
findByEmailHash(emailHash: string): Promise<any>
findOneWithPrivateData(uuid: string): Promise<any>
countAll(): Promise<number>
findAll(limit: number, offset: number): Promise<any>
findByUsername(username: string): Promise<any>
findOne(uuid: string): Promise<any>
update(uuid: string, data: Partial<typeof users.$inferInsert>): Promise<any>
getTwoFactorSecret(uuid: string): Promise<any>
getUserContents(uuid: string): Promise<any>
getUserFavorites(uuid: string): Promise<any>
softDeleteUserAndContents(uuid: string): Promise<any>
purgeDeleted(before: Date): Promise<any>
}
class UsersService {
constructor(usersRepository: UsersRepository, cacheManager: Cache, rbacService: RbacService, mediaService: IMediaService, s3Service: IStorageService):
logger: Logger
clearUserCache(username?: string): Promise<void>
create(data: {username: string; email: string; passwordHash: string; emailHash: string}): Promise<any>
findByEmailHash(emailHash: string): Promise<any>
findOneWithPrivateData(uuid: string): Promise<any>
findAll(limit: number, offset: number): Promise<{data: any, totalCount: any}>
findPublicProfile(username: string): Promise<any>
findOne(uuid: string): Promise<any>
update(uuid: string, data: UpdateUserDto): Promise<any>
updateAvatar(uuid: string, file: Express.Multer.File): Promise<any>
updateConsent(uuid: string, termsVersion: string, privacyVersion: string): Promise<any>
setTwoFactorSecret(uuid: string, secret: string): Promise<any>
toggleTwoFactor(uuid: string, enabled: boolean): Promise<any>
getTwoFactorSecret(uuid: string): Promise<string | null>
exportUserData(uuid: string): Promise<null | {profile: any, contents:…
remove(uuid: string): Promise<any>
}
class Verify2faDto {
userId: string
token: string
}
class VideoProcessorStrategy {
logger: Logger
canHandle(mimeType: string): boolean
process(buffer: Buffer, options?: {format: "webm" | "av1"}): Promise<MediaProcessingResult>
}
AdminController -[#595959,dashed]-> AdminService
AdminService -[#595959,dashed]-> CategoriesRepository
AdminService -[#595959,dashed]-> ContentsRepository
AdminService -[#595959,dashed]-> UsersRepository
AllExceptionsFilter -[#595959,dashed]-> RequestWithUser
ApiKeysController -[#595959,dashed]-> ApiKeysService
ApiKeysController -[#595959,dashed]-> AuthenticatedRequest
ApiKeysController -[#595959,dashed]-> CreateApiKeyDto
ApiKeysRepository -[#595959,dashed]-> DatabaseService
ApiKeysService -[#595959,dashed]-> ApiKeysRepository
ApiKeysService -[#595959,dashed]-> ApiKeysService
ApiKeysService -[#595959,dashed]-> HashingService
AppController -[#595959,dashed]-> AppService
AppModule -[#595959,dashed]-> CrawlerDetectionMiddleware
AppModule -[#595959,dashed]-> HTTPLoggerMiddleware
AuthController -[#595959,dashed]-> AuthService
AuthController -[#595959,dashed]-> BootstrapService
AuthController -[#595959,dashed]-> LoginDto
AuthController -[#595959,dashed]-> RegisterDto
AuthController -[#595959,dashed]-> SessionData
AuthController -[#595959,dashed]-> Verify2faDto
AuthGuard -[#595959,dashed]-> JwtService
AuthGuard -[#595959,dashed]-> SessionData
AuthService -[#595959,dashed]-> AuthService
AuthService -[#595959,dashed]-> HashingService
AuthService -[#595959,dashed]-> JwtService
AuthService -[#595959,dashed]-> LoginDto
AuthService -[#595959,dashed]-> RegisterDto
AuthService -[#595959,dashed]-> SessionsService
AuthService -[#595959,dashed]-> UsersService
BootstrapService -[#595959,dashed]-> BootstrapService
BootstrapService -[#595959,dashed]-> RbacService
BootstrapService -[#595959,dashed]-> UsersService
CategoriesController -[#595959,dashed]-> AuthGuard
CategoriesController -[#595959,dashed]-> CategoriesService
CategoriesController -[#595959,dashed]-> CreateCategoryDto
CategoriesController -[#595959,dashed]-> RolesGuard
CategoriesController -[#595959,dashed]-> UpdateCategoryDto
CategoriesRepository -[#595959,dashed]-> CreateCategoryDto
CategoriesRepository -[#595959,dashed]-> DatabaseService
CategoriesRepository -[#595959,dashed]-> UpdateCategoryDto
CategoriesService -[#595959,dashed]-> CategoriesRepository
CategoriesService -[#595959,dashed]-> CategoriesService
CategoriesService -[#595959,dashed]-> CreateCategoryDto
CategoriesService -[#595959,dashed]-> UpdateCategoryDto
ContentsController -[#595959,dashed]-> AuthGuard
ContentsController -[#595959,dashed]-> AuthenticatedRequest
ContentsController -[#595959,dashed]-> ContentsService
ContentsController -[#595959,dashed]-> CreateContentDto
ContentsController -[#595959,dashed]-> OptionalAuthGuard
ContentsController -[#595959,dashed]-> RolesGuard
ContentsController -[#595959,dashed]-> UploadContentDto
ContentsRepository -[#595959,dashed]-> DatabaseService
ContentsRepository -[#595959,dashed]-> FindAllOptions
ContentsRepository -[#595959,dashed]-> NewContentInDb
ContentsService -[#595959,dashed]-> ContentsRepository
ContentsService -[#595959,dashed]-> ContentsService
ContentsService -[#595959,dashed]-> CreateContentDto
ContentsService -[#595959,dashed]-> IMediaService
ContentsService -[#595959,dashed]-> IStorageService
ContentsService -[#595959,dashed]-> MediaProcessingResult
ContentsService -[#595959,dashed]-> MediaService
ContentsService -[#595959,dashed]-> S3Service
ContentsService -[#595959,dashed]-> UploadContentDto
CryptoService -[#595959,dashed]-> EncryptionService
CryptoService -[#595959,dashed]-> HashingService
CryptoService -[#595959,dashed]-> JwtService
CryptoService -[#595959,dashed]-> PostQuantumService
DatabaseService -[#595959,dashed]-> DatabaseService
EncryptionService -[#595959,dashed]-> EncryptionService
FavoritesController -[#595959,dashed]-> AuthenticatedRequest
FavoritesController -[#595959,dashed]-> FavoritesService
FavoritesRepository -[#595959,dashed]-> DatabaseService
FavoritesService -[#595959,dashed]-> FavoritesRepository
FavoritesService -[#595959,dashed]-> FavoritesService
HealthController -[#595959,dashed]-> DatabaseService
IMediaProcessorStrategy -[#595959,dashed]-> MediaProcessingResult
IMediaService -[#595959,dashed]-> MediaProcessingResult
IMediaService -[#595959,dashed]-> ScanResult
ImageProcessorStrategy -[#008200,dashed]-^ IMediaProcessorStrategy
ImageProcessorStrategy -[#595959,dashed]-> ImageProcessorStrategy
ImageProcessorStrategy -[#595959,dashed]-> MediaProcessingResult
JwtService -[#595959,dashed]-> JwtService
MailService -[#008200,dashed]-^ IMailService
MailService -[#595959,dashed]-> MailService
MediaController -[#595959,dashed]-> MediaController
MediaController -[#595959,dashed]-> S3Service
MediaService -[#595959,dashed]-> ClamScanner
MediaService -[#008200,dashed]-^ IMediaService
MediaService -[#595959,dashed]-> ImageProcessorStrategy
MediaService -[#595959,dashed]-> MediaProcessingResult
MediaService -[#595959,dashed]-> MediaService
MediaService -[#595959,dashed]-> ScanResult
MediaService -[#595959,dashed]-> VideoProcessorStrategy
OptionalAuthGuard -[#595959,dashed]-> JwtService
OptionalAuthGuard -[#595959,dashed]-> SessionData
PurgeService -[#595959,dashed]-> ContentsRepository
PurgeService -[#595959,dashed]-> PurgeService
PurgeService -[#595959,dashed]-> ReportsRepository
PurgeService -[#595959,dashed]-> SessionsRepository
PurgeService -[#595959,dashed]-> UsersRepository
RbacRepository -[#595959,dashed]-> DatabaseService
RbacService -[#595959,dashed]-> RbacRepository
RbacService -[#595959,dashed]-> RbacService
ReportsController -[#595959,dashed]-> AuthGuard
ReportsController -[#595959,dashed]-> AuthenticatedRequest
ReportsController -[#595959,dashed]-> CreateReportDto
ReportsController -[#595959,dashed]-> ReportsService
ReportsController -[#595959,dashed]-> RolesGuard
ReportsController -[#595959,dashed]-> UpdateReportStatusDto
ReportsRepository -[#595959,dashed]-> DatabaseService
ReportsService -[#595959,dashed]-> CreateReportDto
ReportsService -[#595959,dashed]-> ReportsRepository
ReportsService -[#595959,dashed]-> ReportsService
RolesGuard -[#595959,dashed]-> RbacService
S3Service -[#008200,dashed]-^ IStorageService
S3Service -[#595959,dashed]-> S3Service
SessionsRepository -[#595959,dashed]-> DatabaseService
SessionsService -[#595959,dashed]-> HashingService
SessionsService -[#595959,dashed]-> JwtService
SessionsService -[#595959,dashed]-> SessionsRepository
TagsController -[#595959,dashed]-> TagsService
TagsRepository -[#595959,dashed]-> DatabaseService
TagsService -[#595959,dashed]-> TagsRepository
TagsService -[#595959,dashed]-> TagsService
UsersController -[#595959,dashed]-> AuthGuard
UsersController -[#595959,dashed]-> AuthService
UsersController -[#595959,dashed]-> AuthenticatedRequest
UsersController -[#595959,dashed]-> RolesGuard
UsersController -[#595959,dashed]-> UpdateConsentDto
UsersController -[#595959,dashed]-> UpdateUserDto
UsersController -[#595959,dashed]-> UsersService
UsersRepository -[#595959,dashed]-> DatabaseService
UsersService -[#595959,dashed]-> IMediaService
UsersService -[#595959,dashed]-> IStorageService
UsersService -[#595959,dashed]-> MediaService
UsersService -[#595959,dashed]-> RbacService
UsersService -[#595959,dashed]-> S3Service
UsersService -[#595959,dashed]-> UpdateUserDto
UsersService -[#595959,dashed]-> UsersRepository
UsersService -[#595959,dashed]-> UsersService
VideoProcessorStrategy -[#008200,dashed]-^ IMediaProcessorStrategy
VideoProcessorStrategy -[#595959,dashed]-> MediaProcessingResult
VideoProcessorStrategy -[#595959,dashed]-> VideoProcessorStrategy
@enduml

View File

@@ -0,0 +1 @@
ALTER TYPE "public"."content_type" ADD VALUE 'video';

File diff suppressed because it is too large Load Diff

View File

@@ -50,6 +50,13 @@
"when": 1768423315172, "when": 1768423315172,
"tag": "0006_friendly_adam_warlock", "tag": "0006_friendly_adam_warlock",
"breakpoints": true "breakpoints": true
},
{
"idx": 7,
"version": "7",
"when": 1769605995410,
"tag": "0007_melodic_synch",
"breakpoints": true
} }
] ]
} }

View File

@@ -4,6 +4,8 @@ ENV PNPM_HOME="/pnpm"
ENV PATH="$PNPM_HOME:$PATH" ENV PATH="$PNPM_HOME:$PATH"
RUN corepack enable && corepack prepare pnpm@latest --activate RUN corepack enable && corepack prepare pnpm@latest --activate
RUN apk add --no-cache ffmpeg
FROM base AS build FROM base AS build
WORKDIR /usr/src/app WORKDIR /usr/src/app
COPY pnpm-lock.yaml pnpm-workspace.yaml package.json ./ COPY pnpm-lock.yaml pnpm-workspace.yaml package.json ./

View File

@@ -1,6 +1,6 @@
{ {
"name": "@memegoat/backend", "name": "@memegoat/backend",
"version": "1.4.1", "version": "1.5.6",
"description": "", "description": "",
"author": "", "author": "",
"private": true, "private": true,

View File

@@ -48,6 +48,7 @@ export const envSchema = z.object({
// Media Limits // Media Limits
MAX_IMAGE_SIZE_KB: z.coerce.number().default(512), MAX_IMAGE_SIZE_KB: z.coerce.number().default(512),
MAX_GIF_SIZE_KB: z.coerce.number().default(1024), MAX_GIF_SIZE_KB: z.coerce.number().default(1024),
MAX_VIDEO_SIZE_KB: z.coerce.number().default(10240),
}); });
export type Env = z.infer<typeof envSchema>; export type Env = z.infer<typeof envSchema>;

View File

@@ -55,22 +55,31 @@ export class ContentsService {
"image/webp", "image/webp",
"image/gif", "image/gif",
"video/webm", "video/webm",
"video/mp4",
"video/quicktime",
]; ];
if (!allowedMimeTypes.includes(file.mimetype)) { if (!allowedMimeTypes.includes(file.mimetype)) {
throw new BadRequestException( throw new BadRequestException(
"Format de fichier non supporté. Formats acceptés: png, jpeg, jpg, webp, webm, gif.", "Format de fichier non supporté. Formats acceptés: png, jpeg, jpg, webp, webm, mp4, mov, gif.",
); );
} }
const isGif = file.mimetype === "image/gif"; const isGif = file.mimetype === "image/gif";
const maxSizeKb = isGif const isVideo = file.mimetype.startsWith("video/");
? this.configService.get<number>("MAX_GIF_SIZE_KB", 1024) let maxSizeKb: number;
: this.configService.get<number>("MAX_IMAGE_SIZE_KB", 512);
if (isGif) {
maxSizeKb = this.configService.get<number>("MAX_GIF_SIZE_KB", 1024);
} else if (isVideo) {
maxSizeKb = this.configService.get<number>("MAX_VIDEO_SIZE_KB", 10240);
} else {
maxSizeKb = this.configService.get<number>("MAX_IMAGE_SIZE_KB", 512);
}
if (file.size > maxSizeKb * 1024) { if (file.size > maxSizeKb * 1024) {
throw new BadRequestException( throw new BadRequestException(
`Fichier trop volumineux. Limite pour ${isGif ? "GIF" : "image"}: ${maxSizeKb} Ko.`, `Fichier trop volumineux. Limite pour ${isGif ? "GIF" : isVideo ? "vidéo" : "image"}: ${maxSizeKb} Ko.`,
); );
} }
@@ -87,11 +96,14 @@ export class ContentsService {
// 2. Transcodage // 2. Transcodage
let processed: MediaProcessingResult; let processed: MediaProcessingResult;
if (file.mimetype.startsWith("image/")) { if (file.mimetype.startsWith("image/") && file.mimetype !== "image/gif") {
// Image ou GIF -> WebP (format moderne, bien supporté) // Image -> WebP (format moderne, bien supporté)
processed = await this.mediaService.processImage(file.buffer, "webp"); processed = await this.mediaService.processImage(file.buffer, "webp");
} else if (file.mimetype.startsWith("video/")) { } else if (
// Vidéo -> WebM file.mimetype.startsWith("video/") ||
file.mimetype === "image/gif"
) {
// Vidéo ou GIF -> WebM
processed = await this.mediaService.processVideo(file.buffer, "webm"); processed = await this.mediaService.processVideo(file.buffer, "webm");
} else { } else {
throw new BadRequestException("Format de fichier non supporté"); throw new BadRequestException("Format de fichier non supporté");

View File

@@ -12,11 +12,12 @@ import {
export enum ContentType { export enum ContentType {
MEME = "meme", MEME = "meme",
GIF = "gif", GIF = "gif",
VIDEO = "video",
} }
export class CreateContentDto { export class CreateContentDto {
@IsEnum(ContentType) @IsEnum(ContentType)
type!: "meme" | "gif"; type!: "meme" | "gif" | "video";
@IsString() @IsString()
@IsNotEmpty() @IsNotEmpty()

View File

@@ -11,7 +11,7 @@ import { ContentType } from "./create-content.dto";
export class UploadContentDto { export class UploadContentDto {
@IsEnum(ContentType) @IsEnum(ContentType)
type!: "meme" | "gif"; type!: "meme" | "gif" | "video";
@IsString() @IsString()
@IsNotEmpty() @IsNotEmpty()

View File

@@ -12,7 +12,7 @@ import { categories } from "./categories";
import { tags } from "./tags"; import { tags } from "./tags";
import { users } from "./users"; import { users } from "./users";
export const contentType = pgEnum("content_type", ["meme", "gif"]); export const contentType = pgEnum("content_type", ["meme", "gif", "video"]);
export const contents = pgTable( export const contents = pgTable(
"contents", "contents",

View File

@@ -75,7 +75,7 @@ describe("MediaService", () => {
toFormat: jest.fn().mockReturnThis(), toFormat: jest.fn().mockReturnThis(),
videoCodec: jest.fn().mockReturnThis(), videoCodec: jest.fn().mockReturnThis(),
audioCodec: jest.fn().mockReturnThis(), audioCodec: jest.fn().mockReturnThis(),
outputOptions: jest.fn().mockReturnThis(), addOutputOptions: jest.fn().mockReturnThis(),
on: jest.fn().mockImplementation(function (event, cb) { on: jest.fn().mockImplementation(function (event, cb) {
if (event === "end") setTimeout(cb, 0); if (event === "end") setTimeout(cb, 0);
return this; return this;

View File

@@ -12,7 +12,7 @@ export class VideoProcessorStrategy implements IMediaProcessorStrategy {
private readonly logger = new Logger(VideoProcessorStrategy.name); private readonly logger = new Logger(VideoProcessorStrategy.name);
canHandle(mimeType: string): boolean { canHandle(mimeType: string): boolean {
return mimeType.startsWith("video/"); return mimeType.startsWith("video/") || mimeType === "image/gif";
} }
async process( async process(
@@ -37,13 +37,13 @@ export class VideoProcessorStrategy implements IMediaProcessorStrategy {
.toFormat("webm") .toFormat("webm")
.videoCodec("libvpx-vp9") .videoCodec("libvpx-vp9")
.audioCodec("libopus") .audioCodec("libopus")
.outputOptions("-crf 30", "-b:v 0"); .addOutputOptions("-crf", "30", "-b:v", "0");
} else { } else {
command = command command = command
.toFormat("mp4") .toFormat("mp4")
.videoCodec("libaom-av1") .videoCodec("libaom-av1")
.audioCodec("libopus") .audioCodec("libopus")
.outputOptions("-crf 34", "-b:v 0", "-strict experimental"); .addOutputOptions("-crf", "34", "-b:v", "0", "-strict", "experimental");
} }
command command

851
dossier-de-projet-cda.md Normal file
View File

@@ -0,0 +1,851 @@
# 1. Introduction au projet
Memegoat est une plateforme numérique innovante dédiée à la création, au partage et à la découverte de contenus multimédias éphémères et viraux, tels que les mèmes et les GIFs. Développé dans le cadre du titre professionnel **Concepteur Développeur d'Applications (CDA)**, ce projet transcende la simple fonctionnalité de partage social pour devenir une démonstration technique d'architecture logicielle moderne, de sécurité proactive et de conformité réglementaire.
Dans un paysage numérique où la protection des données personnelles et la sécurité des infrastructures sont devenues des enjeux critiques, Memegoat se distingue par une approche **"Security by Design"** et **"Privacy by Design"**. L'application ne se contente pas d'offrir une interface utilisateur fluide et réactive ; elle intègre des mécanismes de chiffrement avancés (PGP, ML-KEM), une protection contre les menaces virales via un scan systématique des fichiers (ClamAV), et une architecture robuste basée sur des technologies de pointe telles que Next.js 16, NestJS et PostgreSQL.
### Objectifs principaux :
- **Expérience Utilisateur d'Excellence :** Offrir une plateforme performante et intuitive, capable de gérer des flux de médias importants avec une latence minimale grâce à des stratégies de mise en cache agressives (Redis) et un transcodage optimisé (Sharp, FFmpeg).
- **Sécurité de Haut Niveau :** Garantir l'intégrité et la confidentialité des données des utilisateurs par l'implémentation de protocoles de chiffrement asymétrique (PGP), de cryptographie post-quantique (ML-KEM), de hachage robuste (Argon2id) et de mécanismes d'authentification forte (MFA/TOTP).
- **Conformité Réglementaire Stricte :** Répondre aux exigences du RGPD par une gestion transparente du consentement, le droit à la portabilité des données et l'automatisation du droit à l'oubli (Soft Delete).
- **Innovation Technologique et Sécurité Future :** Anticiper les menaces futures en intégrant des standards de cryptographie post-quantique. La transition vers des algorithmes comme **ML-KEM** (Kyber) est devenue une nécessité stratégique pour contrer la menace dite "Store Now, Decrypt Later", où des acteurs malveillants capturent aujourd'hui des flux chiffrés pour les déchiffrer dès l'avènement des ordinateurs quantiques stables. Memegoat se positionne ainsi à l'avant-garde de la protection des données à long terme.
# 2. Liste des compétences couvertes par le projet
Ce projet a été conçu pour couvrir l'intégralité du REAC (Référentiel d'Emploi, d'Activités et de Compétences) **Concepteur Développeur d'Applications (V04)**. Le tableau suivant détaille comment chaque compétence est mise en œuvre au sein de Memegoat.
| Compétence (CP) | Description | Mise en œuvre dans Memegoat |
|:----------------|:---------------------------------------------------------------------------------------------------------|:------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| **CP 1** | Maquetter une application | Conception de maquettes haute fidélité sous **Penpot**, respectant une approche mobile-first et les principes d'accessibilité. Voir [4.3 Maquettage](#43-maquettage). |
| **CP 2** | Réaliser une interface utilisateur web statique et adaptable | Intégration **Next.js 16** avec **Tailwind CSS 4** pour un rendu réactif et optimisé. Voir [F.1 Stack technique](#f1---stack-technique-nextjs-16-react-19-tailwind-css-4). |
| **CP 3** | Développer une interface utilisateur web dynamique | Développement de composants **React 19** utilisant les Server Actions et une gestion d'état optimisée. Voir [F.3 Interface dynamique](#f3---interface-dynamique-et-ux). |
| **CP 4** | Réaliser une interface utilisateur avec une solution de gestion de contenu ou e-commerce | Création d'un module de gestion de contenu personnalisé pour l'administration et la modération. Voir [4.4 Analyse](#44-analyse-et-conception). |
| **CP 5** | Créer une base de données | Modélisation et implémentation sous **PostgreSQL** via **Drizzle ORM**, incluant le chiffrement natif PGP. Voir [B.2 Modélisation](#b2---modélisation--base-de-données-drizzle-orm-postgresql). |
| **CP 6** | Développer les composants daccès aux données | Implémentation de services de données sous NestJS avec un typage strict (TypeScript) et validation via Zod. Voir [B.3 Accès aux données](#b3---composant-daccès-aux-données-drizzle-orm). |
| **CP 7** | Développer la partie back-end dune application web ou mobile | Architecture modulaire **NestJS** intégrant JWT, RBAC et services métier complexes. Voir [4.2 Backend](#42-backend). |
| **CP 8** | Élaborer et mettre en œuvre des composants dans une application de gestion de contenu ou e-commerce | Développement de tableaux de bord administratifs pour le suivi des signalements et la gestion utilisateur. Voir [B.5 Flux métier](#b5---flux-métier-et-crud). |
| **CP 9** | Concevoir une application | Élaboration de diagrammes UML et choix d'une architecture monorepo pour la cohérence globale. Voir [4.4 Analyse](#44-analyse-et-conception). |
| **CP 10** | Collaborer à la gestion dun projet informatique et à lorganisation de lenvironnement de développement | Utilisation de Git (GitFlow), **Docker Compose** et gestion des tâches en méthode Agile. Voir [4.1 Organisation](#41-organisation-des-tâches). |
| **CP 11** | Préparer le déploiement de lapplication | Configuration de conteneurs Docker pour l'orchestration des services (API, DB, Redis, MinIO). Voir [4.5 Déploiement](#45-déploiement-et-infrastructure). |
| **CP 12** | Organiser la veille technologique | Veille continue sur les évolutions de React 19, la sécurité Post-Quantique (ML-KEM) et le Green IT. Voir [B.6 Qualité et Tests](#b6---qualité-et-tests). |
# 3. Cahier des charges
## 3.1 Spécifications fonctionnelles
### Gestion des utilisateurs et authentification (MFA, Sessions)
Le système d'authentification de Memegoat repose sur une approche multi-niveaux garantissant sécurité et flexibilité. L'inscription et la connexion utilisent le hachage **Argon2id**, résistant aux attaques par force brute. La gestion des sessions est assurée par des jetons **JWT** avec un mécanisme de **rotation des jetons de rafraîchissement** (Refresh Tokens) pour limiter les risques de vol de session. Pour renforcer la sécurité, l'application intègre une authentification à deux facteurs (**MFA/TOTP**), dont les secrets sont chiffrés en base de données via **PGP**.
### Gestion et partage de contenus (Memes & GIFs)
Les utilisateurs peuvent téléverser des contenus multimédias de manière sécurisée. Le processus inclut une validation stricte des types MIME et de la taille des fichiers. Chaque contenu peut être enrichi de métadonnées (description, tags). Le partage est facilité par la génération d'URLs uniques et l'intégration de métadonnées **OpenGraph**. L'interface propose des flux par tendances, nouveautés et favoris, optimisés par une mise en cache **Redis**.
### Sécurisation avancée (Cryptographie PGP & Post-Quantique)
Memegoat implémente une couche de sécurité exceptionnelle pour protéger les données les plus sensibles.
#### Pourquoi le Post-Quantique ?
L'avènement prochain de l'informatique quantique menace les algorithmes de chiffrement asymétrique actuels (RSA, Elliptic Curves) via l'algorithme de Shor. Pour parer à cette menace, Memegoat intègre **ML-KEM (Kyber768)**. Ce choix est crucial pour garantir la confidentialité persistante des données : même si une base de données chiffrée est volée aujourd'hui, elle restera indéchiffrable par un ordinateur quantique futur.
#### Chiffrement des données sensibles (PGP & Argon2id)
Les données personnelles identifiables (PII), comme les emails, sont chiffrées au repos dans **PostgreSQL** à l'aide de clés **PGP**. Ce mécanisme assure que même un administrateur ayant accès directement aux fichiers de la base de données ne peut lire les informations personnelles sans la clé de déchiffrement.
Pour les mots de passe, nous utilisons **Argon2id**, le vainqueur de la "Password Hashing Competition". Ce choix est justifié par sa résistance supérieure aux attaques par "side-channel" et sa capacité à saturer la mémoire, rendant les attaques via GPU ou ASIC extrêmement coûteuses et inefficaces.
#### Blind Indexing
Un système de **Blind Indexing** est mis en œuvre pour permettre la recherche sur les données chiffrées (comme l'email lors de la connexion) sans jamais avoir à les déchiffrer en masse. On génère un condensat (hash) sécurisé et distinct de la donnée originale, utilisé uniquement pour les comparaisons d'égalité, préservant ainsi la confidentialité totale de la donnée stockée.
### Panneau dAdministration et Modération
Un tableau de bord dédié permet aux administrateurs de superviser l'activité : gestion des comptes, modération des contenus signalés et suivi des journaux d'audit. Le système de signalement déclenche un flux de modération où les administrateurs peuvent valider, supprimer ou demander une modification du contenu, assurant un environnement sain.
### Système de recherche par catégories et tags
La découverte de contenus est propulsée par un moteur de recherche multicritère. Les utilisateurs peuvent filtrer par catégories thématiques, tags ou recherche textuelle. L'architecture est optimisée grâce à des index performants et une dénormalisation contrôlée pour garantir des temps de réponse rapides.
## 3.2 Spécifications non fonctionnelles
### Performance & Réactivité (Redis, Caching)
Pour offrir une expérience fluide, Memegoat utilise **Redis** comme couche de cache pour les données hautement sollicitées. Le traitement des médias est optimisé : les images sont converties au format WebP/AVIF via **Sharp**, et les GIFs/vidéos sont transcodés par **FFmpeg**, réduisant le poids des fichiers sans compromettre la qualité.
### Observabilité et Sécurité du Transport (Sentry, Helmet, Throttler)
La surveillance et la protection active de l'application sont assurées par un ensemble d'outils complémentaires :
- **Sentry** : Assure le suivi des erreurs et la performance. L'intégration couvre à la fois le backend et le frontend, incluant le **Profiling Node.js** pour détecter les fuites de mémoire ou les fonctions bloquantes.
- **Helmet** : Ce middleware sécurise l'application NestJS en configurant de manière appropriée divers en-têtes HTTP. Ces en-têtes protègent les utilisateurs contre des attaques courantes telles que le XSS, le Clickjacking ou le reniflage de type MIME (MIME-sniffing).
- **Rate Limiting (Throttler)** : Pour prévenir les abus, les attaques par déni de service (DoS) et les tentatives de brute-force sur l'authentification, un système de limitation de débit est implémenté, restreignant le nombre de requêtes par IP dans une fenêtre de temps donnée.
#### Focus sur les en-têtes Helmet
L'utilisation de Helmet permet d'injecter automatiquement les protections suivantes :
- **Content-Security-Policy (CSP)** : Restreint les sources de contenu autorisées (scripts, styles, images), bloquant ainsi l'exécution de scripts malveillants injectés.
- **X-Frame-Options** : Interdit l'affichage de l'application dans des `<frame>` ou `<iframe>` tiers, empêchant le Clickjacking.
- **Strict-Transport-Security (HSTS)** : Force le navigateur à utiliser uniquement des connexions HTTPS sécurisées.
- **X-Content-Type-Options** : Empêche le navigateur d'interpréter un fichier autrement que par son type MIME déclaré, neutralisant certaines attaques par upload de fichiers.
#### Détection de Crawlers et Protection contre le Scraping
Un middleware dédié (`CrawlerDetectionMiddleware`) analyse les motifs de requêtes et les User-Agents. Il identifie les comportements suspects (tentatives d'accès à des fichiers sensibles comme `.env`, scans de vulnérabilités PHP) et les robots connus pour optimiser la charge serveur et protéger le contenu des mèmes contre le pillage automatique.
### Scalabilité (Stockage S3/Minio)
L'architecture sépare les serveurs d'application du stockage des actifs numériques via le protocole **S3** (MinIO). Cette approche facilite la scalabilité horizontale et permet de servir les médias via un réseau de diffusion de contenu (CDN).
### Expérience utilisateur (UX)
L'interface est développée avec une approche **mobile-first**, utilisant **Shadcn UI** et **Radix UI**. Elle propose un mode sombre natif, des états de chargement soignés (skeletons) et une navigation fluide, garantissant une inclusion maximale.
### SEO (Search Engine Optimization)
Memegoat implémente une stratégie SEO agressive et moderne grâce aux capacités natives de **Next.js**. L'application utilise le **Server-Side Rendering (SSR)** pour garantir que les robots d'indexation (Googlebot, Bingbot) reçoivent un code HTML complet et sémantique.
Les points clés incluent :
- **Metadata API** : Gestion centralisée et dynamique des balises `<title>`, `<meta description>` et des balises canoniques.
- **Social Graph (OpenGraph & Twitter)** : Optimisation des partages sur les réseaux sociaux avec des images d'aperçu dynamiques pour chaque mème.
- **Données Structurées (JSON-LD)** : Utilisation du format Schema.org pour aider les moteurs de recherche à comprendre la nature des contenus (Mèmes, Auteurs, Catégories).
### Accessibilité (A11Y)
Memegoat vise une conformité de niveau **AA selon le WCAG 2.1**. L'accessibilité n'est pas une option mais un pilier du développement :
- **Composants Radix UI** : Utilisation de primitives accessibles gérant nativement le focus, les rôles ARIA et les interactions clavier complexes.
- **Navigation au clavier** : Parcours utilisateur entièrement réalisable sans souris, avec des indicateurs de focus clairs.
- **Lecteurs d'écran** : Sémantique HTML5 stricte (`<main>`, `<nav>`, `<article>`) et utilisation judicieuse des attributs `aria-label` et `aria-live` pour les notifications dynamiques.
- **Contrastes** : Respect des ratios de contraste (minimum 4.5:1) pour assurer une lisibilité optimale.
### Maintenance et Extensibilité
La pérennité est assurée par une architecture **monorepo** facilitant le partage de types entre frontend et backend. L'usage de **TypeScript** et la structure modulaire de **NestJS** permettent d'étendre les fonctionnalités sans compromettre la stabilité.
### Tests automatisés
La robustesse repose sur une stratégie de tests rigoureuse avec **Jest**. Les services critiques (cryptographie, authentification) sont couverts par des tests unitaires, tandis que des tests d'intégration vérifient la communication avec la base de données via **Drizzle**.
## 3.3 Charte graphique
### Couleurs
La palette s'articule autour d'une dominante sombre (**Zinc/Black**) pour le confort visuel, avec des accents de violet électrique et d'indigo pour les éléments d'interaction, reflétant l'aspect moderne et communautaire.
### Police décriture
Le choix s'est porté sur **Ubuntu Sans** pour sa lisibilité exceptionnelle et son aspect moderne, complétée par **Ubuntu Mono** pour les éléments techniques et le code, assurant une cohérence visuelle sur tous les supports.
### Logotype et image de marque
Le logotype représente une chèvre stylisée, symbole du **"G.O.A.T"**, incarnant l'ambition de devenir la référence ultime des mèmes tout en inspirant confiance par sa rigueur technique.
## 3.4 Spécifications de linfrastructure
L'infrastructure est entièrement conteneurisée avec **Docker**, garantissant la parité entre environnements.
- **Caddy** : Reverse proxy avec gestion automatique du SSL (TLS 1.3). Il agit comme point d'entrée unique, gérant le routage vers le frontend et le backend tout en assurant une couche de sécurité supplémentaire.
- **PostgreSQL 17** : Stockage relationnel avec extension `pgcrypto` pour le chiffrement PGP.
- **Redis 7** : Utilisé pour la mise en cache des requêtes API et la gestion des sessions à haute performance.
- **MinIO** : Serveur de stockage d'objets auto-hébergé, compatible avec l'API Amazon S3, utilisé pour la persistance des fichiers médias.
- **ClamAV** : Service d'analyse antivirus intégré au flux d'upload pour protéger l'infrastructure contre les fichiers malveillants.
## 3.5 Sécurité et Conformité
Le projet a été conçu selon le principe de **Défense en Profondeur**.
- **Sécurité Applicative** : Validation rigoureuse via Zod, hachage Argon2id, et protection contre les failles OWASP (XSS, CSRF) via Helmet.
- **Sécurité des Données** : Chiffrement PGP au repos et cryptographie post-quantique (ML-KEM) pour les échanges de clés.
- **Disponibilité** : Architecture conteneurisée permettant un redémarrage rapide et une isolation des services.
- **Conformité RGPD** : Gestion native des droits utilisateurs (accès, oubli) et minimisation des données collectées.
# 4. Réalisations
## 4.1 Organisation des tâches
La réussite d'un projet de l'envergure de Memegoat repose sur une organisation rigoureuse et une méthodologie de travail éprouvée. Pour ce développement, j'ai adopté une approche **Agile**, s'inspirant du cadre **Scrum**, permettant une itération rapide et une adaptation continue aux défis techniques rencontrés, notamment sur les aspects complexes de cryptographie et de traitement des médias.
### Gestion de projet et suivi des tâches
Le pilotage du projet a été centralisé sur la plateforme **Gitea** (alternative auto-hébergée à GitHub). Chaque fonctionnalité ou correction de bug a fait l'objet d'une "Issue" détaillée, servant de point de départ à la réflexion technique. Pour la gestion visuelle du flux de travail, j'ai utilisé un tableau **Kanban**, permettant de suivre l'évolution des tâches de l'état "Backlog" à "Terminé". Cette visibilité constante a été cruciale pour maintenir une cadence de développement régulière et prioriser les composants critiques liés à la sécurité.
### Gestion des versions (Versioning)
Le code source est géré via **Git**, en suivant une version simplifiée du modèle **GitFlow**. Cette organisation permet de séparer clairement le code en cours de développement (branche `dev`) de la version stable destinée à la production (branche `main`). Chaque nouvelle fonctionnalité est développée sur une branche isolée avant d'être intégrée après une phase de tests, garantissant ainsi l'intégrité de la branche principale.
### Environnement de développement et Monorepo
Pour assurer une cohérence parfaite et faciliter le partage de code (notamment les types TypeScript), le projet est structuré en **Monorepo** utilisant les **workspaces pnpm**.
Ce choix d'architecture monorepo répond à plusieurs besoins critiques du projet :
- **Partage de code simplifié** : Les schémas de validation Zod et les types TypeScript sont partagés nativement entre le frontend et le backend. Cela garantit qu'une modification de la structure des données côté serveur est immédiatement détectée par le compilateur côté client, éliminant ainsi toute une classe de bugs liés à la désynchronisation des API.
- **Gestion centralisée des dépendances** : Grâce à pnpm, les dépendances communes sont partagées, réduisant l'empreinte disque et accélérant les installations.
- **Atomicité des changements** : Il est possible de mettre à jour une fonctionnalité impactant les deux bouts de la chaîne dans une seule et même "Pull Request", facilitant le suivi et la revue de code.
- **Simplification du déploiement** : Un seul dépôt facilite la configuration des pipelines CI/CD et l'orchestration Docker, tout en maintenant une isolation stricte des processus à l'exécution.
L'ensemble de l'environnement est conteneurisé avec **Docker**, garantissant des services standardisés (PostgreSQL, Redis, MinIO) accessibles instantanément sans pollution du système hôte.
### Pipeline CI/CD (Gitea Actions)
L'automatisation est au cœur du processus de qualité. Un pipeline **CI/CD** a été mis en place via **Gitea Actions (Forgejo)**. À chaque tag de version :
1. **Validation** : Linting (Biome) et tests automatisés (Jest) sont exécutés sur chaque composant.
2. **Build** : Les images Docker sont construites pour valider la compilation.
3. **Déploiement** : L'application est automatiquement déployée sur le serveur de production via Docker Compose, assurant une livraison continue et fiable.
## 4.2 Analyse et Conception
La phase de conception est le socle sur lequel repose la robustesse de Memegoat. Elle a permis d'anticiper les défis techniques liés à la sécurité et à la gestion des médias.
### Analyse des besoins et Personas
L'analyse a identifié trois profils types (Personas) :
1. **Le Créateur de contenu** : Recherche la simplicité d'upload et une visibilité maximale.
2. **Le Consommateur** : Privilégie la fluidité de navigation et la pertinence du flux (tendances).
3. **Le Modérateur** : Nécessite des outils d'administration efficaces pour garantir la sécurité de la communauté.
### User Stories
- "En tant qu'utilisateur, je veux pouvoir téléverser un mème de manière sécurisée afin de le partager."
- "En tant que modérateur, je veux pouvoir suspendre un contenu signalé pour non-respect des règles."
- "En tant qu'utilisateur soucieux de ma vie privée, je veux pouvoir activer la double authentification (MFA)."
### Diagramme de Cas d'Utilisation (Use Case)
Il illustre les interactions majeures : Inscription, Recherche, Upload, Modération, et Gestion de profil.
### Diagramme de Séquence (Flux d'Upload)
Détaille le passage du média à travers le scanner antivirus ClamAV avant son stockage sur MinIO et son référencement en base de données.
## 4.3 Maquettage
Le design de Memegoat a été guidé par une approche **Mobile-First** et une esthétique épurée.
### Choix de l'outil : Pourquoi PenPot ?
Le choix de **PenPot** s'inscrit dans la démarche Open-Source du projet. Contrairement à Figma, PenPot permet une pleine maîtrise des assets (format SVG natif) et facilite la collaboration sans contraintes de licences propriétaires, tout en offrant des fonctionnalités de prototypage avancées.
### Workflow de Design
1. **Wireframes** : Définition de la structure sans distraction visuelle.
2. **Maquettes Haute Fidélité** : Application de la charte graphique (Ubuntu Sans, palette de gris profond).
3. **Prototypage** : Simulation des transitions pour valider l'UX (User Experience) avant le développement.
## 4.4 Backend
L'architecture backend de Memegoat a été conçue pour être à la fois robuste, évolutive et sécurisée. Le choix s'est porté sur **NestJS**, un framework Node.js progressif, pour sa capacité à structurer le code de manière modulaire et son support natif de **TypeScript**.
### Architecture du backend (NestJS)
NestJS impose une structure rigoureuse inspirée de l'architecture Angular, ce qui facilite grandement la maintenance. L'application est découpée en **Modules**, chacun étant responsable d'un domaine fonctionnel précis (ex: `UsersModule`, `AuthModule`, `ContentsModule`). Cette approche garantit une séparation stricte des préoccupations (**Separation of Concerns**).
#### Controller
Les contrôleurs constituent la porte d'entrée de l'API. Ils réceptionnent les requêtes HTTP, délèguent le traitement à la logique métier et retournent une réponse formatée au client. Dans Memegoat, chaque contrôleur utilise des décorateurs NestJS pour définir les routes, les méthodes (GET, POST, etc.) et les mécanismes de sécurité (**Guards**).
#### Service
Les services encapsulent l'intégralité de la logique métier. Ils sont injectés dans les contrôleurs via le mécanisme d'**injection de dépendances**. C'est ici que sont réalisées les opérations complexes : validation des données, calculs métiers, et interactions avec la base de données via l'ORM.
#### Module
Le module est la brique de base de NestJS. Il permet d'organiser le code en domaines logiques et de gérer les dépendances. Memegoat utilise un `AppModule` racine qui orchestre les modules transverses (Database, Config, Cache) et les modules métier.
#### Middleware
Les middlewares sont utilisés pour des traitements transverses sur les requêtes entrantes. Memegoat utilise un middleware de logging (**HTTPLogger**) pour la traçabilité et un middleware de **détection de robots (Crawler Detection)** pour optimiser les ressources et sécuriser l'accès contre le scraping intensif.
#### Guard
Les Guards sont responsables de l'autorisation. Ils déterminent si une requête donnée est autorisée à accéder à une route, en fonction des rôles de l'utilisateur (**RBAC**) ou de la validité de sa session (**JWT**).
#### Data Transfer Object (DTO)
Les DTO définissent la forme des données pour chaque opération de l'API. Couplés à **Zod**, ils permettent une validation stricte et automatique des données entrantes, protégeant l'application contre les données corrompues.
### B.1 - Installation et configuration de lenvironnement
La mise en place a été optimisée pour la performance via le gestionnaire de paquets **pnpm**. La configuration est centralisée dans des variables d'environnement (`.env`), validées au démarrage par un schéma **Zod**. Cela permet de détecter immédiatement toute erreur de configuration critique.
### B.2 - Modélisation & Base de données (Drizzle ORM, PostgreSQL)
Pour la persistance, Memegoat s'appuie sur **PostgreSQL**. L'interaction est gérée par **Drizzle ORM**, un outil moderne "Type-safe" qui permet d'écrire des requêtes SQL de manière intuitive tout en bénéficiant de la puissance du typage TypeScript.
#### Table Users
Pilier de la gestion d'identité. Elle stocke les profils, les secrets MFA et les métadonnées RGPD. Les données sensibles (email) sont chiffrées nativement via **PGP**.
#### Table Contents (Memes & GIFs)
Centralise les métadonnées des médias : titres, slugs, clés de stockage S3 et statistiques d'utilisation.
#### Table Categories & Tags
Permettent une organisation taxonomique flexible des contenus pour faciliter la découverte et le filtrage.
#### Table Favorites
Gère la relation "plusieurs-à-plusieurs" entre utilisateurs et contenus.
#### Table Audit Logs & Reports
Assurent la traçabilité des actions administratives et permettent aux utilisateurs de signaler les contenus inappropriés pour la modération.
#### Table Sessions & API Keys
Gèrent l'accès prolongé (Refresh Tokens) et les accès programmatiques sécurisés.
#### Table RBAC (Rôles & Permissions)
Définit finement les droits d'accès (Utilisateur, Modérateur, Administrateur).
#### Table PGP (Chiffrement symétrique)
Configuration permettant l'usage transparent du chiffrement symétrique au sein de PostgreSQL via l'extension `pgcrypto`.
#### Migration & Seeding
L'évolution du schéma est gérée par **Drizzle Kit** via des fichiers de migration SQL versionnés. Des scripts de seeding permettent de peupler l'environnement avec des données cohérentes.
### B.3 - Composant daccès aux données (Drizzle ORM)
#### Approche Schema-First et Typage End-to-End
L'utilisation de **Drizzle ORM** permet une approche "Schema-First". Le schéma de la base de données est défini en TypeScript, ce qui permet de générer à la fois les migrations SQL et les types utilisés par l'application. Cette synchronisation parfaite garantit qu'aucune erreur de type ne survient lors de la manipulation des données.
#### Requêtes performantes et Typage strict
Drizzle permet de manipuler les données avec une syntaxe proche du SQL tout en restant parfaitement typée, offrant une excellente performance sans la surcharge des ORM traditionnels (comme TypeORM ou Sequelize).
- **Type-Safety** : Les résultats des requêtes sont automatiquement typés en fonction du schéma.
- **Relations explicites** : Les jointures sont gérées de manière performante, évitant le problème du "N+1 queries" grâce à une sélection précise des colonnes nécessaires.
#### Sécurité et Prévention des Injections SQL
Drizzle protège nativement contre les injections SQL grâce à l'utilisation systématique de requêtes paramétrées. Chaque entrée utilisateur est traitée comme une donnée et non comme une partie de la commande SQL, neutralisant ainsi ce vecteur d'attaque critique.
#### Gestion des Erreurs et Optimisation des Requêtes
Le backend intègre une gestion centralisée des exceptions de base de données. Les erreurs SQL (contraintes d'unicité, violations de clés étrangères) sont interceptées et transformées en réponses HTTP claires et sécurisées pour le client, sans jamais exposer la structure interne de la base.
### B.4 - Composants métier
#### Validation des données (Zod & DTO)
Toutes les données entrantes (corps de requête, paramètres d'URL) sont validées à l'aide de schémas **Zod**. Ce choix garantit :
- Un typage strict partagé entre le frontend et le backend.
- L'élimination des données malformées avant qu'elles n'atteignent la logique métier.
- Une documentation automatique des interfaces.
#### Gestion des médias (S3/Minio, Sharp, FFmpeg)
Le pipeline de traitement inclut :
1. **Réception sécurisée** en mémoire (Stream-based processing).
2. **Scan antivirus** systématique (ClamAV) avant toute écriture disque.
3. **Optimisation** : Images via **Sharp** (WebP/AVIF), GIFs/Vidéos via **FFmpeg** pour un compromis idéal qualité/poids.
4. **Stockage persistant** sur MinIO (S3) avec URLs signées pour la sécurité.
#### Cycle de vie d'un contenu (Upload, Validation, Modération)
Encadrement strict : de l'upload au statut "actif" ou "suspendu" suite à un signalement. L'utilisation du **Soft Delete** garantit la conformité RGPD tout en permettant un audit en cas de litige.
#### Règles Métier et Avantages de Drizzle ORM
L'utilisation de Drizzle permet d'implémenter les contraintes métier (unicité, intégrité) de manière fluide. Les transactions sont utilisées pour garantir l'atomicité des opérations complexes (ex: upload média + insertion DB).
### B.5 - Flux métier et CRUD
Cette section détaille les interactions dynamiques entre les composants du système pour les fonctionnalités clés.
#### 1. Inscription et Authentification
Le choix de **Argon2id** pour le hachage des mots de passe offre la meilleure résistance connue contre les attaques par force brute et par GPU/ASIC. L'authentification est sécurisée par des sessions **Iron Session** (basées sur des cookies HttpOnly chiffrés) et un support natif du **MFA (TOTP)**.
```mermaid
sequenceDiagram
participant U as Utilisateur
participant F as Frontend (Next.js)
participant B as Backend (NestJS)
participant D as Base de Données (PostgreSQL)
participant S as Session (Iron Session)
Note over U, S: Processus d'Inscription
U->>F: Saisie (username, email, password)
F->>B: POST /auth/register
B->>B: Hachage du mot de passe (Argon2id)
B->>B: Calcul du Blind Index (Email Hash)
B->>D: INSERT INTO users (Email chiffré PGP)
D-->>B: Confirmation
B-->>F: Compte créé avec succès
Note over U, S: Processus de Connexion
U->>F: Login/Password
F->>B: POST /auth/login
B->>D: SELECT user WHERE email_hash = ?
D-->>B: Données utilisateur (Password Haché)
B->>B: Vérification Argon2id
alt MFA Activé
B-->>F: 200 OK (Require MFA)
U->>F: Saisie du code TOTP
F->>B: POST /auth/verify-2fa
B->>B: Validation du secret chiffré PGP
end
B->>S: Création de la session chiffrée
S-->>F: Cookie Set-Cookie (HttpOnly, Secure)
F-->>U: Redirection vers le Dashboard
```
#### 2. Publication de Contenu (CRUD Create)
Le flux de publication privilégie la sécurité (scan antivirus) et la performance utilisateur (traitement asynchrone possible, bien qu'actuellement synchrone pour garantir la disponibilité immédiate).
```mermaid
sequenceDiagram
participant U as Utilisateur
participant F as Frontend
participant B as Backend
participant AV as ClamAV (Antivirus)
participant P as Processeur (Sharp/FFmpeg)
participant S3 as Stockage S3 (MinIO)
participant D as Base de Données
U->>F: Upload du média (Meme/GIF)
F->>B: POST /contents/upload (Multipart)
B->>B: Validation du type MIME & Taille
B->>AV: Scan binaire du fichier
AV-->>B: Résultat Clean
par Traitement d'optimisation
B->>P: Sharp (Resize & WebP)
P-->>B: Buffer optimisé
and Upload S3
B->>S3: Upload vers le bucket "memes"
S3-->>B: Key / ETag
end
B->>D: INSERT INTO contents (S3 Key, Metadata)
D-->>B: ID Contenu
B-->>F: 201 Created (Redirection vers le contenu)
```
#### 3. Système de Signalement et Modération
La modération est un flux métier critique. Nous utilisons un système de signalement par les utilisateurs qui alimente une file d'attente pour les modérateurs/administrateurs.
```mermaid
sequenceDiagram
participant U as Utilisateur
participant B as Backend
participant D as Base de Données
participant A as Admin/Modérateur
U->>B: POST /reports (ContenuID, Motif)
B->>D: INSERT INTO reports (Status: PENDING)
D-->>B: OK
Note over A, D: Interface de Modération
A->>B: GET /reports (Filter: PENDING)
B->>D: SELECT reports JOIN contents
D-->>B: Liste des signalements
B-->>A: Affichage du Dashboard Admin
A->>B: PATCH /reports/:id (Status: RESOLVED)
B->>D: UPDATE contents SET status = 'BLOCKED' (ou Soft Delete)
D-->>B: OK
B-->>A: Action confirmée
```
#### 4. Recherche et Exploration (CRUD Read)
L'optimisation des lectures est cruciale pour une plateforme de médias. Nous utilisons une stratégie de **mise en cache agressive** via Redis pour les flux publics (tendances, nouveautés) afin de réduire la charge sur la base de données PostgreSQL.
```mermaid
sequenceDiagram
participant U as Utilisateur
participant F as Frontend
participant B as Backend
participant R as Cache (Redis)
participant D as Base de Données
U->>F: Navigation vers "Explore"
F->>B: GET /contents/explore?sort=trend
B->>R: Recherche de la clé cache (URL hash)
alt Cache HIT (Données présentes)
R-->>B: Retourne le JSON mis en cache
else Cache MISS (Données absentes ou expirées)
B->>D: SELECT contents (filtres, pagination)
D-->>B: Résultats de la requête
B->>R: Stockage du résultat (SET with TTL)
end
B-->>F: Envoi du flux de données
F-->>U: Affichage fluide de la grille
```
#### 5. Mise à jour et Gestion de compte (CRUD Update)
La mise à jour des informations utilisateur ou des contenus suit un flux sécurisé garantissant que seuls les propriétaires ou les administrateurs peuvent modifier les données.
```mermaid
sequenceDiagram
participant U as Utilisateur
participant F as Frontend
participant B as Backend
participant D as Base de Données
participant R as Cache (Redis)
U->>F: Modification du profil (ex: Avatar/Bio)
F->>B: PATCH /users/me (Multipart/Data)
B->>B: Vérification du JWT / Session
alt Si changement sensible (Email/Password)
B->>B: Vérification du mot de passe actuel
B->>B: Nouveau hachage / Chiffrement PGP
end
B->>D: UPDATE users SET ... WHERE id = ?
D-->>B: Confirmation
B->>R: Invalidation du cache utilisateur (DEL user:profile:id)
R-->>B: OK
B-->>F: 200 OK (Données mises à jour)
F-->>U: Notification de succès
```
#### 6. Suppression et Droit à l'oubli (CRUD Delete)
Conformément au RGPD, l'utilisateur dispose d'un droit à l'effacement. Pour concilier ce droit avec la nécessité de maintenir l'intégrité des données et de prévenir les abus, nous utilisons le **Soft Delete**.
```mermaid
sequenceDiagram
participant U as Utilisateur
participant B as Backend
participant D as Base de Données
participant S3 as Stockage S3
U->>B: DELETE /contents/:id
B->>B: Vérification des droits (Owner/Admin)
B->>D: UPDATE contents SET deleted_at = NOW()
D-->>B: OK
Note over B, S3: Suppression asynchrone (optionnelle)
B-->>U: 204 No Content
Note right of D: Les requêtes futures excluent <br/>automatiquement les 'deleted_at IS NOT NULL'
```
- **Fonctionnement** : Une colonne `deleted_at` est mise à jour. Les requêtes de lecture standard ignorent ces enregistrements grâce à des filtres globaux ou des clauses WHERE systématiques.
- **Action physique** : Les médias associés sur S3 peuvent être supprimés après un délai de rétention de sécurité (ex: 30 jours), garantissant une suppression effective des fichiers volumineux tout en permettant une récupération en cas d'erreur ou de litige.
### B.6 - Qualité et Tests
La qualité logicielle de Memegoat repose sur une pyramide des tests équilibrée et l'utilisation d'outils d'analyse statique de pointe.
#### Stratégie de tests avec Jest
Le projet utilise **Jest** comme moteur de test principal. La stratégie se divise en deux axes :
1. **Tests Unitaires** : Ils isolent chaque service pour vérifier sa logique interne. Les services critiques tels que `AuthService` (authentification), `CryptoService` (chiffrement PGP/ML-KEM) et les validateurs `Zod` sont couverts à 100% pour garantir qu'aucune régression ne compromette la sécurité.
2. **Tests d'Intégration** : Ces tests vérifient la bonne communication entre les modules NestJS et la base de données PostgreSQL. Nous utilisons des conteneurs éphémères pour garantir que les requêtes Drizzle produisent les résultats attendus dans un environnement réel.
#### Analyse Statique et Qualité du Code
Pour maintenir une base de code saine et homogène, nous utilisons **Biome** :
- **Linting** : Détection précoce des erreurs potentielles, des variables inutilisées et des mauvaises pratiques JavaScript/TypeScript.
- **Formatage** : Uniformisation automatique du style de code, facilitant la lecture et la collaboration au sein du monorepo.
- **Performance** : Biome est nettement plus rapide qu'ESLint/Prettier, ce qui accélère la boucle de rétroaction pendant le développement et dans le pipeline CI.
#### Maintenabilité et Documentation
La maintenabilité est assurée par le typage strict de **TypeScript**. En cas de modification d'une interface dans le backend, le compilateur signale immédiatement les erreurs d'impact dans le frontend. Cette "auto-documentation" par les types est complétée par des commentaires standardisés pour les logiques métier complexes.
### Sécurité & Cryptographie
Memegoat adopte une approche de défense en profondeur, combinant des standards industriels éprouvés et des technologies prospectives pour garantir la souveraineté des données utilisateurs.
#### Gestion de l'Identité et Authentification Forte
L'authentification ne repose pas uniquement sur le couple identifiant/mot de passe. Nous utilisons un système de sessions sécurisées via **Iron Session**, utilisant des cookies signés et chiffrés côté serveur.
- **Hashing avec Argon2id** : Les mots de passe sont hachés avec l'algorithme Argon2id, configuré selon les recommandations de l'ANSSI (Memory: 64MB, Iterations: 3, Parallelism: 4). Ce choix protège contre les attaques par dictionnaire et les tentatives de craquage massif via GPU/ASIC.
- **MFA (Multi-Factor Authentication)** : L'implémentation du protocole **TOTP** (Time-based One-Time Password) ajoute une couche de sécurité vitale. Les secrets MFA sont eux-mêmes chiffrés en base de données avant stockage.
#### Chiffrement des Données au Repos (PGP & pgcrypto)
Pour protéger les données personnelles identifiables (PII), Memegoat utilise le chiffrement asymétrique directement au niveau de la couche de persistance.
- **Extension pgcrypto** : Nous exploitons les capacités natives de PostgreSQL pour chiffrer les colonnes sensibles (ex: emails).
- **Mécanisme PGP** : Les données sont chiffrées avec une clé publique et ne peuvent être déchiffrées que par l'application possédant la clé privée correspondante. Cela garantit que même en cas de compromission physique de la base de données, les informations personnelles restent inexploitables.
#### Cryptographie Post-Quantique (ML-KEM)
Anticipant l'ère de l'informatique quantique, Memegoat intègre **ML-KEM (Kyber768)**, un algorithme basé sur les réseaux (lattice-based cryptography) récemment standardisé par le NIST (FIPS 203).
- **Objectif** : Sécuriser les échanges de clés contre les futures capacités de déchiffrement quantique.
- **Implémentation** : L'utilisation de la bibliothèque `@noble/post-quantum` permet d'établir des secrets partagés résistants, assurant une "Forward Secrecy" même face à un attaquant disposant d'un ordinateur quantique stable dans le futur.
#### Protection de la Couche Transport et En-têtes (Helmet)
La sécurité du navigateur est renforcée par l'utilisation de **Helmet** côté NestJS, qui configure les en-têtes HTTP essentiels :
- **CSP (Content Security Policy)** : Bloque l'exécution de scripts non autorisés, neutralisant les attaques XSS.
- **HSTS** : Impose le HTTPS de manière stricte.
- **CORS** : Politique de partage de ressources restrictive, autorisant uniquement les appels provenant du domaine frontend légitime.
#### Antivirus Applicatif et Validation Stricte
Chaque fichier téléversé subit un flux de vérification rigoureux avant traitement :
- **Scan ClamAV** : Utilisation d'un démon ClamAV pour analyser le binaire de chaque image ou GIF à la recherche de malwares ou de scripts malveillants encapsulés.
- **Validation Zod** : Toutes les entrées de l'API sont validées par des schémas Zod, empêchant les injections de données malformées ou les attaques par pollution de prototypes.
#### Amorçage Sécurisé (Bootstrap Service)
Le système intègre un mécanisme d'amorçage unique (`BootstrapService`) qui génère un jeton à usage unique au premier démarrage si aucun administrateur n'est détecté. Cela permet de créer le premier compte "Admin" de manière sécurisée sans exposer d'identifiants par défaut dans le code ou la base de données.
#### Purge et Maintenance Automatisée (RGPD)
Un service de purge automatique (`PurgeService`) s'exécute quotidiennement pour garantir que les données supprimées (Soft Delete) ou expirées (Sessions, Signalements) sont physiquement retirées du système après 30 jours, assurant une conformité stricte avec le principe de limitation de la conservation du RGPD.
### Veille technologique et de sécurité
#### OWASP Top Ten : Priorité à la sécurité applicative
Conception guidée par les standards de l'OWASP pour prévenir les vulnérabilités les plus critiques.
#### Veille sur la sécurité Post-Quantique
Suivi des standards du NIST et de l'ANSSI pour la migration vers des algorithmes résistants.
#### CERT-FR (Veille gouvernementale)
Surveillance active des vulnérabilités pour maintenir les dépendances à jour.
## 4.3 Maquettage
### Choix de l'outil : Pourquoi PenPot ?
Utilisation de **PenPot** comme alternative Open-Source à Figma, favorisant la souveraineté des données et une transition fluide vers le code grâce au format SVG et au Flex Layout.
### Workflow de Design
1. **Wireframes** : Focus sur l'UX et l'ergonomie.
2. **Maquettes Haute Fidélité** : Application de l'identité visuelle.
3. **Prototypage** : Simulation du parcours utilisateur complet.
## 4.4 Analyse et Conception
### Analyse des besoins et Personas
La phase d'analyse a permis d'identifier les besoins des utilisateurs cibles :
- **Le Consommateur** : Recherche un divertissement rapide, fluide et accessible sur mobile.
- **Le Créateur** : Souhaite partager ses contenus facilement tout en ayant l'assurance que ses données sont protégées.
- **Le Modérateur/Admin** : Nécessite des outils robustes pour maintenir un environnement sain.
### User Stories
Les fonctionnalités ont été priorisées via la méthode **MoSCoW** :
- **Must (Indispensable)** : Inscription sécurisée (MFA), Upload de mèmes, Consultation des tendances.
- **Should (Important)** : Mise en favoris, Recherche par tags, Signalement de contenu.
- **Could (Optionnel)** : Profils personnalisés avancés, Statistiques de vues.
### Diagramme de Cas d'Utilisation (Use Case)
Le diagramme suivant illustre les interactions des acteurs avec le système :
```mermaid
graph LR
V[Visiteur]
U[Utilisateur Authentifié]
A[Administrateur]
V --- C1(Consulter les tendances)
V --- C2(S'inscrire / Se connecter)
U --- C3(Poster un mème)
U --- C4(Ajouter aux favoris)
U --- C5(Signaler un contenu)
A --- C6(Modérer les contenus)
A --- C7(Gérer les utilisateurs)
A --- C8(Consulter les statistiques)
```
### Diagramme de Séquence (Flux d'Upload)
Détail des interactions lors de la publication d'un contenu, intégrant la sécurité et l'optimisation :
```mermaid
sequenceDiagram
participant User as Utilisateur
participant API as Backend (NestJS)
participant AV as Scanner (ClamAV)
participant P as Processeur (Sharp/FFmpeg)
participant S3 as Stockage (MinIO)
participant DB as PostgreSQL
User->>API: POST /contents/upload (Multipart)
API->>AV: Scan Antivirus du buffer
AV-->>API: Résultat: Sain
par Optimisation et Stockage
API->>P: Conversion WebP / Transcodage
P-->>API: Média optimisé
API->>S3: Transfert vers le bucket
end
API->>DB: INSERT INTO contents (Metadata + S3 Key)
DB-->>API: Confirmation (ID)
API-->>User: 201 Created (Affichage)
```
## 4.5 Frontend
L'interface utilisateur de Memegoat a été développée avec **Next.js**, en tirant parti des dernières avancées de l'écosystème React pour offrir une expérience fluide, performante et accessible.
### F.1 - Stack technique (Next.js 16, React 19, Tailwind CSS 4)
L'interface de Memegoat repose sur une stack à la pointe de l'écosystème web, choisie pour ses performances et sa maintenabilité :
- **Next.js 16 (App Router)** : Utilisation du framework de référence pour React, permettant un rendu hybride. Les pages sont pré-rendues côté serveur (SSR) pour le SEO, tandis que les interactions dynamiques sont gérées côté client.
- **React 19** : Cette version majeure introduit des améliorations significatives, notamment dans la gestion des formulaires avec les **Server Actions** et le support natif de l'asynchronisme (use, transition API), réduisant drastiquement le code "boilerplate" de gestion d'état.
- **Tailwind CSS 4** : La nouvelle itération de ce framework "Utility-First" offre une compilation ultra-rapide et une configuration simplifiée via CSS-native variables, permettant de construire des interfaces complexes sans quitter le fichier HTML/JSX.
### F.2 - Architecture et Interfaces
L'architecture frontend suit les principes de la **composabilité** et de la séparation des responsabilités. Le frontend est organisé en composants réutilisables, suivant les principes de l'**Atomic Design**.
- **Composants et Design System** : Le projet utilise **Shadcn UI**, basé sur **Radix UI**, pour fournir une bibliothèque de composants non stylés mais hautement accessibles.
- **Type-Safety** : Les interfaces TypeScript sont partagées avec le backend, garantissant que les données affichées correspondent exactement aux données envoyées par l'API.
- **Rendu Hybride** : Nous tirons pleinement parti des **React Server Components (RSC)**. Contrairement aux approches traditionnelles où tout le JavaScript est envoyé au client, les RSC permettent d'exécuter la logique lourde directement sur le serveur.
### F.3 - Interface dynamique et UX
L'expérience utilisateur est au cœur du développement :
- **Flux de données et Server Actions** : Pour les mutations de données (comme le partage d'un mème ou l'ajout aux favoris), Memegoat utilise les **Server Actions**, simplifiant l'architecture en éliminant le besoin de définir manuellement des API routes dédiées.
- **Optimistic Updates** : Pour des actions comme la mise en favoris, l'interface réagit instantanément avant même la confirmation du serveur, renforçant la sensation de fluidité.
- **Streaming et Suspense** : L'utilisation de placeholders animés (**Skeletons**) pendant le chargement des contenus réduit la perception du temps d'attente.
### F.4 - SEO et Métadonnées avec Next.js
Memegoat est optimisé pour les moteurs de recherche :
- **Génération dynamique de métadonnées** : Chaque mème possède son propre titre, description et image OpenGraph générés dynamiquement via la fonction `generateMetadata`.
- **Données structurées (JSON-LD)** : Intégration de schémas (ImageObject, VideoObject) pour aider les moteurs de recherche à indexer le contenu de manière sémantique et favoriser l'apparition dans les "rich snippets".
### F.5 - Accessibilité et Design Inclusif (A11Y)
Le projet respecte les standards d'accessibilité :
- **Composants Radix UI / Shadcn** : Utilisation de primitives accessibles respectant les spécifications WAI-ARIA (Gestion du Focus Trap, Navigation Clavier).
- **Contraste et Navigation** : Respect des ratios de contraste WCAG et support complet de la navigation au clavier avec une gestion visible du focus.
- **Sémantique HTML** : Utilisation rigoureuse des balises sémantiques (`<header>`, `<main>`, `<section>`) pour faciliter la navigation des lecteurs d'écran.
## 4.6 Déploiement et Infrastructure
L'infrastructure de Memegoat est conçue pour être portable, scalable et sécurisée, s'appuyant sur les standards de l'industrie.
### Conteneurisation avec Docker et Docker Compose
L'intégralité de la stack technique est encapsulée dans des conteneurs **Docker**. Cette approche garantit que l'application s'exécute dans un environnement strictement identique, que ce soit sur le poste de développement ou sur le serveur de production. **Docker Compose** orchestre les différents services :
- L'API NestJS (Backend)
- L'application Next.js (Frontend)
- La base de données PostgreSQL
- Le cache Redis
- Le stockage d'objets MinIO (compatible S3)
### Reverse Proxy et Sécurité SSL (Caddy)
En façade, nous utilisons **Caddy** comme serveur web et reverse proxy. Contrairement à Nginx, Caddy gère nativement et automatiquement le renouvellement des certificats SSL via **Let's Encrypt**. Il est configuré pour imposer le protocole **TLS 1.3**, garantissant des échanges chiffrés au meilleur standard de sécurité actuel.
### Orchestration des services
L'isolation réseau est assurée par des réseaux Docker privés. Seul le proxy Caddy est exposé sur les ports 80 et 443. La communication entre le backend et la base de données ou le cache s'effectue sur un réseau interne, réduisant considérablement la surface d'attaque.
## 4.7 Écoconception et Accessibilité
Memegoat intègre des principes de sobriété numérique pour réduire son impact environnemental tout en améliorant l'expérience utilisateur.
### Stratégie d'Écoconception
Notre approche de "sobriété logicielle" se décline sur plusieurs plans :
- **Optimisation des médias** : Le transcodage systématique vers des formats modernes (**WebP**, **AVIF**) réduit le volume de données transférées de 30% à 70% par rapport au JPEG/PNG traditionnel.
- **Réduction du JavaScript** : L'utilisation des **React Server Components** permet de déplacer une grande partie du calcul vers le serveur, envoyant ainsi beaucoup moins de code au navigateur client, ce qui économise la batterie et les ressources des appareils mobiles.
- **Caching intelligent** : L'usage massif de **Redis** et du cache HTTP limite les cycles de calcul CPU redondants, réduisant ainsi la consommation énergétique globale de l'infrastructure.
### Accessibilité Numérique (RGAA)
L'inclusion est au cœur du développement. Memegoat suit les recommandations du **RGAA** :
- **Sémantique HTML** : Utilisation rigoureuse des balises sémantiques pour faciliter la navigation des lecteurs d'écran.
- **Navigation Clavier** : Grâce à **Radix UI**, tous les éléments interactifs sont entièrement accessibles au clavier avec une gestion visible du focus.
- **Contrastes et Lisibilité** : La charte graphique a été testée pour garantir un rapport de contraste suffisant, et la police **Ubuntu Sans** assure un confort de lecture optimal.
# 5. Respect de la réglementation (RGPD)
### Registre des traitements
L'application tient à jour un registre des traitements limitant la collecte aux données strictement nécessaires au fonctionnement du service :
- **Utilisateur** : Pseudonyme, Email (chiffré PGP), Mot de passe (haché Argon2id).
- **Médias** : Mèmes et GIFs téléversés, métadonnées associées.
- **Sécurité** : Logs d'audit (actions sensibles), Sessions (chiffrées).
### Droits des personnes
Memegoat intègre nativement des mécanismes pour répondre aux sollicitations des utilisateurs :
- **Droit d'accès et portabilité** : Possibilité d'exporter l'intégralité des données rattachées à un compte via un service dédié (`exportUserData`).
- **Droit à l'effacement (Droit à l'oubli)** : Implémentation du **Soft Delete** permettant une suppression logique immédiate pour l'utilisateur, suivie d'une purge physique automatisée après 30 jours par le `PurgeService`. Ce délai permet de prévenir les suppressions accidentelles et de conserver les preuves nécessaires en cas de litige ou de réquisition judiciaire.
- **Droit d'opposition et de rectification** : Interface de gestion de compte permettant la mise à jour ou la suppression des informations personnelles à tout moment.
- **Information des utilisateurs** : Une politique de confidentialité claire est accessible, détaillant la finalité des traitements et la durée de conservation des données.
### Sécurité par défaut (Privacy by Design)
- **Minimisation des données** : Seules les informations essentielles sont conservées.
- **Chiffrement systématique** : Les données identifiables (PII) sont chiffrées dès leur réception et avant stockage en base de données.
- **Transparence** : Information claire de l'utilisateur sur l'usage de ses données lors de l'inscription.
# 6. Conclusion
Memegoat démontre qu'il est possible d'allier une thématique ludique à une exigence technique et sécuritaire de haut niveau. Ce projet a permis de maîtriser l'ensemble du cycle de développement d'une application moderne, de la conception UI/UX au déploiement orchestré, tout en intégrant des technologies de pointe en cryptographie.
### Remerciements
Je tiens à remercier l'équipe pédagogique pour son accompagnement tout au long de cette formation, ainsi que mes pairs pour leurs retours constructifs durant la phase de développement.
# 7. Annexes
### Annexe 1 - Schéma de classe POO du backend
Le schéma suivant représente l'architecture logicielle du backend NestJS, mettant en évidence la modularité du système et les relations entre les contrôleurs, services et repositories.
![Diagramme de classes Backend](./backend.plantuml)
*Note : Le diagramme complet est disponible au format PlantUML dans le fichier `backend.plantuml` à la racine du projet.*
### Annexe 2 - Sources et ressources
- [Documentation NestJS](https://docs.nestjs.com/)
- [Documentation Next.js](https://nextjs.org/docs)
- [Guide de sécurité OWASP](https://owasp.org/www-project-top-ten/)
- [Standard NIST Post-Quantum (ML-KEM)](https://csrc.nist.gov/pubs/fips/203/final)
- [Référentiel Général d'Accessibilité (RGAA)](https://www.numerique.gouv.fr/publications/rgaa-accessibilite/)
### Annexe 3 - Glossaire technique
* **A11Y (Accessibilité) :**
* **Définition :** Contraction du mot "Accessibility" (11 lettres entre le A et le Y).
* **Explication :** Désigne l'ensemble des pratiques visant à rendre les services numériques utilisables par tous, y compris les personnes en situation de handicap (visuel, moteur, auditif, etc.). Dans Memegoat, cela se traduit par l'utilisation de composants sémantiques et le respect des normes WCAG.
* **ANSSI (Agence Nationale de la Sécurité des Systèmes d'Information) :**
* **Définition :** Autorité nationale française en matière de cybersécurité.
* **Explication :** Memegoat suit les recommandations de l'ANSSI pour le choix des algorithmes de hachage (Argon2id) et la configuration des protocoles TLS afin de garantir un niveau de sécurité étatique.
* **API (Interface de Programmation d'Application) :**
* **Définition :** Ensemble de règles et de protocoles permettant à deux logiciels de communiquer entre eux.
* **Explication :** Dans ce projet, l'API NestJS sert de pont entre le frontend (Next.js) et les données stockées en base. Elle expose des points d'accès (endpoints) sécurisés pour récupérer ou modifier les mèmes et les profils utilisateurs.
* **Argon2id :**
* **Définition :** Algorithme de hachage de mots de passe, vainqueur de la Password Hashing Competition.
* **Explication :** Contrairement aux méthodes anciennes (MD5, SHA1), Argon2id est conçu pour être extrêmement résistant aux attaques par force brute et par GPU, en utilisant des paramètres de mémoire et de temps configurables. C'est le standard recommandé par l'ANSSI.
* **Biome :**
* **Définition :** Chaîne d'outils (toolchain) ultra-rapide pour le web.
* **Explication :** Il remplace ESLint et Prettier pour assurer le formatage et le linting du code. Son utilisation garantit une base de code propre, homogène et performante, tout en accélérant le workflow de développement.
* **Blind Indexing (Indexation Aveugle) :**
* **Définition :** Technique permettant de rechercher des données chiffrées sans les déchiffrer.
* **Explication :** Utilisé pour l'unicité des emails. On stocke un hash de l'email à côté de l'email chiffré PGP. Cela permet de vérifier si un email existe déjà en base sans avoir à déchiffrer tous les emails de la table.
* **CSP (Content Security Policy) :**
* **Définition :** Couche de sécurité supplémentaire qui aide à détecter et atténuer certains types d'attaques, comme le XSS.
* **Explication :** En définissant quelles sources de contenu (scripts, images) sont autorisées, Memegoat empêche l'exécution de code malveillant injecté par un tiers.
* **Docker :**
* **Définition :** Plateforme permettant de lancer des applications dans des conteneurs isolés.
* **Explication :** Docker permet d'empaqueter l'application avec toutes ses dépendances. Cela garantit que le projet fonctionnera de la même manière sur l'ordinateur du développeur, sur le serveur de test et en production.
* **Drizzle ORM :**
* **Définition :** "Object-Relational Mapping" moderne et léger pour TypeScript.
* **Explication :** Il permet d'interagir avec la base de données PostgreSQL en utilisant du code TypeScript typé. Contrairement à d'autres ORM plus lourds, Drizzle reste très proche du SQL natif, offrant ainsi de meilleures performances et une plus grande transparence.
* **JWT (JSON Web Token) :**
* **Définition :** Standard ouvert pour la création de jetons d'accès.
* **Explication :** Utilisé pour l'authentification, il permet de vérifier l'identité d'un utilisateur sans avoir à interroger la base de données à chaque requête. Memegoat utilise des jetons signés avec une rotation des "Refresh Tokens" pour une sécurité accrue.
* **JSON-LD :**
* **Définition :** JavaScript Object Notation for Linked Data.
* **Explication :** Format de données structurées utilisé pour annoter les pages web. Il permet aux moteurs de recherche de mieux comprendre le contenu (mèmes, auteurs, dates) et d'afficher des résultats enrichis (Rich Snippets) dans les pages de résultats.
* **ML-KEM (Kyber) :**
* **Définition :** Algorithme de mécanisme d'établissement de clé (KEM) résistant aux ordinateurs quantiques.
* **Explication :** Intégré de manière expérimentale, cet algorithme assure que les échanges de clés restent sécurisés même si un attaquant dispose d'un ordinateur quantique futur capable de casser les chiffrements traditionnels (RSA, ECC).
* **MFA (Multi-Factor Authentication) :**
* **Définition :** Méthode d'authentification nécessitant au moins deux preuves d'identité.
* **Explication :** Dans Memegoat, l'utilisateur doit fournir son mot de passe ET un code temporaire (TOTP) généré par une application mobile, doublant ainsi la protection du compte.
* **PGP (Pretty Good Privacy) :**
* **Définition :** Programme de chiffrement et de déchiffrement de données asymétrique.
* **Explication :** Utilisé pour chiffrer les données sensibles (comme les emails) directement dans la base de données. Même en cas de fuite de la base, les données restent illisibles sans la clé privée correspondante.
* **RBAC (Role-Based Access Control) :**
* **Définition :** Système de gestion des accès basé sur des rôles.
* **Explication :** Permet de définir précisément qui peut faire quoi (ex: un utilisateur peut poster, un modérateur peut supprimer n'importe quel post, un administrateur peut gérer les comptes).
* **S3 (MinIO) :**
* **Définition :** Protocole de stockage d'objets (Simple Storage Service).
* **Explication :** MinIO est une alternative open-source compatible avec Amazon S3. Il est utilisé pour stocker les fichiers médias (mèmes, GIFs) de manière performante et scalable, séparément de la base de données.
* **SSR / SSG (Next.js) :**
* **Définition :** Server-Side Rendering (rendu côté serveur) et Static Site Generation (génération de site statique).
* **Explication :** Ces techniques permettent de pré-rendre les pages HTML. Cela améliore considérablement le SEO et la vitesse de chargement initiale pour l'utilisateur.
* **NestJS :**
* **Définition :** Framework Node.js progressif pour la construction d'applications côté serveur efficaces et évolutives.
* **Explication :** Utilisé pour le backend de Memegoat, il offre une architecture modulaire et un support natif de TypeScript, ce qui facilite grandement la maintenance et le test des différents services (authentification, gestion des médias, etc.).
* **Next.js :**
* **Définition :** Framework React pour le développement web.
* **Explication :** Choisi pour le frontend, il permet de bénéficier du rendu hybride (SSR/SSG), optimisant ainsi les performances et le référencement naturel (SEO) de la plateforme.
* **TypeScript :**
* **Définition :** Sur-ensemble typé de JavaScript.
* **Explication :** Utilisé sur l'ensemble du projet (frontend et backend), il permet de détecter les erreurs dès la phase de développement grâce à un typage statique rigoureux, améliorant ainsi la robustesse globale du code.
* **WAI-ARIA :**
* **Définition :** Web Accessibility Initiative - Accessible Rich Internet Applications.
* **Explication :** Ensemble de spécifications techniques qui définissent des moyens de rendre le contenu Web et les applications Web plus accessibles, notamment pour les personnes handicapées utilisant des technologies d'assistance comme les lecteurs d'écran.
* **Zod :**
* **Définition :** Bibliothèque de déclaration et de validation de schéma TypeScript.
* **Explication :** Elle est utilisée pour valider toutes les données entrant dans l'application (formulaires, requêtes API). Si les données ne correspondent pas au schéma attendu, elles sont rejetées immédiatement, évitant ainsi des erreurs ou des failles de sécurité.
### Annexe 4 - Licences et bibliothèques
Le projet Memegoat repose exclusivement sur des technologies Open-Source respectueuses de la liberté logicielle.
#### Frameworks et Coeur du système
- **NestJS** : Licence MIT.
- **Next.js** : Licence MIT.
- **React** : Licence MIT.
- **TypeScript** : Licence Apache 2.0.
#### Gestion des données et Sécurité
- **PostgreSQL** : Licence PostgreSQL (type BSD/MIT).
- **Drizzle ORM** : Licence Apache 2.0.
- **Redis** : Licence BSD 3-Clause.
- **Argon2 (node-rs)** : Licence MIT.
- **Jose (JWT)** : Licence MIT.
- **@noble/post-quantum** : Licence MIT.
#### Interface et Expérience Utilisateur
- **Tailwind CSS** : Licence MIT.
- **Radix UI / Shadcn UI** : Licence MIT.
- **Lucide React (Icônes)** : Licence ISC.
#### Traitement Média et Utilitaires
- **Sharp** : Licence Apache 2.0.
- **FFmpeg** : Licence LGPL / GPL (utilisé via wrapper fluent-ffmpeg).
- **ClamAV** : Licence GPL.
- **MinIO** : Licence GNU AGPL v3.

View File

@@ -1,6 +1,6 @@
{ {
"name": "@memegoat/frontend", "name": "@memegoat/frontend",
"version": "1.4.1", "version": "1.5.6",
"private": true, "private": true,
"scripts": { "scripts": {
"dev": "next dev", "dev": "next dev",

View File

@@ -42,7 +42,7 @@ import type { Category } from "@/types/content";
const uploadSchema = z.object({ const uploadSchema = z.object({
title: z.string().min(3, "Le titre doit faire au moins 3 caractères"), title: z.string().min(3, "Le titre doit faire au moins 3 caractères"),
type: z.enum(["meme", "gif"]), type: z.enum(["meme", "gif", "video"]),
categoryId: z.string().optional(), categoryId: z.string().optional(),
tags: z.string().optional(), tags: z.string().optional(),
}); });
@@ -112,6 +112,16 @@ export default function UploadPage() {
return; return;
} }
setFile(selectedFile); setFile(selectedFile);
// Auto-détection du type
if (selectedFile.type === "image/gif") {
form.setValue("type", "gif");
} else if (selectedFile.type.startsWith("video/")) {
form.setValue("type", "video");
} else {
form.setValue("type", "meme");
}
const reader = new FileReader(); const reader = new FileReader();
reader.onloadend = () => { reader.onloadend = () => {
setPreview(reader.result as string); setPreview(reader.result as string);
@@ -182,7 +192,7 @@ export default function UploadPage() {
<Form {...form}> <Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6"> <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
<div className="space-y-4"> <div className="space-y-4">
<FormLabel>Fichier (Image ou GIF)</FormLabel> <FormLabel>Fichier (Image, GIF ou Vidéo)</FormLabel>
{!preview ? ( {!preview ? (
<button <button
type="button" type="button"
@@ -194,25 +204,31 @@ export default function UploadPage() {
</div> </div>
<p className="font-medium">Cliquez pour choisir un fichier</p> <p className="font-medium">Cliquez pour choisir un fichier</p>
<p className="text-xs text-muted-foreground mt-1"> <p className="text-xs text-muted-foreground mt-1">
PNG, JPG ou GIF jusqu'à 10Mo PNG, JPG, GIF, MP4 ou MOV jusqu'à 10Mo
</p> </p>
<input <input
id="file-upload" id="file-upload"
type="file" type="file"
className="hidden" className="hidden"
accept="image/*,.gif" accept="image/*,video/mp4,video/webm,video/quicktime,.gif"
onChange={handleFileChange} onChange={handleFileChange}
/> />
</button> </button>
) : ( ) : (
<div className="relative rounded-lg overflow-hidden border bg-zinc-100 dark:bg-zinc-800"> <div className="relative rounded-lg overflow-hidden border bg-zinc-100 dark:bg-zinc-800">
<div className="relative h-[400px] w-full"> <div className="relative h-[400px] w-full flex items-center justify-center">
{file?.type.startsWith("video/") ? (
<video src={preview} controls className="max-h-full max-w-full">
<track kind="captions" />
</video>
) : (
<NextImage <NextImage
src={preview} src={preview}
alt="Preview" alt="Preview"
fill fill
className="object-contain" className="object-contain"
/> />
)}
</div> </div>
<Button <Button
type="button" type="button"
@@ -260,6 +276,7 @@ export default function UploadPage() {
<SelectContent> <SelectContent>
<SelectItem value="meme">Image fixe</SelectItem> <SelectItem value="meme">Image fixe</SelectItem>
<SelectItem value="gif">GIF Animé</SelectItem> <SelectItem value="gif">GIF Animé</SelectItem>
<SelectItem value="video">Vidéo</SelectItem>
</SelectContent> </SelectContent>
</Select> </Select>
<FormMessage /> <FormMessage />

View File

@@ -158,7 +158,7 @@ export function ContentCard({ content, onUpdate }: ContentCardProps) {
</DropdownMenu> </DropdownMenu>
</div> </div>
</CardHeader> </CardHeader>
<CardContent className="p-0 relative bg-zinc-200 dark:bg-zinc-900 aspect-square sm:aspect-video md:aspect-square flex items-center justify-center"> <CardContent className="p-0 relative bg-zinc-200 dark:bg-zinc-900 aspect-square flex items-center justify-center">
<Link href={`/meme/${content.slug}`} className="w-full h-full relative"> <Link href={`/meme/${content.slug}`} className="w-full h-full relative">
{content.mimeType.startsWith("image/") ? ( {content.mimeType.startsWith("image/") ? (
<Image <Image

View File

@@ -68,9 +68,9 @@ export function ContentList({ fetchFn, title }: ContentListProps) {
}); });
return ( return (
<div className="max-w-2xl mx-auto py-8 px-4 space-y-8"> <div className="max-w-7xl mx-auto py-8 px-4 space-y-8">
{title && <h1 className="text-2xl font-bold">{title}</h1>} {title && <h1 className="text-2xl font-bold">{title}</h1>}
<div className="flex flex-col gap-6"> <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
{contents.map((content) => ( {contents.map((content) => (
<ContentCard key={content.id} content={content} onUpdate={fetchInitial} /> <ContentCard key={content.id} content={content} onUpdate={fetchInitial} />
))} ))}

View File

@@ -7,7 +7,7 @@ export interface Content {
description?: string; description?: string;
url: string; url: string;
thumbnailUrl?: string; thumbnailUrl?: string;
type: "meme" | "gif"; type: "meme" | "gif" | "video";
mimeType: string; mimeType: string;
size: number; size: number;
width?: number; width?: number;

View File

@@ -1,6 +1,6 @@
{ {
"name": "@memegoat/source", "name": "@memegoat/source",
"version": "1.4.1", "version": "1.5.6",
"description": "", "description": "",
"scripts": { "scripts": {
"version:get": "cmake -P version.cmake GET", "version:get": "cmake -P version.cmake GET",