Aller au contenu
supastack
Parcourir la documentation
MobileExpo

For AI agents: fetch the complete documentation index at /llms.txt, the full documentation corpus at /llms-full.txt, the agent skill at /skill.md, or this page as Markdown at /fr/docs/web/project-structure.md (or send Accept: text/markdown).

Structure du projet

Repérez l’application, les packages partagés et les frontières entre eux.

Poser une question sur ce guide
Ouvrir dans

Configuration et paramètres

Avant toute étape, lisez Avant de commencer et Principes de base du terminal. Ces instructions supposent que vous avez ouvert le monorepo supastack complet dans VS Code ; sa racine package.json marque la racine du référentiel. Dans les commandes pnpm, un package d'espace de travail est une application ou un dossier de code partagé ; dans le produit, un espace de travail est le conteneur de données et la limite de sécurité d'une équipe. corepack pnpm --filter ... sélectionne un package dans le monorepo tandis que les commandes sont exécutées à partir de sa racine. Si vous avez ouvert uniquement un dossier mobile ou de bureau synchronisé, il ne contient pas le backend Web, la configuration Docker ou les scripts racine : exécutez le backend à partir de ce monorepo ou d'un serveur hébergé accessible et utilisez les propres scripts du dossier de plateforme. Une variable d'environnement est un paramètre nommé stocké dans un fichier .env local ou dans votre tableau de bord d'hébergement ; redémarrez l'application concernée après l'avoir modifiée et conservez les secrets du serveur en dehors des valeurs NEXT_PUBLIC_ et EXPO_PUBLIC_.

1. Ouvrez le package.json racine dans VS Code, puis parcourez apps/web pour le site Web, apps/mobile pour Expo, apps/desktop pour le shell de bureau et les packages pour les éléments partagés.

2. À partir de la racine du référentiel, exécutez corepack pnpm --filter @supastack/web dev.

3. Ouvrir http://localhost:3000. Attendu : l'application Web démarre à partir de apps/web tandis que les packages partagés restent dans ce même référentiel ; la fenêtre du bureau enveloppe cette application Web plutôt que de contenir un deuxième produit.

L’espace de travail pnpm contient Next.js dans apps/web, Expo dans apps/mobile et les packages partagés sous packages. Exécutez les commandes de l’espace de travail depuis la racine du dépôt. Les routes d’application assemblent les modules partagés ; le comportement propre au produit appartient à l’application qui le consomme.

Lisez AGENTS.md et .ai/PROJECT_CONTEXT.md avant de modifier le comportement. Les fichiers miroirs dans .ai/ expliquent des choix et des contraintes qui ne sont pas toujours évidents à partir d’un composant seul.

apps/web/app/       Routes and layouts
apps/web/src/       Web components and server composition
apps/mobile/        Expo application
packages/           Shared contracts and adapters
tests/              Cross-module and browser checks
docs/               Operational guides

Commandes à copier

Suivez les commentaires pour voir dans quel dossier une commande s'exécute. Si deux terminaux sont étiquetés, ouvrez deux fenêtres de terminal et laissez la première commande s'exécuter pendant que vous utilisez la seconde.

corepack pnpm --filter @supastack/web dev

Où va une modification

Avant de modifier, décidez quelle app ou quel package possède le changement. La règle empirique : si une seule surface produit en a besoin, placez-la dans cette app ; si toutes les surfaces en ont besoin, placez-la dans un package partagé sous packages/.

Le dépôt Web et le monorepo All Platforms contiennent tous les dossiers ci-dessous. Un checkout Mobile ou Desktop autonome ne contient que sa propre app — le code serveur reste dans le dépôt Web.

  • Une nouvelle page marketing ou de destination → apps/web/app/ — le site public.
  • Un nouvel écran dans le produit connecté → apps/web/app/ pour la route plus apps/web/src/ pour sa logique — les pages composent les packages partagés.
  • Une nouvelle route d'API → apps/web/app/api/ — la moitié serveur de l'app Web.
  • Un changement partagé par toutes les apps — une table de base de données, un contrat, un adaptateur de fournisseur → le dossier correspondant dans packages/.
  • Un écran réservé au téléphone → apps/mobile/ — il parle à l'API de l'app Web plutôt que de contenir son propre backend.
  • Un comportement réservé au bureau → apps/desktop/ — le shell Tauri enveloppe l'app Web et ne duplique presque jamais l'UI produit.

Processus d’implémentation

Commencez par la route responsable de l’action utilisateur, suivez son gestionnaire serveur, puis examinez le package partagé qu’il appelle. Un composant UI ne doit pas recréer la résolution de l’espace de travail, l’autorisation de paiement ou le choix du fournisseur.

