Foundation Kit

Foundation Kit est actuellement en phase de test ! Restez informé de sa sortie officielle :

Le starter kit dont vous avez besoin pour créer des applications full-stack modernes. Backend NestJS + frontend Next.js.

Une base prête à l'emploi pour créer plus rapidement vos sites web, SaaS et applications web. Authentification, gestion de sessions, formulaires, traductions — tout est déjà développé.

Voir la démo

Gagnez du temps en ne partant pas de zéro pour recréer les pages que l'on retrouve partout. Utilisez-les telles-quelles ou modifiez-les directement pour les adapter à votre image ou vos visuels.

Login Page
Page de connexion
Register Page
Page d'inscription
Forgot Password Page
Page de mot de passe oublié
Forgot Password Page
Modification de mot de passe oublié
Profile Page
Page de profil
Profile Page
Modification de mot de passe
Profile Page
Déconnexion

Ne gaspillez pas votre temps à réinventer la roue. Avec Shadcn, nous avons mis en place les composants de base nécessaires. Copiez, collez, personnalisez.

Vous devez porter une attention particulière à l'accessibilité ?
Tous les formulaires et leurs champs peuvent être utilisés uniquement avec le clavier.

Components 1 Components 2
Boutons, alertes, notifications
Form 1 Form 2 Form 3
Elements de formulaire

Une gestion de sessions stateless complète et sécurisée : JWT, refresh tokens, retry automatique. — tout est déjà conçu, vous n'avez plus qu'à l'utiliser.

On dit qu'une image vaut mille mots. Une vidéo, c'est encore mieux. Voyez comment ça fonctionne.

Session Creation Diagram
Création session
Session Validation Diagram
Validation session par access token
Session Validation Diagram
Validation session par refresh token
Session Validation Diagram
Validation session échouée
Session Validation Diagram
Relance les requêtes automatiquement

Fini les appels API écrits à la main. Grâce à Orval, tanStack Query et notre architecture API, générez automatiquement vos appels API, types de body, schémas Zod et types de réponses.

Tout est généré automatiquement. Vous n'avez plus qu'à utiliser les hooks tanStack Query prêts à l'emploi.

Prémunissez-vous contre les erreurs, réduisez les bugs et les coûts de maintenance.
Les erreurs TypeScript vous alertent dès que l'API change.

Orval Backend Setup
Mise en place côté back
Orval Frontend Generation
Génération des types côté front
Orval Frontend Usage
Génération des hooks et utilisation côté front

Touchez un maximum d'utilisateurs avec un système d'internationalisation complet et simple à utiliser.

Gérez vos traductions côté frontend et backend en toute simplicité.
Traductions automatiques des messages d'erreur, validation des formulaires, et bien plus encore.

Traductions
Traductions côté frontend
Traductions backend 1 Traductions backend 2
Traductions côté backend

Personnalisez le thème de votre site facilement grâce à la preview du thème et en modifiant quelques variables CSS !

Vous pouvez choisir entre le thème light et le thème dark, et voir les changements en direct.

Démonstration de la preview du thème

Choisir Foundation Kit, c'est :

250
Heures économisées
100%
Production-ready
100%
Testé E2E

Nous utilisons des frameworks pour un gain non negligeable de temps et de couts.
Pourquoi ne pas faire de même avec un starter kit ?

Pour qui est FOUNDATION KIT ?

Conçu par des développeurs pour les développeurs.

documentation

Développeurs solo

Démarrez vos projets solo rapidement, restez concentré sur vos idées et ne laissez plus aucun projet tomber à l'eau.

documentation

Freelances

Avec Foundation Kit, gagnez en productivité, lancez vos projets plus vite et décrochez davantage de missions.

documentation

Petites équipes

Appuyez-vous sur une base commune solide, une architecture déjà établie, une liaison forte entre l'API et le frontend pour faciliter la collaboration et la maintenance de vos projets.

Détails complets du projet

Backend, Frontend et Documentation

documentation

Backend

NestJS avec Prisma ORM, PostgreSQL, gestion des sessions, gestion des médias, validation Zod, standardisation des erreurs, internationalisation (i18n), Swagger, 123 tests E2E couvrant toutes les routes existantes.

  • Endpoints :
  • • Authentification : Connexion, Déconnexion, Validation de session, Rafraîchissement de session
  • • Utilisateur : Inscription, Profil, Mise à jour du profil, Changement de mot de passe
  • • Réinitialisation de mot de passe : Mot de passe oublié, Validation du token, Réinitialisation
  • • Médias : Accès aux médias privés
documentation

Frontend

Next.js 15 avec App Router, React Query, Tailwind CSS, Système de thème dark/light personnalisable, Shadcn/UI, formulaires React Hook Form, Mapping automatique des erreurs, gestion des sessions avec rafraîchissement automatique, protection des routes par guards (authentification, accès public, contrôle par rôles), génération automatique de code API via Orval (hooks React Query, types TypeScript, schémas Zod).

  • Pages :
  • Publiques: Accueil
  • Non connectées: Connexion, Inscription, Mot de passe oublié, Nouveau mot de passe
  • Connectées: Déconnexion, Profil, Modification du profil, Changement de mot de passe, Page privée
  • Autres: Démonstration des composants, Page 404
documentation

Documentation

Documentation technique intégrée complète pour le frontend et l'API, détaillant chaque fonctionnalité et élément du starter kit. Tout le nécessaire pour travailler efficacement : diagrammes de flux, exemples de code, schémas de validation et conventions claires facilitant la compréhension du projet, l'explication du code et la génération de nouvelles fonctionnalités.

Questions fréquentes

Tout ce que vous devez savoir

Puis-je utiliser FOUNDATION KIT pour des projets commerciaux ? +
La licence vous permet d'utiliser FOUNDATION KIT pour un nombre illimité de projets personnels ou commerciaux, mais vous ne pouvez pas revendre ou redistribuer le code source du starter kit lui-même. Vous pouvez vendre les applications que vous créez avec.
Quels sont les prérequis techniques pour utiliser FOUNDATION KIT ? +
Une connaissance de base de React, Node.js, TypeScript et des API REST est recommandée.
Puis-je ajouter d'autres langues que le français pour l'internationalisation ? +
Oui, vous pouvez ajouter autant de langues que vous le souhaitez en suivant les instructions contenues de la documentation.