Project Overview
Présentation du projet AKFC et de son objectif pédagogique
Project Overview
Bienvenue dans la documentation du projet AKFC.
AKFC signifie Association de Kung Fu de Chambéry.
Ce projet est le site web d’un club d’arts martiaux, mais il sert également de fil rouge pédagogique pour apprendre à construire une application web moderne fullstack avec Next.js.
Cette documentation a deux objectifs :
- Documenter le projet lui-même
- Servir de support d’apprentissage pour les développeurs
Autrement dit, ce projet est à la fois :
- un produit réel
- un cas d’étude pédagogique
The idea behind the project#
Plutôt que d’apprendre des technologies isolées, l’idée est d’apprendre à construire un projet complet et cohérent.
Beaucoup de tutoriels montrent :
- comment utiliser une librairie
- comment créer un petit exemple
Mais très peu expliquent comment organiser une vraie application.
Ce projet vise donc à montrer :
- comment structurer un projet
- comment organiser le code
- comment connecter le frontend et le backend
- comment gérer les données
- comment gérer les médias
- comment concevoir une architecture maintenable
What we are building#
Le projet AKFC est un site pour un club d’arts martiaux.
Le site permet notamment :
- présenter le club
- présenter les cours
- publier des articles
- gérer des images
- administrer le contenu
Certaines fonctionnalités sont publiques, d’autres sont réservées à l’administration.
A real-world example#
Ce projet n’est pas un simple exemple.
Il inclut des fonctionnalités réalistes comme :
- authentification
- gestion des utilisateurs
- gestion de contenu
- gestion d’images
- éditeur de texte riche
- organisation de médias
- architecture backend claire
Toutes ces fonctionnalités sont utilisées pour expliquer des concepts importants du développement web moderne.
Technology stack#
Le projet utilise une stack moderne basée sur TypeScript.
Principales technologies :
- Next.js — framework fullstack React
- tRPC — API typée end-to-end
- Prisma — ORM pour la base de données
- PostgreSQL — base de données relationnelle
- Cloudinary — gestion et transformation d’images
- TipTap — éditeur de texte riche
- Tailwind CSS — système de styles
Cette stack a été choisie pour plusieurs raisons :
- forte sécurité de typage
- architecture maintenable
- bonne expérience développeur
- outils modernes et largement utilisés
Nous expliquerons ces choix dans les sections suivantes.
Fullstack architecture#
Le projet est conçu comme une application fullstack.
Cela signifie que :
- le frontend
- le backend
- la base de données
sont pensés comme un système cohérent.
Dans cette documentation, nous verrons notamment :
- comment structurer un backend
- comment organiser un frontend
- comment partager des types
- comment sécuriser une API
- comment gérer les médias
Learning goals#
À travers ce projet, vous apprendrez notamment :
- construire une API avec tRPC
- modéliser une base de données avec Prisma
- organiser une application Next.js
- créer une architecture feature-based
- gérer des images avec Cloudinary
- construire un éditeur de texte riche
- organiser un projet monorepo
Mais surtout, vous apprendrez comment penser l’architecture d’une application.
A project designed for learning#
Cette documentation est organisée comme un parcours pédagogique.
Elle contient plusieurs types de contenu :
-
architecture
expliquer comment le projet est structuré -
domain model
expliquer les entités métier -
tutorials
expliquer comment implémenter les fonctionnalités -
patterns
expliquer certaines solutions techniques
Who is this documentation for?#
Cette documentation s’adresse à plusieurs profils :
Développeurs débutants#
Pour comprendre :
- comment structurer un projet
- comment connecter frontend et backend
Développeurs intermédiaires#
Pour découvrir :
- tRPC
- Prisma
- architecture moderne Next.js
Développeurs curieux#
Pour voir comment construire un projet réel complet.
Next step#
La prochaine étape consiste à comprendre comment le projet est structuré.
Dans la section suivante, nous verrons :
- l’architecture générale du projet
- l’organisation du monorepo
- comment les différentes parties communiquent entre elles
➡ Continuez avec Project Architecture.