Créer une application Web SaaS

Prêt à construire quelque chose de plus complexe ? Dans ce tutoriel, vous allez créer une application SaaS complète - un outil de gestion de projet avec des équipes, des abonnements et des analyses. Regardez comment Conductor planifie et Virtuoso construit l'intégralité de votre application dans de réels conteneurs Docker.

Ce que nous allons construire

Un SaaS de gestion de projet prêt pour la production avec : espaces de travail d'équipe, autorisations basées sur les rôles, abonnements Stripe, collaboration en temps réel, tableau de bord analytique et isolation des données multi-tenant - le tout déployé sur l'edge mondial.

Prérequis

Avoir terminé le tutoriel Premiers pas
Compte Nxcode Pro (20 $/mois) recommandé pour les applications complexes
Compréhension de base des concepts SaaS (optionnel)

Décrire une application complexe

Pour les applications SaaS, donner à Conductor des exigences détaillées mène à de meilleurs résultats. Voici comment décrire notre application de gestion de projet :

Construire une application SaaS de gestion de projet :

Fonctionnalités de base :
- Espaces de travail d'équipe avec système d'invitation
- Projets avec tâches, sous-tâches et échéances
- Vues Kanban et liste
- Mises à jour en temps réel lorsque les membres de l'équipe effectuent des changements
- Pièces jointes et commentaires
- Flux d'activité et notifications

Gestion des utilisateurs et des équipes :
- Inscription des utilisateurs avec vérification par e-mail
- Création d'équipe et invitations de membres
- Accès basé sur les rôles : Propriétaire, Administrateur, Membre, Spectateur
- Espaces de travail personnels et d'équipe

Système d'abonnement :
- Niveau gratuit : 1 projet, 3 membres d'équipe
- Niveau Pro (10 $/mois) : Projets illimités, 10 membres
- Niveau Business (25 $/mois) : Tout illimité + support prioritaire
- Intégration Stripe pour la facturation

Analyses :
- Suivi de la progression du projet
- Métriques de productivité de l'équipe
- Suivi du temps par tâche
- Exportation de rapports en PDF/CSV

Design : Interface propre et moderne avec support du mode sombre

Comment Conductor gère les exigences complexes

Pour une application SaaS, Conductor créera un plan complet avec plusieurs phases :

Phase 1 : Fondations

1Configurer Next.js avec TypeScript
2Configurer le schéma de base de données pour le multi-tenant
3Implémenter l'authentification avec JWT
4Créer l'isolation des données d'espace de travail/équipe

Phase 2 : Fonctionnalités de base

1Construire le CRUD de projet avec autorisations
2Créer le système de gestion des tâches
3Implémenter l'interface utilisateur du tableau Kanban
4Ajouter des mises à jour en temps réel avec WebSocket

Phase 3 : Collaboration

1Gestion des invitations d'équipe et des membres
2Commentaires et flux d'activité
3Téléchargement de fichiers et pièces jointes
4Système de notification

Phase 4 : Monétisation

1Configuration de l'intégration Stripe
2Gestion des abonnements
3Application des limites d'utilisation
4Portail de facturation

Phase 5 : Analyses et finitions

1Tableau de bord analytique
2Génération de rapports
3Implémentation du mode sombre
4Configuration du déploiement Cloudflare

Conductor

Je planifie votre application SaaS de gestion de projet. Quelques questions : 1. Pour les mises à jour en temps réel, tous les membres de l'équipe doivent-ils voir les changements instantanément, ou simplement rafraîchir à la demande ? 2. Limite de stockage de fichiers par niveau ? 3. Le niveau gratuit doit-il avoir accès aux analyses de base ? 4. Des besoins spécifiques pour la gestion des webhooks Stripe ?

User

Temps réel pour tous. Niveau gratuit : 100 Mo, Pro : 5 Go, Business : illimité. Analyses de base pour tous. Les webhooks Stripe standards conviennent.

Conductor

Compris ! J'ai créé 24 tâches réparties sur 5 phases avec des critères d'acceptation clairs. Chaque tâche sera exécutée dans Docker avec de réels builds et tests. C'est un projet plus vaste, l'exécution prendra donc environ 15-20 minutes. C'est parti !

Comprendre l'architecture multi-tenant

