Comment créer une application de coaching sportif avec Next.js

À la fin de ce guide, vous saurez comment créer une application de coaching sportif en ligne, avec un portefeuille de clients, des séances assignées, des bilans hebdomadaires et une application pour les membres, grâce à Next.js, NestJS et au template Kinora d’Aniq UI. Vous n’avez pas à dessiner les écrans ni à écrire l’API de zéro.

Nous suivons une entreprise d’exemple, du premier plan au jour du lancement. Vous verrez quel écran remplit quel rôle, quelles commandes lancer et quels réglages piègent le plus souvent. Les mêmes étapes valent pour un coach indépendant, une petite salle de sport ou une agence qui crée l’application pour un client.

Le cahier des charges

Northgate Strength est un studio de coaching en ligne. Un coach principal le dirige avec deux coachs sportifs. Ils veulent quitter les tableurs et les fils de discussion, et offrir à chaque client un seul endroit où s’entraîner. Voici ce que demande le studio :

• Trois coachs, et chacun voit ses propres clients et personne d’autre.
• Les clients enregistrent leurs séances, leurs repas, leur sommeil et leur poids, pour que les coachs voient ce qui s’est vraiment passé.
• Un coach choisit une séance pour un jour donné, et le client la voit en premier.
• Chaque semaine, chaque client envoie un court bilan et le coach y répond.
• Coach et client échangent dans un fil privé à l’intérieur de l’application.
• Certains clients lisent l’anglais et d’autres l’arabe, donc l’application doit fonctionner dans les deux langues, y compris de droite à gauche.
• Le nom, les couleurs et le domaine du studio, et sa propre base de données.

Comment le template couvre le cahier des charges

Besoin	Où ça se trouve	Ce que vous utilisez
Chaque coach voit seulement ses clients	Dashboard et API	L’écran My Clients, protégé par la permission coaching.clients
Séance fixée pour un jour	Dashboard	Le plan sur la page d’un client ; le client le voit dans Workouts
Les clients enregistrent entraînements et repas	Dashboard, côté membre	La séance en direct, la bibliothèque d’exercices, le Meal Planner
Sommeil, santé et mesures corporelles	Dashboard, côté membre	Les pages Sleep, Health et Progress, avec saisie manuelle
Bilans hebdomadaires	Dashboard et API	Un formulaire de bilan pour le client, une zone de réponse pour le coach
Messages privés	Dashboard et API	Un fil par coach et par client, poussé en direct par Socket.io
Anglais et arabe	Dashboard et API	Routes /en et /ar, fichiers de messages, contenu saisi dans les deux langues
Équipe et permissions	Dashboard	Les écrans Coaches et Coach Roles
Base de données et domaine à soi	API	SQLite en local, MySQL par configuration, fichiers d’environnement

Avant de commencer : les décisions à prendre

Certains choix ne coûtent rien sur le papier et coûtent cher à changer une fois que des clients se sont inscrits. Réglez-les avant d’ouvrir un terminal.

Qui utilisera l’application, et avec quels rôles ?

Kinora sépare les clients, qui s’entraînent, de l’équipe, qui coache et gère l’administration. Northgate a un coach principal et deux coachs sportifs, donc il lui faut trois comptes d’équipe et un rôle qui donne à chacun un portefeuille de clients. Notez les personnes et les écrans dont chacune a besoin. Cette liste deviendra vos rôles plus tard.

Quelles langues vos clients liront-ils ?

L’anglais et l’arabe sont fournis. Chaque mot visible se trouve dans un fichier de messages, et le contenu du catalogue est stocké dans exactement ces deux langues. Si une troisième langue compte pour votre marché, prévoyez un travail supplémentaire dans plusieurs fichiers plutôt qu’un simple interrupteur.

Où l’application tournera-t-elle ?

En local, il suffit de Docker, ou de Node.js avec Yarn. En production, il faut un hébergement pour le dashboard, un autre pour l’API, et une base de données. SQLite convient pour le développement, et MySQL est un simple changement de configuration. Décidez tôt si vous gérerez les serveurs vous-même ou si vous passerez par une plateforme, car cela change la façon de configurer les fichiers d’environnement.

Comment les clients vous paieront-ils ?

