Table des matières

Outils Frontend / Backend
Frontend vs Backend — Aperçu comparatif
Schéma pipeline (vue d’ensemble)
Pile de référence Next.js + Node.js

Outils Frontend / Backend

Les outils que j’ai utilisés au cours de mes missions professionnelles apparaissent en bleu. Ceux que j’ai explorés dans mes projets personnels, ce portfolio ou dans le cadre de mon autoformation sont indiqués en orange. Cette liste n’est pas exhaustive et évoluera au fil de mes prochaines missions.

Planification & Gestion de projet

Agile / Scrum / Kanban boards : Jira, Trello, YouTrack, Azure DevOps, GitHub Projects, Linear
Documentation / knowledge base : Confluence, Notion, Obsidian, GitBook, Docusaurus
Communication : Slack, Discord, Teams, Mattermost

Conception & Design

Wireframes / UI Design : Figma, Sketch, Adobe XD, InVision
Prototypage UX : MarvelApp, Framer
Design System : Storybook, Chromatic, Zeroheight

Gestion de code source

VCS : Git (GitHub, GitLab, Bitbucket, Azure Repos)
Branching strategies : GitFlow, trunk-based, feature branching
Code hosting / PR review : GitHub, GitLab, Bitbucket

Développement Frontend

Langages & frameworks : HTML5, CSS3, JavaScript / TypeScript
Frameworks : React, Vue, Angular, Next.js, Nuxt.js, Svelte
Build & Bundlers : Vite, Webpack, Rollup, Parcel, esbuild
CSS Tools : TailwindCSS, Sass/SCSS, PostCSS, CSS Modules, Styled Components
Linting / Formatting : ESLint, Prettier, Stylelint
UI Testing tools : React Testing Library, Cypress Component Testing, Storybook tests

Développement Backend

Langages & frameworks : Node.js, Java, Python, Ruby, Go, Rust, PHP, .NET, C++, Elixir
ORM / Database clients : Prisma, Sequelize, TypeORM, Doctrine, Hibernate, Mongoose
Databases : PostgreSQL, MySQL/MariaDB, MongoDB, Redis, Elasticsearch, Cassandra
API layer : REST, GraphQL (Apollo, Yoga), gRPC
Authentication / Authz : Passport.js, Keycloak, Auth0, Firebase Auth, Ory Kratos
Configuration / Env management : dotenv, Vault, Doppler

Développement Mobile

Native: Android (Kotlin, Jetpack Compose), iOS (Swift, SwiftUI)
Cross‑platform : React Native, Flutter, Kotlin Multiplatform Mobile, Capacitor/Ionic
IDE & Tooling : Android Studio, Xcode, Gradle, CocoaPods, Swift Package Manager, Expo CLI, Fastlane
State & Data : Redux, MobX, Zustand, Riverpod/Bloc, Room/SQLite, Core Data/Realm, MMKV/Secure Storage
Réseau & API : Axios/Fetch, Retrofit/OkHttp, Alamofire/URLSession, GraphQL, gRPC
Tests unitaires : XCTest, JUnit, Jest, Dart test
Tests UI/E2E : XCUITest, Espresso, Detox, Flutter Driver/Integration Test
Tests Device farms : Firebase Test Lab, BrowserStack App Live, AWS Device Farm
Distribution & CI/CD : TestFlight, App Store Connect, Google Play Console, Fastlane (match, gym, pilot, supply), Bitrise, Codemagic, GitHub Actions
Crash & Analytics : Firebase Crashlytics, Sentry, Bugsnag, Firebase Analytics, Amplitude
Notifications & OTA : APNs (Apple), FCM, OneSignal, Expo Notifications, CodePush/Expo Updates
Performance & Profiling : Xcode Instruments, Android Profiler, Flipper, Dart DevTools
Sécurité : Keychain, Keystore, App Attest/DeviceCheck, Obfuscation (ProGuard/R8), SSL pinning

Qualité & Tests

Unit tests : Jest, Mocha, Vitest, Ava, JUnit, NUnit, PyTest
Integration / API tests : Supertest, Cypress (API mode), Playwright, Postman/Newman, Karate
E2E tests : Cypress, Playwright, TestCafe, Selenium, Puppeteer
Contract tests : Pact
Load / perf tests : k6, Locust, Gatling, Artillery
Static analysis / security : SonarQube, ESLint rules, Bandit, Brakeman, Snyk, Dependabot

CI/CD

CI servers : GitHub Actions GitLab CI, Jenkins, CircleCI, Travis CI, Azure Pipelines
Build & test automation : make, npm/yarn/pnpm scripts, Gradle, Maven
Artifact repository : Nexus, JFrog Artifactory, GitHub Packages