Virtuoso implémentera une isolation multi-tenant appropriée. Voici ce qui sera construit :

Isolation de l'espace de travail

Chaque équipe dispose d'un espace de travail unique. Toutes les requêtes sont limitées pour éviter les fuites de données entre les locataires.

Accès basé sur les rôles

Vérification des autorisations au niveau de l'API et de l'interface utilisateur. Les propriétaires peuvent tout faire, les spectateurs sont en lecture seule.

Application de l'abonnement

Le middleware vérifie le niveau d'abonnement avant d'autoriser les actions. Les utilisateurs du niveau gratuit reçoivent des invitations amicales à passer au niveau supérieur.

Portabilité des données

Les utilisateurs peuvent exporter leurs données à tout moment. Cela renforce la confiance et est requis dans de nombreuses régions.

Observer des builds complexes dans Docker

Pour une application SaaS, Virtuoso exécute beaucoup plus d'étapes de build :

1Migrations de base de données

Schéma créé et migré dans un conteneur isolé

2Intégration du SDK Stripe

Webhooks testés avec la CLI Stripe dans Docker

3Serveur WebSocket

Fonctionnalité en temps réel testée avec des clients fictifs

4Matrice de permissions

Toutes les combinaisons rôles/actions testées automatiquement

5Tests de charge

Des tests de performance de base garantissent que l'application monte en charge

Contrairement aux simples générateurs de code, Nxcode exécute réellement le mode test de Stripe, crée des équipes fictives et vérifie que les mises à jour en temps réel fonctionnent. En cas d'échec, Virtuoso le corrige automatiquement.

Abonnement et facturation

Virtuoso construit une intégration Stripe complète :

Flux de paiement avec sélection de prix
Portail client pour la gestion en libre-service
Gestion des webhooks pour les changements d'abonnement
Mesure de l'utilisation pour la facturation des dépassements
Génération de factures et historique
Proratisation pour les mises à niveau en milieu de cycle

Conductor pose des questions sur les exigences Stripe dès le départ car le code de facturation est critique. Chaque parcours de paiement est testé dans Docker avant que la tâche ne soit validée.

Tableau de bord analytique

Votre SaaS inclut un tableau de bord analytique intégré :

Progression du projet

Tâches terminées par rapport au total, graphiques burndown

Activité de l'équipe

Qui contribue, cartes thermiques d'activité

Suivi du temps

Temps passé par tâche, totaux par projet

Métriques d'abonnement

MRR, taux d'attrition, taux de mise à niveau (pour les administrateurs)

Déployer votre SaaS

Déploiement en un clic sur l'edge mondial de Cloudflare :

Cliquez sur « Déployer » quand toutes les tâches sont validées
L'application est compilée pour la production (minifiée, optimisée)
Déploiement vers plus de 300 emplacements edge Cloudflare
Obtenez votre URL publique avec HTTPS automatique

Fonctionnalités prêtes pour la production

CDN mondial pour des temps de chargement rapides partout
Certificat SSL automatique
Protection DDoS incluse
Connectez un domaine personnalisé à tout moment
Variables d'environnement pour les clés API

Monétiser avec l'économie des créateurs

Transformez votre SaaS en revenus récurrents :

Publier

Listez sur la place de marché Nxcode avec vos tarifs

Définir les niveaux

Configurez l'essai gratuit et les niveaux d'abonnement payants

Gagnez 70 %

Gardez 70 % de tous les revenus d'abonnement

Exemple : 200 utilisateurs sur le niveau Pro à 10 $/mois = 1 400 $/mois de revenus passifs (après la part de 70 %)

Votre SaaS est livré avec Stripe intégré - les utilisateurs paient via votre compte Stripe, vous gardez 100 % moins les frais Stripe. Ou utilisez l'économie des créateurs pour une facturation gérée.

Ce que vous avez construit

Architecture SaaS multi-tenant
Espaces de travail d'équipe avec accès basé sur les rôles
Facturation d'abonnement Stripe
Fonctionnalités de collaboration en temps réel
Tableau de bord analytique avec rapports
Déploiement en production sur l'edge mondial

Votre SaaS n'a pas été assemblé à partir de modèles - chaque composant a été construit, testé et vérifié dans de réels conteneurs Docker. C'est une qualité de niveau entreprise sans les délais de l'entreprise.