Le template n’a aucun prestataire de paiement. La carte de facturation dans les réglages n’affiche que des chiffres d’exemple. Si vous faites payer le coaching, choisissez dès maintenant l’outil qui envoie les factures ou gère les abonnements, et gardez-le en dehors de l’application.

Voulez-vous l’assistant IA dès le premier jour ?

Il demande une clé de modèle de Google, OpenAI ou DeepSeek, et vous payez directement ce fournisseur. Vous pouvez lancer sans lui et l’ajouter quand la boucle de base (séances, bilans, messages) fonctionne.

Que les clients saisiront-ils à la main ?

L’entraînement, les repas, le sommeil, les mesures de santé et les mensurations peuvent tous être saisis manuellement. Les relevés automatiques des montres et des trackers ne sont pas intégrés. Si Northgate veut que le coach voie le sommeil, il doit demander aux clients de le saisir, ou brancher plus tard une source de son choix.

Étape par étape

Étape 1 : choisir le pack

Kinora existe en pack Full Stack (dashboard plus API), en pack Member & Coach Dashboard et en pack Backend API. Le dashboard seul tourne avec des données d’exemple dans le navigateur. C’est suffisant pour un travail de design, mais rien n’arrive dans une base de données, donc deux coachs ne pourraient jamais partager un client.

Northgate a besoin de données partagées, il prend donc le pack Full Stack. Si vous avez déjà votre propre API, le pack dashboard peut s’y connecter. La licence couvre un nombre illimité de projets, y compris le travail que vous livrez à un client.

Regardez la page My templates sur cette capture : le ZIP de chaque pack acheté s’y trouve.

À vérifier : que le dossier extrait porte le nom de votre pack (le full stack s’extrait en kinora-fitness-full-stack) et contient back-end, dashboard et docker-compose.yml. Si vous voyez un dossier supplémentaire du même nom à l’intérieur, entrez dans celui-ci.

Étape 2 : le lancer en local avec Docker

Téléchargez le ZIP depuis My templates, décompressez-le et ouvrez un terminal dans le dossier kinora-fitness-full-stack. Vérifiez que Docker Desktop (ou Docker Engine avec Compose) est démarré. Puis lancez tout :

docker compose up --build

Docker construit deux images au premier lancement et charge des données de démonstration dans la base, prévoyez donc quelques minutes. Une fois terminé, le dashboard est sur localhost:3030 et l’API sur localhost:8000. Si un autre programme occupe déjà un port, créez un fichier .env à côté de docker-compose.yml avec DASHBOARD_PORT=3040 ou API_PORT réglé sur un numéro libre, puis relancez la commande.

Vous préférez Node.js seul ? Installez Node 22.9 ou plus récent, lancez corepack enable une fois, puis démarrez l’API (yarn seed, puis yarn dev) et le dashboard (yarn dev) dans deux terminaux. Démarrez l’API en premier.

Cette capture montre le terminal ouvert dans le dossier extrait, c’est-à-dire là où chaque commande de ce guide doit être lancée.

Attendez que l’API se déclare en bonne santé, car le dashboard ne démarre qu’après.

Si vous avez choisi la voie Node.js, voici le terminal de l’API une fois le seed exécuté et le serveur en marche.

Le second terminal lance le dashboard sur le port 3030, avec l’adresse de l’API renseignée pour que les données d’exemple soient désactivées.

À vérifier : ouvrez localhost:8000/api/health. La réponse doit indiquer un statut ok. Si le dashboard affiche un avis « Sample data », il ne parle pas encore à l’API.

Ce qui se passe mal le plus souvent :

• Docker est installé mais pas démarré. Lancez Docker Desktop et attendez que le moteur indique qu’il est actif.
• Le port 3030 ou 8000 est pris, souvent par un lancement précédent ou un autre projet. Libérez le port, ou définissez DASHBOARD_PORT ou API_PORT comme indiqué plus haut.
• Le premier démarrage semble bloqué. Il charge en général encore les données de démonstration, attendez donc que le contrôle de santé passe au vert.
• docker compose down -v supprime le volume de la base de données. Un simple docker compose down conserve vos données.

Étape 3 : parcourir la démo avec chaque rôle