Conteneurisation & Infrastructure

Containers : Docker, Podman
Orchestration : Kubernetes, Docker Swarm, Nomad
IaC (Infrastructure as Code) : Terraform, Pulumi, Ansible, Chef, Puppet, AWS CDK
Cloud Providers : AWS, GCP, Azure, DigitalOcean, OVH

Monitoring, Observabilité & Logging

Metrics & dashboards : Prometheus, Grafana, Datadog, New Relic
Logging : ELK Stack (Elasticsearch, Logstash, Kibana), Loki, Fluentd
Tracing : OpenTelemetry, Jaeger, Zipkin
Error tracking : Sentry, Rollbar, Bugsnag

Sécurité

Secrets management : HashiCorp Vault, AWS Secrets Manager, Doppler
Dependency scanning : Snyk, Dependabot, OWASP Dependency-Check
SAST/DAST : SonarQube, Checkmarx, OWASP ZAP
Container security : Trivy, Anchore

Déploiement

Strategies : Blue/Green, Canary, Feature Flags
Feature Flags tools : LaunchDarkly, Unleash, ConfigCat
CDN & Edge : Cloudflare, Akamai, Netlify Edge, Vercel Edge Functions

Collaboration & Feedback

Code review : GitHub/GitLab merge requests, Reviewable, Gerrit
Pair/Mob Programming : Visual Studio Live Share, Code With Me (JetBrains)
Feedback utilisateur : Hotjar, FullStory, Amplitude

Frontend vs Backend — Aperçu comparatif

Ce tableau compare les principaux outils, frameworks et technologies utilisés côté frontend et backend.

Catégorie	Frontend	Backend
Languages	HTML5, CSS3, JavaScript, TypeScript	Node.js, Java, Python, Ruby, Go, Rust, PHP, .NET, C++, Elixir
Main Frameworks	React, Vue, Angular, Next.js, Nuxt.js, Svelte	Express, NestJS, Fastify, Django, Flask, Spring Boot, Laravel
Outils de build	Vite, Webpack, Rollup, Parcel, esbuild	npm, Yarn, pnpm, Maven, Gradle
Styles / UI	TailwindCSS, Sass/SCSS, PostCSS, Styled Components, CSS Modules	Moteurs de templates (EJS, Handlebars), Rendu côté serveur (SSR)
Routage	React Router, Next.js Router, Vue Router	Express Router, Routes Fastify, URLs Django, Mapping Spring
Gestion d’état	Redux, Zustand, Pinia, Vuex	ORM & persistance, Prisma, TypeORM, Sequelize
APIs / Data Fetching	Fetch, Axios, SWR, React Query, Clients GraphQL	REST, GraphQL (Apollo, Yoga), gRPC, WebSocket
Tests	Jest, Mocha, Vitest, Cypress, Playwright, RTL	Jest, Mocha, Supertest, PyTest, JUnit, Postman/Newman
Lint & formatage	ESLint, Prettier, Stylelint	ESLint, Pylint, Checkstyle, Black
CI/CD	GitHub Actions, GitLab CI, Vercel, Netlify	GitHub Actions, Jenkins, GitLab CI, Docker, Kubernetes
Bases de données	IndexedDB, Firebase, Supabase	PostgreSQL, MySQL/MariaDB, MongoDB, Redis, Elasticsearch
Sécurité	CSP, HTTPS, Auth Guards, Sanitization	JWT, OAuth2, Passport.js, Keycloak, Auth0
Cache	localStorage, Service Workers	Redis, Memcached, cache CDN edge
Observabilité	Browser DevTools, Lighthouse, Sentry (FE)	Prometheus, Grafana, Sentry (BE), Datadog
Hébergement / Déploiement	Vercel, Netlify, Cloudflare Pages	AWS, GCP, Azure, Docker Swarm, Kubernetes
Gestionnaires de paquets	npm, Yarn, pnpm	npm, Yarn, pip, Maven, Gradle
Infra as Code	(souvent N/A côté FE)	Terraform, Pulumi, Ansible, AWS CDK
Authentification	Firebase Auth, OAuth côté FE	Auth0, Keycloak, Passport.js, Ory Kratos
Performance	Lighthouse, Web Vitals, Bundle Analyzer	APM, Profiler, Tests de charge (k6, Gatling)

Schéma pipeline (vue d’ensemble)

De l’idéation à l’exploitation : une chaîne cohérente outillant chaque étape du cycle de vie.

