React Router 7, c'est Remix réinventé : plus simple, plus rapide, avec Vite 6. Toute la puissance du SSR, des loaders et actions, mais sans la complexité.
✨ Formation complète : 76 leçons, 19h56 de contenu
💼 Projets réels : E-commerce avec Stripe, Better Auth, Prisma, AWS S3
🎯 Stack moderne : TypeScript, Tailwind v4, shadcn-ui, déploiement prod
🎁 -65% avec le code REMIXJAM → Accéder à la formation
- Node.js via nvm (recommandé)
- Docker & Docker Compose
Monorepo Turborepo : NestJS sert le frontend Remix directement. Pas d'API REST séparée, juste le serveur NestJS qui monte Remix.
├── backend/ # NestJS + Prisma + Remix server
├── frontend/ # Remix app (UI/routes)
└── packages/ # Configs partagées (ESLint, TS)
# 1. Redis (sessions)
docker compose -f docker-compose.redis.yml up -d
# 2. Dépendances
npm install
# 3. Créer .env à la racine (voir section Variables ci-dessous)
# 4. Copier .env dans backend/ à chaque modif
cp .env backend/.env
# 5. DB migrations
cd backend
npx prisma migrate dev
npx prisma generate
# 6. Lancer dev (depuis racine)
cd ..
npm run devApp dispo sur http://localhost:3000
Créer .env à la racine et dans backend/ :
# Base de données PostgreSQL
DATABASE_URL="postgresql://user:password@localhost:5432/dbname"
# Redis (sessions utilisateur)
REDIS_URL="redis://localhost:6379"
# Secret session (générer string aléatoire sécurisé)
SESSION_SECRET="your-super-secret-key-change-me"
# Environnement
NODE_ENV="development"
PORT="3000"
# Stripe (paiements)
STRIPE_SECRET_KEY="sk_test_..." # Clé secrète Stripe
STRIPE_WEBHOOK_SECRET="whsec_..." # Secret webhook Stripe
# AWS S3 (upload fichiers)
AWS_ACCESS_KEY="AKIA..."
AWS_SECRET="your-secret"
AWS_REGION="eu-west-3"
AWS_BUCKET_NAME="your-bucket"
# Optionnel : seed BD avec X offres fictives
SEED_OFFERS_COUNT="1000"
⚠️ Important : Copier.envdansbackend/après chaque modif :cp .env backend/.env
Retrouvez le guide vidéo pour configurer ce projet sur YouTube (en français)
- Partie 1 : Configurer Remix, NestJS et Turborepo
- Partie 2 : CI/CD, Déploiement avec Github Actions et Docker
- Partie 3: Intégration Design System | Figma, Tailwind CSS & Shadcn UI
- Partie 4: Authentification avec Redis, express-session, Passport.js
- Partie 5: Authentification par token, inscription avec Redis, express-session, Passport.js
- Partie 6: Développement des fonctionnalités principales d'échange de service, faire une offre, éditer le profil ...
- Partie 7: Intégrer Amazon S3 pour héberger les fichiers des utilisateurs
- Partie 8: J'ai redesigné ce SaaS avec l'IA | Formation Remix, NestJS, Shadcn UI 2024
- Partie 9: Implémentation de Nuqs: filtres et pagination côté serveur | Formation Remix, NestJS, Shadcn UI 2024
- Partie 10: Implémenter Stripe Connect en multi-tenant | Formation Remix, NestJS, Shadcn UI 2024
En 4 ans de développement, je n'ai pas encore trouvé une stack qui me plaît. Il y a toujours un élément qui manque (une fonctionnalité, ou une limitation technique).
En tant que développeur fullstack, je souhaite bénéficier du meilleur des deux mondes.
Je souhaite utiliser une technologie :
- simple à utiliser
- qui me permet d'implémenter une fonctionnalité rapidement
- qui me permet d'avoir un contrôle total sur la logique, front comme back
Remix répond à mes attentes. C'est un framework frontend qui me permet d'utiliser Javascript et React pour créer des sites web performants et ergonomiques.
Ce framework est full-stack, signifiant que tu n'as pas besoin de configurer un serveur pour ajouter une logique backend. Tu peux appeler une base de donnée, intégrer l'authentification, et plein d'autres fonctionnalités.
Cependant, il n'a pas suffisamment de maturité. Il manque plein de features, comme les middleware (qui sont très utiles pour ne pas recopier la même logique de protection des routes)
J'utilisais donc NestJS comme serveur séparé jusqu'à présent. Ce framework Node.JS m'a permi d'utiliser Javascript pour configurer une base de donnée, des routes et toute ma logique métier.
Ensuite, j'appelle chaque route dans Remix. Mais c'est sujet à beaucoup d'erreurs d'inattention, ou de perte de synchronisation. J'informe Remix des réponses API de NestJS en déclarant un schéma Zod, qui peut être erroné, et générer des erreurs.
Je perd donc pas mal de temps à :
- déclarer des schémas Zod
- réparer des bugs, erreurs d'inattention
- déclarer des méthodes pour appeler mes routes
MAIS c'est terminé ! J'ai découvert une stack qui me permet d'intégrer ce serveur NestJS avec Remix. Cela remplace le serveur de Remix (celui qui faisait les appels à NestJS) par le serveur NestJS, directement.
Voici les avantages :
- aucune duplication de code
- aucun schéma zod
- aucun bug de ce style à régler
C'est un gain de temps énorme.
Et dans cette formation, je te montre comment j'ai configuré cette stack pour que tu puisses l'utiliser dans tes projets.
Cette stack n'est plus recommandée pour de nouveaux projets.
L'écosystème a évolué : Remix a fusionné avec React Router 7, qui simplifie énormément l'architecture. Plus besoin de NestJS, Redis, ni Docker pour du dev local. Ma nouvelle stack (enseignée dans la formation React Router 7) est plus simple, plus rapide, plus maintenable.
Ce repo reste utile pour apprendre, mais pour du prod, regarde React Router 7.
💬 Des questions ? Rejoins le Discord Algomax
Si tu veux moderniser ce projet :
Remplacer express-session + Redis par auth en DB avec Prisma. Stocker sessions directement en PostgreSQL. Ça supprime la dépendance Docker/Redis en local.
- Activer tous les Remix future flags
- Updater vers dernière version Remix
- Migrer vers React Router 7 (guide officiel : reactrouter.com)
React Router 7 suffit pour la plupart des apps. Garde NestJS seulement si tu as besoin de microservices, websockets complexes, ou logique backend lourde.
Résultat : Stack ultra-simple avec juste React Router 7 + Prisma + PostgreSQL.