Le formulaire de connexion se remplit tout seul. Ouvrez localhost:3030 pour le Head Coach (headcoach@example.com, mot de passe Coach@123). Pour le côté membre, ouvrez localhost:3030/en/auth/login?as=client (member@example.com, mot de passe Member@123). Un troisième compte, trainer@example.com avec Trainer@123, montre ce que voit un coach sportif.

Passez vingt minutes ici. En tant que coach, ouvrez My Clients puis la page d’un client. En tant que membre, démarrez la séance en direct sous Workouts, enregistrez une série et regardez le Meal Planner. C’est aussi ainsi que Northgate décide ce qu’il garde : le studio utilisera l’entraînement, la nutrition, le sommeil et la progression, et laissera de côté les défis de la communauté pour l’instant.

Regardez le plan de la semaine et le travail assigné par le coach, car ce sont les deux choses que les coachs de Northgate rempliront.

Le tableau des séries avec poids, répétitions et RPE est l’endroit où l’entraînement réel du client entre dans le système, et c’est ce que le coach lit ensuite.

À vérifier : notez, pour chaque rôle, les trois écrans qui comptent le plus. La liste de Northgate pour un client est Workouts, la séance en direct et le bilan hebdomadaire. Pour un coach, c’est la vue d’ensemble, My Clients et le fil de messages. Tout ce qui n’est pas sur une liste peut attendre.

Ce qui se passe mal le plus souvent : on juge la démo comme si ses données étaient les siennes. Les clients, repas et messages d’exemple sont des données de test. Jugez la structure des écrans, pas les chiffres.

Étape 4 : mettre la marque du studio

La marque se règle dans des fichiers, pas dans un écran de réglages. Dans le dossier du dashboard :

• src/config/brand.config.ts contient le nom, la description et les coordonnées, chacun avec une valeur en anglais et une en arabe. Renseignez aussi domain.url, car il est livré avec une adresse provisoire.
• src/components/icons/KinoraMark.tsx dessine la marque du logo en code.
• src/styles/theme-variables.css contient toutes les couleurs. L’accent est --primaryColor, défini dans les blocs clair et sombre.
• src/app/layout.tsx charge les polices : Inter pour l’anglais et IBM Plex Sans Arabic pour l’arabe.

Le nom du produit apparaît aussi dans quelques messages, comme la carte de bienvenue et le message d’accueil de l’assistant. Cherchez Kinora et son écriture arabe dans le dossier messages et changez les deux langues. Les valeurs de marque sont figées à la compilation, relancez donc docker compose up --build après chaque série de modifications.

À vérifier : rechargez le dashboard après un changement de marque en développement et vérifiez que le nom apparaît dans la barre latérale, dans l’onglet du navigateur et dans le pied de page, en anglais et en arabe. Faites ensuite une compilation de type production et revérifiez, car c’est ce que verront les clients.

Ce qui se passe mal le plus souvent :

• Seul le fichier de messages anglais est modifié. Changez toujours la même clé dans ar.json.
• Le pied de page renvoie encore vers l’auteur du template. Le crédit vient de src/config/author.config.ts.
• Les liens et les coordonnées de brand.config.ts pointent au départ vers l’auteur du template, remplacez-les par les vôtres.

Étape 5 : construire le catalogue en deux langues

Tout ce qu’un client lit pendant qu’il s’entraîne vient d’un catalogue : exercices, séances, programmes et plats, plus les groupes de la communauté, les événements, les défis et les badges. L’équipe qui a la permission fitness.manage les modifie sous Content. Chaque fiche reçoit un nom et une description en anglais et en arabe, côte à côte.

La démo fournit 23 exercices, 6 séances, 4 programmes et 10 plats. Northgate garde ceux qui conviennent et remplace les autres par les siens. Exemples de fiches : un goblet squat et un soulevé de terre roumain comme exercices, une semaine full body en trois jours comme séance, et un bol de riz au thon comme plat. Pour un plat, vous saisissez les grammes de protéines, de glucides et de lipides, et les calories sont calculées pour vous.

Comme les membres lisent les mêmes fiches, une modification apparaît en même temps dans la bibliothèque, dans le plan de la semaine et dans la séance en direct.

Travaillez dans cet ordre, pour que rien ne renvoie à quelque chose qui n’existe pas encore :