Idéation & Planification
  └── Outils: Jira • Linear • GitHub Projects • Notion • Confluence
        ↓
Conception & Prototypage
  └── Outils: Figma • Storybook • Chromatic • Zeroheight
        ↓
Gestion de code & Revues
  └── Outils: Git • GitHub/GitLab/Bitbucket • Conventional Commits
        ↓
Qualité locale (Dev)
  ├── Frontend: TypeScript • ESLint • Prettier • Stylelint • Vitest/Jest • Storybook
  └── Backend : TypeScript • Jest/Vitest • Supertest • OpenAPI/Swagger • Spectral
        ↓
Build & Packaging
  ├── Frontend: Vite/Webpack/Rollup • esbuild/SWC • Tailwind/PostCSS • npm/pnpm/yarn
  └── Backend : tsup/esbuild/SWC • npm/pnpm/yarn • Prisma generate
        ↓
Tests automatisés (CI)
  ├── Unit/Intégration: Jest • Vitest • PyTest • JUnit
  ├── E2E/UI: Playwright • Cypress
  ├── Contrats: Pact
  └── Sécu/Static: SonarQube • Snyk • Trivy • OWASP ZAP
        ↓
CI/CD
  └── GitHub Actions • GitLab CI • Jenkins • Caching • Artifacts • release-please
        ↓
Conteneurs & Infra
  └── Docker/Podman • Kubernetes • Helm • Terraform/Pulumi • Vault/Doppler
        ↓
Déploiement & Livraison
  ├── Web/SSR: Vercel • Netlify • Cloudflare • Fly.io • AWS/GCP/Azure
  ├── Stratégies: Blue/Green • Canary • Feature Flags (Unleash/LaunchDarkly)
  └── CDN & Edge: Cloudflare • Fastly • Akamai
        ↓
Observabilité & Feedback
  ├── Logs/Metrics/Tracing: ELK/Loki • Prometheus • Grafana • OpenTelemetry • Jaeger
  ├── Erreurs: Sentry • Rollbar • Bugsnag
  └── Produit/UX: Hotjar • FullStory • Amplitude • PostHog

Conseils : démarrez tôt la CI, factorisez les configs (monorepo), versionnez l’infra (IaC), et ajoutez la télémétrie dès le MVP.

Pile de référence Next.js + Node.js

Objectif : une base moderne, maintenable et mesurable pour des apps web SSR/SPA avec API Node.

Frontend (Next.js 15)

Framework : Next.js (App Router, RSC, images, i18n)
Langage : TypeScript (strict)
Styles : TailwindCSS + PostCSS, design system léger
Qualité : ESLint + Prettier, Husky + lint-staged
Tests : Vitest + React Testing Library (unitaires), Playwright (E2E), Storybook (docs UI)

Backend (Node.js)

Serveur : Fastify ou NestJS
Validation : Zod (DTO/schéma) ou class-validator (Nest)
Persistance : Prisma + PostgreSQL (migrations, seed)
API : REST (Fastify/Nest) + OpenAPI, option tRPC si mono‑repo full‑TS
Tests : Jest/Vitest (unitaires), Supertest (API)

Sécurité

Dépendances : Renovate/Dependabot + Snyk
Conteneurs : Trivy (scan), base distroless
Secrets : Doppler ou HashiCorp Vault (jamais dans le repo)
Audit : OWASP ZAP (CI), GitLeaks (secrets), headers CSP sur FE

CI/CD (GitHub Actions)

Pipelines : build → lint → tests unitaires → E2E (Playwright) → scan (Snyk/Trivy) → build image → push registry → déploiement
Versions : release-please (SemVer, changelog, tags)
Caches : pnpm, Playwright, Prisma

Infra & Déploiement

Conteneurs : Docker multi‑stage
Orchestration : Kubernetes (+ Helm) ou Fly.io/Render/Railway selon taille
IaC : Terraform/Pulumi (DNS/CDN, DB, secrets)
Edge/CDN : Cloudflare (DNS, cache, WAF)
Hébergement : FE → Vercel / Cloudflare Pages, BE → K8s/Fly.io/Render

Observabilité

Traçage : OpenTelemetry SDK (FE/BE) → Jaeger/Tempo
Logs : Loki (ou ELK)
Metrics : Prometheus + Grafana
Erreurs : Sentry (front & back)

Feature Flags

Unleash (self‑host) ou LaunchDarkly (SaaS)

Exemple d’architecture