Lors de l’ajout d’une route, déterminez si elle est publique ou authentifiée. Pour une route authentifiée, résolvez les droits côté serveur avant d’accéder aux données utilisateur et gardez les identifiants serveur hors des imports client.

Vérification et dépannage

Si la commande signale qu'aucun projet ne correspond au filtre, vérifiez que le terminal se trouve dans le dossier contenant le package racine.json. Si le port 3000 est déjà utilisé, arrêtez d'abord l'autre serveur Web local. Ne recherchez pas une implémentation distincte de discussion sur le bureau ou de connexion ; le shell du bureau charge le backend Web.

Exécutez les tests et la vérification des types pertinents après avoir modifié un contrat de package. Examinez les consommateurs web et mobile si vous changez des types partagés. Une compilation web réussie ne suffit pas à établir la compatibilité avec l’application native.

Questions fréquentes

14 questions

Qu'est-ce que supastack ?

supastack est une fondation modulaire pour construire des produits SaaS avec IA. Elle réunit l'infrastructure commune pour que vous puissiez vous concentrer sur les fonctionnalités propres à votre produit.

Prend-il en charge le web et le mobile ?

Oui. supastack inclut des applications Next.js et Expo comme points de départ pour des expériences web et mobile.

Quelle authentification est incluse ?

Better Auth couvre e-mail/mot de passe, OTP et connexion sociale. Les espaces de travail personnels sont provisionnés avec le compte pour que les enregistrements restent délimités dès le premier jour.

Comment l'IA est-elle prise en charge ?

supastack inclut une IA multi-fournisseurs configurable, le suivi d'usage, des budgets, et la prise en charge chiffrée de vos propres clés (BYOK).

Comment les abonnements sont-ils gérés ?

Pour les produits construits sur le kit, la facturation Stripe, les abonnements et les droits d'accès forment la base de l'accès payant. Les secrets fournisseur restent côté serveur.

Où vit le code propre à mon produit ?

Les fonctionnalités propres au produit restent dans un codebase séparé, tandis que le produit configure et intègre les modules de la fondation supastack.

Comment fonctionne la tarification de supastack ?

Le kit est un achat unique avec mises à jour à vie : Un framework à 249 $ (prix de lancement temporaire — 100 $ de réduction par rapport au prix habituel de 349 $) ou Tous les frameworks (Next.js, iOS, Android) à 499 $ (prix de lancement temporaire — 100 $ de réduction par rapport au prix habituel de 599 $), plus 75 $ par siège développeur supplémentaire. Pas d'abonnement au kit. Le paiement sur ce site livre votre clé de licence par e-mail, avec accès au dépôt via invitation GitHub.

Comment les espaces de travail délimitent mes données ?

Les enregistrements appartenant aux utilisateurs sont délimités par workspaceId. Identité, droits d'accès, usage IA, événements de facturation et entrées d'audit restent dans le périmètre de l'espace personnel.

Comment fonctionnent les jobs en arrière-plan ?

Trigger.dev est le runtime de jobs explicite. Le contrat JobRunner ne promet que enqueue, status et cancel — la sémantique de workflow reste propre à Trigger.dev et explicite.

En quoi l'e-mail diffère-t-il de la prospection ?

L'e-mail transactionnel couvre les flux produit comme les avis de fin de tâche. La prospection à froid et les campagnes relèvent du produit, hors du module e-mail de ce kit.

Comment fonctionnent les achats sur mobile ?

Le mobile inclut les achats natifs et leur restauration via RevenueCat, avec un accès vérifié par votre serveur. Configurez les comptes des boutiques et terminez les tests sur appareil avant publication. La facturation web reste séparée.

Où vivent les clés des fournisseurs IA ?

Les identifiants BYOK sont chiffrés et restent côté serveur. Les clés sont masquées dans les journaux ; l'usage et les budgets restent visibles au niveau de l'espace de travail.

Quels moyens de paiement le checkout accepte-t-il ?

Le checkout hébergé par Stripe accepte les cartes et peut aussi proposer Alipay et WeChat Pay une fois ces portefeuilles activés sur le compte Stripe — pratique pour les acheteurs en Chine. Les autorisations de portefeuille se confirment de manière asynchrone : la page de licence se met à jour dès que le paiement est validé.

Puis-je obtenir un remboursement ?

Une fois que vous avez accès au dépôt, supastack vous appartient pour toujours et ne peut donc pas être remboursé. Mais rassurez-vous : vous obtenez le code source complet avec des mises à jour à vie pour créer et déployer un nombre illimité de produits pour vous ou vos clients. Vous ne pouvez simplement pas revendre le code ni redistribuer le dépôt sous forme de kit de démarrage ou de modèle.

FR
Thème