1. D’abord les exercices, avec les étapes d’exécution et les erreurs courantes pour les mouvements que les clients feront réellement.
2. Ensuite les séances, construites à partir de ces exercices, avec séries et répétitions.
3. Enfin les programmes, qui organisent les séances en semaines. Le membre de la démo en est à la semaine 6 sur 8 d’un programme appelé Strength Foundation.
4. Les plats pour le planificateur de repas, afin que les clients puissent saisir depuis une liste commune.

Remarquez les filtres par muscle, équipement et difficulté : chaque exercice que vous ajoutez dans Content apparaît ici, prêt à être envoyé dans la file d’entraînement du jour.

Le planificateur liste les repas d’une journée par heure, avec les calories face à un objectif, vérifiez donc que vos plats portent des grammes raisonnables de protéines, de glucides et de lipides.

À vérifier : connectez-vous en tant que membre et retrouvez dans la bibliothèque un mouvement que vous venez de créer. Ouvrez sa page et vérifiez que le texte anglais et le texte arabe s’affichent quand vous changez de langue.

Ce qui se passe mal le plus souvent : la suppression d’une fiche encore utilisée est refusée, par exemple un exercice contenu dans une séance. Retirez-le d’abord de la séance. Un succès ou un badge déjà obtenu par quelqu’un ne peut pas non plus être supprimé.

Étape 6 : créer les coachs, les rôles et le portefeuille de clients

Coachs et clients se connectent avec le même formulaire, depuis une seule table de comptes, et ce sont les rôles d’une personne qui déterminent ce qu’elle voit. L’API applique les mêmes permissions que la barre latérale. Le seed crée sept rôles. Deux comptent surtout ici :

• Head Coach et Personal Trainer ont coaching.clients, ils obtiennent donc My Clients et leur propre portefeuille.
• Coach peut déplacer des membres entre coachs, mais n’a pas coaching.clients.

Northgate crée trois comptes d’équipe sous Coaches : le coach principal et deux coachs sportifs. S’il veut qu’un simple Coach gère aussi un portefeuille, il coche coaching.clients pour ce rôle sur l’écran Coach Roles. Chaque membre ne peut avoir qu’un seul coach actif.

Depuis My Clients, un coach utilise Add client pour prendre en charge un membre qui n’a pas de coach. Sur la page d’un client, le coach assigne une séance à une date, avec une note facultative. Elle compte comme faite quand le client termine une séance de cet entraînement. Le bilan hebdomadaire demande au client son énergie, son poids et une note, et le coach répond depuis le même écran. Les messages forment un fil par binôme, de 2000 caractères au maximum chacun.

À vérifier : connectez-vous en tant que coach principal, ouvrez un client, assignez une séance à une date, puis connectez-vous en tant que ce client et vérifiez qu’elle passe avant tout ce qu’il a choisi lui-même. Terminez une séance de cet entraînement et regardez l’assignation compter comme faite. Envoyez ensuite un bilan en tant que client et répondez-y en tant que coach.

Ce qui se passe mal le plus souvent :

• Un coach sportif ne voit pas My Clients. Son rôle n’a pas coaching.clients.
• Add client n’affiche personne. Seuls les membres sans coach apparaissent, et un membre ne peut avoir qu’un coach actif. Déplacez des membres entre coachs sous Gym avec la permission coaching.assign.
• Les pièces jointes des messages échouent. Elles passent par la route d’envoi et ont besoin du bucket de stockage de l’étape suivante.

Étape 7 : ajouter le stockage des photos et, si vous voulez, des clés d’appareil

Les images, les photos de progression et les pièces jointes ont besoin d’un stockage : Cloudflare R2, ou tout autre service qui parle le protocole S3. Sans lui, tout s’affiche avec les images de démonstration fournies, mais un nouvel envoi répond par une erreur 400. Renseignez les cinq variables R2_* dans back-end/.env, et indiquez au dashboard le nom d’hôte public de votre bucket dans NEXT_PUBLIC_MEDIA_HOSTNAME (avec Compose, MEDIA_HOSTNAME).

Kinora ne récupère rien depuis un service de montres ou de trackers. Les données arrivent quand quelque chose les envoie. Un client crée une clé dans Settings, et un appareil ou un agrégateur envoie un POST à /api/ingest/daily-metrics avec cette clé dans un en-tête X-Api-Key. Northgate laisse cela de côté au lancement et laisse les clients saisir à la main.