[Client] ⇄ [Next.js FE] ───► [API Gateway/Ingress]
                 │                │
                 │                ├─► [Node.js (Fastify/Nest)] ─► [Prisma] ─► [PostgreSQL]
                 │                └─► [Static/Assets/CDN]
                 └─► [Sentry] / [OTel SDK] ─► [Jaeger/Tempo • Loki • Prometheus]
                             CI/CD: GitHub Actions → Docker Registry → (Vercel | K8s | Fly.io)

Avant-propos

Développement Frontend

Langages & frameworks : HTML5, CSS3, JavaScript / TypeScript

Frameworks : React, Vue, Angular, Next.js, Nuxt.js, Svelte

Build & Bundlers : Vite, Webpack, Rollup, Parcel, esbuild

CSS Tools : TailwindCSS, Sass/SCSS, PostCSS, CSS Modules, Styled Components

Linting / Formatting : ESLint, Prettier, Stylelint

UI Testing tools : React Testing Library, Cypress Component Testing, Storybook tests

Développement Backend

Langages & frameworks : Node.js, Java, Python, Ruby, Go, Rust, PHP, .NET, C++, Elixir

ORM / Database clients : Prisma, Sequelize, TypeORM, Doctrine, Hibernate, Mongoose

Databases : PostgreSQL, MySQL/MariaDB, MongoDB, Redis, Elasticsearch, Cassandra

API layer : REST, GraphQL (Apollo, Yoga), gRPC

Authentication / Authz : Passport.js, Keycloak, Auth0, Firebase Auth, Ory Kratos

Configuration / Env management : dotenv, Vault, Doppler

Développement Mobile

Native: Android (Kotlin, Jetpack Compose), iOS (Swift, SwiftUI)

Cross‑platform : React Native, Flutter, Kotlin Multiplatform Mobile, Capacitor/Ionic

IDE & Tooling : Android Studio, Xcode, Gradle, CocoaPods, Swift Package Manager, Expo CLI, Fastlane

State & Data : Redux, MobX, Zustand, Riverpod/Bloc, Room/SQLite, Core Data/Realm, MMKV/Secure Storage

Réseau & API : Axios/Fetch, Retrofit/OkHttp, Alamofire/URLSession, GraphQL, gRPC

Tests unitaires : XCTest, JUnit, Jest, Dart test

Tests UI/E2E : XCUITest, Espresso, Detox, Flutter Driver/Integration Test

Tests Device farms : Firebase Test Lab, BrowserStack App Live, AWS Device Farm

Distribution & CI/CD : TestFlight, App Store Connect, Google Play Console, Fastlane (match, gym, pilot, supply), Bitrise, Codemagic, GitHub Actions

Crash & Analytics : Firebase Crashlytics, Sentry, Bugsnag, Firebase Analytics, Amplitude

Notifications & OTA : APNs (Apple), FCM, OneSignal, Expo Notifications, CodePush/Expo Updates

Performance & Profiling : Xcode Instruments, Android Profiler, Flipper, Dart DevTools

Sécurité : Keychain, Keystore, App Attest/DeviceCheck, Obfuscation (ProGuard/R8), SSL pinning

Qualité & Tests

Unit tests : Jest, Mocha, Vitest, Ava, JUnit, NUnit, PyTest

Integration / API tests : Supertest, Cypress (API mode), Playwright, Postman/Newman, Karate

E2E tests : Cypress, Playwright, TestCafe, Selenium, Puppeteer

Contract tests : Pact

Load / perf tests : k6, Locust, Gatling, Artillery

Static analysis / security : SonarQube, ESLint rules, Bandit, Brakeman, Snyk, Dependabot

Frontend vs Backend — Aperçu comparatif

Ce tableau compare les principaux outils, frameworks et technologies utilisés côté frontend et backend.

Catégorie

Frontend

Backend

Languages

HTML5, CSS3, JavaScript, TypeScript

Node.js, Java, Python, Ruby, Go, Rust, PHP, .NET, C++, Elixir

Main Frameworks

React, Vue, Angular, Next.js, Nuxt.js, Svelte

Express, NestJS, Fastify, Django, Flask, Spring Boot, Laravel

Outils de build

Vite, Webpack, Rollup, Parcel, esbuild

npm, Yarn, pnpm, Maven, Gradle

Styles / UI

TailwindCSS, Sass/SCSS, PostCSS, Styled Components, CSS Modules

Moteurs de templates (EJS, Handlebars), Rendu côté serveur (SSR)

Routage

React Router, Next.js Router, Vue Router

Express Router, Routes Fastify, URLs Django, Mapping Spring

Gestion d’état

Redux, Zustand, Pinia, Vuex

ORM & persistance, Prisma, TypeORM, Sequelize