C’est ici qu’un client gère ses alertes, sa confidentialité, l’apparence et ses appareils connectés, y compris les clés qu’un appareil utilise pour envoyer des données.

À vérifier : créez une clé en tant que client, copiez-la tout de suite car la clé complète n’est affichée qu’une fois, et envoyez à la route d’ingestion une requête qui renvoie à qui appartient la clé. Révoquez ensuite la clé et vérifiez que la même requête est refusée avec un 401.

Ce qui se passe mal le plus souvent : les envois répondent 400 parce que les variables du bucket manquent ou ont encore leurs valeurs d’exemple. Une valeur restée à son exemple compte comme non définie.

Étape 8 : activer l’assistant IA (facultatif)

L’assistant a sa propre page pour chaque compte. Un client l’interroge sur sa propre semaine. Un coach l’interroge sur le portefeuille, sur qui s’est entraîné et qui a décroché, et peut enregistrer une réponse à un bilan ou assigner une séance depuis le chat. Il n’utilise que les outils que le rôle du compte autorise.

Il reste éteint tant que vous ne mettez pas une clé Google Gemini, OpenAI ou DeepSeek dans back-end/.env. Les noms des variables sont listés dans .env.example. D’ici là, la page indique qu’aucun modèle n’est connecté et tous les autres écrans fonctionnent. Les frais du fournisseur sont à votre charge. La route qu’utiliserait un agent de code, POST /api/mcp, reste elle aussi fermée tant que vous n’avez pas défini votre propre MCP_API_KEY.

À vérifier : posez une question en tant que client puis en tant que coach. Le client doit recevoir une réponse sur sa propre semaine, et le coach sur le portefeuille. Vérifiez qu’un client ne peut pas obtenir les données d’un autre client, car l’assistant n’utilise que les outils que le rôle connecté autorise.

Ce qui se passe mal le plus souvent : la page indique qu’aucun modèle n’est connecté. Soit la clé manque, soit elle est encore égale à la valeur d’exemple de .env.example. Redémarrez l’API après l’avoir changée.

Étape 9 : vérifier l’arabe, les thèmes et un vrai téléphone

Ouvrez localhost:3030/ar. Tout le dashboard passe en miroir, y compris les écrans du coach. Chaque mot visible est dans messages/<namespace>/en.json et ar.json. Changez la valeur, gardez la clé, et modifiez les deux fichiers.

Le contenu du catalogue gère exactement deux langues. Une troisième langue oblige à toucher aux listes de langues, à ajouter des fichiers de messages et à étendre les champs de contenu de l’API. Basculez entre clair et sombre sur quelques écrans, puis ouvrez l’application sur un vrai téléphone avant d’inviter des clients.

À vérifier : changez de langue sur la page de connexion, puis sur quelques pages dans l’application, et vérifiez que les nombres, les dates et les graphiques se lisent toujours correctement. Faites-le en thème clair et en thème sombre.

Ce qui se passe mal le plus souvent : une étiquette reste en anglais parce qu’elle vit dans la configuration de la barre latérale et non dans un fichier de messages, ou une nouvelle fiche du catalogue n’a qu’une seule langue renseignée. Remplissez les deux champs dans chaque formulaire de Content.

Étape 10 : passer en ligne

Passez en ligne dans cet ordre :

1. Créez un secret solide avec node -e "console.log(require('crypto').randomBytes(48).toString('hex'))" et définissez-le comme JWT_SECRET.
2. Dans back-end/.env, définissez NODE_ENV=production, ainsi que CORS_ORIGIN et FRONTEND_URL avec l’adresse de votre dashboard, avec https:// et sans barre oblique finale. L’API refuse de démarrer avec un secret vide ou d’exemple, ou avec un CORS_ORIGIN vide.
3. Compilez l’API, créez ses tables une fois avec yarn db:sync:prod, et démarrez-la. Utilisez yarn seed:prod si vous voulez aussi les comptes de démonstration comme point de départ.
4. Dans dashboard/.env, définissez NEXT_PUBLIC_API_BASE_URL (avec /api à la fin) et lancez yarn build. Ces valeurs sont intégrées à la compilation, donc un changement ne fait rien tant que vous ne recompilez pas.
5. Changez tous les mots de passe de démonstration publiés, ou supprimez les comptes de démonstration sous Gym et Coaches.

Pour MySQL, créez une base vide, définissez DB_TYPE et DB_DATABASE, et lancez la commande de seed ou de synchronisation. Enfin, ajoutez ce que le template vous laisse : un fournisseur d’e-mail (il n’en envoie aucun), une réinitialisation de mot de passe en libre-service, et un moyen de faire payer le coaching.

À vérifier après la mise en ligne : connectez-vous sur le vrai domaine en tant que membre de l’équipe et en tant que client, vérifiez que la cloche de notifications en direct fonctionne et qu’un coach peut écrire à un client. Si les notifications n’arrivent pas, l’adresse du socket (FRONTEND_URL) ne correspond pas à l’adresse du navigateur.

Ce qui se passe mal le plus souvent :

• L’API refuse de démarrer. Elle affiche une ligne par problème, en général un JWT_SECRET vide ou d’exemple, ou un CORS_ORIGIN vide.
• Les navigateurs sont bloqués. Copiez chaque adresse caractère pour caractère depuis la barre d’adresse du navigateur, https:// compris, sans la barre oblique finale.
• Tout le monde reçoit « Too many attempts » derrière un proxy. La connexion autorise 10 requêtes par minute et par adresse, et derrière un proxy public tous les visiteurs partagent la même. Définissez TRUST_PROXY avec le nombre de proxys placés devant l’API.

Au quotidien

Une fois Northgate en ligne, l’application tourne presque toute seule, et les coachs travaillent à partir d’une courte liste d’écrans.

Le matin du coach

L’équipe arrive sur la vue d’ensemble du coach, qui réunit tout le portefeuille, les clients devenus silencieux, les bilans en attente de réponse et le travail assigné pour aujourd’hui. Pour le coach principal et les coachs sportifs, ces panneaux se remplissent avec leurs propres clients. Un coach ouvre d’abord les clients silencieux, leur envoie un message et répond aux bilans arrivés pendant la nuit.

Le rythme de la semaine

Chaque client envoie un bilan par semaine avec énergie, poids et une note. Le coach répond, puis assigne les séances de la semaine suivante à des dates précises. L’assiduité découle des séances que le client termine réellement, il n’y a donc rien à cocher à la main.

S’occuper des comptes

Sous Gym, l’équipe qui a la bonne permission voit tous les membres, ouvre la page d’un membre et restaure un membre supprimé. Supprimer un membre le déplace dans une liste de supprimés au lieu de l’effacer. Appuyez sur Ctrl+K (Cmd+K sur Mac) n’importe où pour ouvrir la recherche, qui trouve les membres, les coachs, les rôles et les éléments du catalogue que vous avez le droit d’ouvrir.

Modifier les permissions

Modifiez un rôle sur l’écran Coach Roles et le changement atteint les personnes connectées, par une connexion en direct, sans leur demander de se déconnecter.

Garder les données en sécurité

Avec SQLite, la base de données est un fichier, et elle vit dans un volume Docker si vous utilisez Compose. Avec MySQL, elle vit sur votre serveur de base de données. Dans les deux cas, planifiez vos propres sauvegardes. Le template ne le fait pas pour vous.

Un exemple de plan de lancement semaine par semaine

Voici un calendrier d’exemple pour Northgate, pas une promesse sur la durée de votre projet. Servez-vous-en comme d’un modèle et étirez-le selon vos besoins.

• Semaine 1, comprendre. Lancez la pile avec Docker, parcourez les deux rôles et terminez la liste de décisions ci-dessus.
• Semaine 2, se l’approprier. Appliquez la marque et remplacez le catalogue de démonstration par les exercices, séances et programmes du studio dans les deux langues.
• Semaine 3, les personnes et les règles. Créez les comptes de l’équipe, définissez les rôles, accueillez quelques clients de test et déroulez la boucle complète : assigner, s’entraîner, faire son bilan, répondre, échanger des messages.
• Semaine 4, production. Préparez l’hébergement, les fichiers d’environnement, la base de données et le stockage. Compilez, créez les tables, changez les mots de passe et testez sur un vrai téléphone et en arabe.
• Semaine 5, lancement en douceur. Invitez quelques vrais clients et corrigez ce qui les fait trébucher avant d’ouvrir plus largement.