APIs / Data Fetching

Fetch, Axios, SWR, React Query, Clients GraphQL

REST, GraphQL (Apollo, Yoga), gRPC, WebSocket

Tests

Jest, Mocha, Vitest, Cypress, Playwright, RTL

Jest, Mocha, Supertest, PyTest, JUnit, Postman/Newman

Lint & formatage

ESLint, Prettier, Stylelint

ESLint, Pylint, Checkstyle, Black

CI/CD

GitHub Actions, GitLab CI, Vercel, Netlify

GitHub Actions, Jenkins, GitLab CI, Docker, Kubernetes

Bases de données

IndexedDB, Firebase, Supabase

PostgreSQL, MySQL/MariaDB, MongoDB, Redis, Elasticsearch

Sécurité

CSP, HTTPS, Auth Guards, Sanitization

JWT, OAuth2, Passport.js, Keycloak, Auth0

Cache

localStorage, Service Workers

Redis, Memcached, cache CDN edge

Observabilité

Browser DevTools, Lighthouse, Sentry (FE)

Prometheus, Grafana, Sentry (BE), Datadog

Hébergement / Déploiement

Vercel, Netlify, Cloudflare Pages

AWS, GCP, Azure, Docker Swarm, Kubernetes

Gestionnaires de paquets

npm, Yarn, pnpm

npm, Yarn, pip, Maven, Gradle

Infra as Code

(souvent N/A côté FE)

Terraform, Pulumi, Ansible, AWS CDK

Authentification

Firebase Auth, OAuth côté FE

Auth0, Keycloak, Passport.js, Ory Kratos

Performance

Lighthouse, Web Vitals, Bundle Analyzer

APM, Profiler, Tests de charge (k6, Gatling)

Schéma pipeline (vue d’ensemble)

De l’idéation à l’exploitation : une chaîne cohérente outillant chaque étape du cycle de vie.

Idéation & Planification └── Outils: Jira • Linear • GitHub Projects • Notion • Confluence ↓ Conception & Prototypage └── Outils: Figma • Storybook • Chromatic • Zeroheight ↓ Gestion de code & Revues └── Outils: Git • GitHub/GitLab/Bitbucket • Conventional Commits ↓ Qualité locale (Dev) ├── Frontend: TypeScript • ESLint • Prettier • Stylelint • Vitest/Jest • Storybook └── Backend : TypeScript • Jest/Vitest • Supertest • OpenAPI/Swagger • Spectral ↓ Build & Packaging ├── Frontend: Vite/Webpack/Rollup • esbuild/SWC • Tailwind/PostCSS • npm/pnpm/yarn └── Backend : tsup/esbuild/SWC • npm/pnpm/yarn • Prisma generate ↓ Tests automatisés (CI) ├── Unit/Intégration: Jest • Vitest • PyTest • JUnit ├── E2E/UI: Playwright • Cypress ├── Contrats: Pact └── Sécu/Static: SonarQube • Snyk • Trivy • OWASP ZAP ↓ CI/CD └── GitHub Actions • GitLab CI • Jenkins • Caching • Artifacts • release-please ↓ Conteneurs & Infra └── Docker/Podman • Kubernetes • Helm • Terraform/Pulumi • Vault/Doppler ↓ Déploiement & Livraison ├── Web/SSR: Vercel • Netlify • Cloudflare • Fly.io • AWS/GCP/Azure ├── Stratégies: Blue/Green • Canary • Feature Flags (Unleash/LaunchDarkly) └── CDN & Edge: Cloudflare • Fastly • Akamai ↓ Observabilité & Feedback ├── Logs/Metrics/Tracing: ELK/Loki • Prometheus • Grafana • OpenTelemetry • Jaeger ├── Erreurs: Sentry • Rollbar • Bugsnag └── Produit/UX: Hotjar • FullStory • Amplitude • PostHog

Conseils : démarrez tôt la CI, factorisez les configs (monorepo), versionnez l’infra (IaC), et ajoutez la télémétrie dès le MVP.

Exemple d’architecture

[Client] ⇄ [Next.js FE] ───► [API Gateway/Ingress] │ │ │ ├─► [Node.js (Fastify/Nest)] ─► [Prisma] ─► [PostgreSQL] │ └─► [Static/Assets/CDN] └─► [Sentry] / [OTel SDK] ─► [Jaeger/Tempo • Loki • Prometheus] CI/CD: GitHub Actions → Docker Registry → (Vercel | K8s | Fly.io)

Outils de développement (P1)

Liens

Outils de développement (P1)

Liens