Checklist de lancement

• Nom de marque, logo, couleurs et polices remplacés dans les deux thèmes.
• domain.url ainsi que les coordonnées et les liens de brand.config.ts pointent vers votre studio.
• Chaque message modifié l’est dans en.json et dans ar.json.
• Fiches du catalogue remplies dans les deux langues.
• Comptes d’équipe créés, rôles vérifiés, et rôle Coach doté d’une permission de portefeuille s’il en a besoin.
• JWT_SECRET généré, NODE_ENV=production, CORS_ORIGIN et FRONTEND_URL définis avec https://.
• Tables créées avec yarn db:sync:prod, ou données de démonstration chargées puis nettoyées.
• Tous les mots de passe de démonstration publiés changés, ou comptes de démonstration supprimés.
• Bucket de stockage connecté, et dashboard recompilé avec son hôte public.
• Un fournisseur d’e-mail et un plan de réinitialisation de mot de passe en place, puisqu’aucun n’est fourni.
• Un moyen de faire payer les clients choisi, en dehors de l’application.
• Clé IA ajoutée, ou assistant volontairement laissé éteint.
• Sauvegardes de la base de données planifiées.
• Testé sur un vrai téléphone, en arabe, et dans les thèmes clair et sombre.

Template, développement sur mesure ou plateforme hébergée

Il y a trois façons honnêtes d’obtenir un produit de coaching, et chacune échange différemment le temps, le contrôle et le coût.

Une plateforme de coaching hébergée

Vous vous inscrivez et vous commencez. C’est la voie la plus rapide vers un premier client. Vous payez des frais récurrents, votre marque et vos processus se limitent à ce que le fournisseur autorise, et les données de vos clients vivent sur son système. Cela convient à un coach indépendant qui veut coacher, pas gérer un logiciel.

Tout construire de zéro

Vous obtenez exactement le produit que vous dessinez. Vous construisez aussi l’authentification, les rôles, un portefeuille de clients, un suivi de séance, les bilans, la messagerie, les traductions et une API avant de pouvoir accueillir un seul client. C’est un gros volume de travail sans rapport avec le coaching, et vous maintenez tout.

Partir d’un template

Vous possédez le code source, vous l’hébergez vous-même et vous pouvez tout modifier. La boucle de coaching, le suivi de séance et l’API existent déjà, donc votre effort va au contenu et à la marque. En échange, vous prenez en charge l’hébergement, les mises à jour et les manques listés dans ce guide : pas de paiements, pas d’e-mail, pas d’intégration de montres. Cela convient à un studio ou à une agence qui veut du contrôle et sait faire tourner une petite pile, ou embaucher quelqu’un pour le faire.

Ce que coûte son fonctionnement

Les packs du template démarrent à $99, et le pack Full Stack que prend Northgate coûte $149, avec une licence commerciale et un support à vie. Ensuite, vous payez ce que vous activez :

• L’hébergement du dashboard et de l’API, et une base de données si vous dépassez SQLite.
• Un bucket compatible S3 comme Cloudflare R2, si les clients envoient des images. Consultez la page de tarifs du fournisseur.
• Une clé IA de Google, OpenAI ou DeepSeek, facturée par ce fournisseur, seulement si vous voulez l’assistant.
• Un nom de domaine.

Le développement en local ne coûte rien de plus : SQLite n’a pas besoin de serveur de base de données et la démo tourne sur votre propre machine. Kinora n’a aucun prestataire de paiement intégré, donc faire payer les clients suppose d’ajouter votre propre outil de facturation.

Que personnaliser ensuite

• Vos programmes. Remplacez les quatre programmes de démonstration par les découpages hebdomadaires du studio, dans les deux langues.
• Rôles de coach. Accordez coaching.clients à d’autres rôles, ou créez un rôle pour un coach nutrition uniquement.
• La barre latérale. Retirez les entrées Demos de navigationData.ts quand vous n’en avez plus besoin.
• Couleur d’accent. Réglez --primaryColor sur la couleur du studio et vérifiez les deux thèmes.
• Données d’appareils. Pointez une application de suivi ou un agrégateur vers la route d’ingestion.
• Réinitialisation du mot de passe. Ajoutez les deux routes de réinitialisation et un fournisseur d’e-mail pour que les clients puissent récupérer leur compte eux-mêmes.

Erreurs courantes

Changer une valeur d’environnement sans voir de changement

Chaque valeur NEXT_PUBLIC_* est intégrée au code du navigateur à la compilation. Redémarrez yarn dev, relancez yarn build ou lancez docker compose up --build après tout changement.

Attendre du rôle Coach qu’il affiche My Clients

Seuls les rôles dotés de coaching.clients le voient. Le rôle Coach du seed ne l’a pas, donnez-lui cette permission ou utilisez Personal Trainer.

Livrer avec les mots de passe de démonstration publiés

Les comptes de démonstration utilisent des mots de passe qui figurent dans la documentation. Remplacez-les, ou commencez avec des tables vides, avant que quiconque en dehors de votre équipe puisse accéder au site.

Croire que « mot de passe oublié » envoie un e-mail

Ce n’est pas le cas. Les pages ne sont que des écrans, et le template n’envoie aucun courrier. Un compte de l’équipe avec la bonne permission peut définir le mot de passe d’un client sur sa page sous Gym, en attendant que vous construisiez la réinitialisation.

Laisser le dashboard sur des données d’exemple

Si vous voyez un avis « Sample data », le dashboard a été compilé sans adresse d’API. Ce que vous modifiez est stocké dans le navigateur, pas dans la base de données.

FAQ

Comment créer une application de coaching sportif avec Next.js ?

Partez d’un template qui contient déjà la boucle de coaching, puis changez la marque, le catalogue et les rôles. Kinora vous donne un dashboard Next.js 16 pour les clients et les coachs et une API NestJS, ce qui vous permet de consacrer votre temps au contenu plutôt qu’à la plomberie.

Puis-je l’utiliser pour des clients ?

Oui. La licence commerciale couvre un nombre illimité de projets, y compris ceux que vous réalisez pour un client et lui remettez. Vous ne pouvez pas revendre le code source ni le publier comme template.

Gère-t-il l’arabe et le RTL ?

Oui. L’anglais et l’arabe sont fournis dans le dashboard comme dans l’API, et la mise en page arabe va de droite à gauche, écrans du coach compris.

Ai-je besoin d’un back-end ?

Pour un vrai produit, oui. Le dashboard peut tourner seul avec des données d’exemple, mais partager des données entre coachs et clients demande l’API. Le pack Full Stack l’inclut.

Se connecte-t-il à une montre connectée ?

Pas directement. Il n’a aucune intégration native de montres ou de trackers. Un appareil ou un agrégateur peut envoyer des relevés par la route d’ingestion avec une clé personnelle.

Quelle base de données utilise-t-il ?

SQLite pour le travail en local et MySQL par configuration. Vous changez des réglages, pas du code.

Prend-il les paiements ?

Non. Le template n’a aucun prestataire de paiement, et la carte de facturation dans les réglages affiche des chiffres d’exemple. Ajoutez votre propre outil de facturation si vous faites payer vos clients.

Un coach peut-il voir les clients d’un autre coach ?

Non. Les routes du portefeuille ne répondent qu’au compte qui fait la demande, et le client d’un autre coach renvoie une réponse « introuvable ». L’équipe qui a la permission d’assignation peut déplacer des membres entre coachs.

Puis-je lancer seulement le dashboard sans l’API ?

Oui, pour un travail de design. Le pack dashboard fonctionne avec des données d’exemple conservées dans le navigateur, et vos modifications restent dans ce navigateur. Pour partager des données, il faut l’API.

Comment ajouter une langue en plus de l’anglais et de l’arabe ?

Ajoutez le code aux listes de langues du dashboard, copiez les fichiers de messages sous le nouveau code, étendez les textes de la barre latérale et de la marque, et définissez le sens d’écriture s’il va de droite à gauche. L’API a sa propre liste et son propre dossier de traductions. Le contenu du catalogue ne garde que deux langues, sauf si vous étendez l’API et les formulaires de Content.

Essayez par vous-même

Ouvrez la démo coach et la démo membre, puis lisez la documentation de Kinora ou consultez la page produit de Kinora. Pour voir d’autres options, parcourez les templates santé et fitness ou le guide des meilleurs templates Next.js.

Kinora fait aussi partie des dix templates du Next.js Templates Bundle.