Aller au contenu
PYCOLORSDocumentation

Installation

Gratuit localement en quelques minutes et explorez toute la surface SaaS.

Starter FreeMise à jour 27 avril 2026
DémarrageGratuit

Vue d’ensembleLien vers la section

Starter Free est conçu pour vous faire passer de zéro à une surface SaaS utilisable en quelques minutes.

À la fin de ce guide, vous aurez un environnement produit local fonctionnant avec:

  • auth écrans
  • tableau de bord
  • projets
  • admin
  • facturation
  • paramètres

Pas de base de données. Pas de touches Stripe. Pas de secrets.

Starter Free est intentionnellement simulé afin que vous puissiez évaluer la surface du produit avant de câbler les services backend.

Qu'est-ce que Starter Free

Starter Free vous aide à valider rapidement l'orientation du produit avec une surface d'interface utilisateur adaptées à la production, sans avoir besoin d'auth, de facturation ou de configuration de la base de données.

Ce que vous allez faireLien vers la section

Exécuter le starter

Clonez le dépôt, installez les dépendances et démarrez le serveur de développement.

Valider les routes

Vérifiez les routes des produits de base et confirmez les charges de surface SaaS correctement.

Commencer l'édition

Renommez l'entité principale, mettez à jour la copie du tableau de bord et adaptez les données simulées à votre produit.

PréalablesLien vers la section

Assurez-vous que votre environnement comprend :

  • Node.js 18 ou plus récent
  • pnpm
  • Git

Recommandé : utilisez la dernière version de Node.js LTS.

terminal
node -v
pnpm -v
git --version

Gestionnaire de paquets

Starter Free est conçu autour de pnpm. L'utilisation de npm ou de laine peut créer des incohérences de fichier de verrouillage et de dépendance.

ÉtapesLien vers la section

Cloner le dépôtLien vers la section

Clonez le starter et allez dans le répertoire du projet.

terminal
git clone https://github.com/pycolors-io/pycolors-starter-free.git
cd pycolors-starter-free

Installer les dépendancesLien vers la section

Installez la base de référence locale.

terminal
pnpm install

Ceci installe la pile de démarrage :

Zone de dépendanceInclus
CadreNext.js App Router
StylingTailwind CSS v4
UIPyColors UI
LangueTypeScript
QualitéESLint

Démarrez le serveur de développementLien vers la section

Exécutez l'application localement.

terminal
pnpm dev

Puis ouvrir :

browser
http://localhost:3000

Vous devriez atterrir sur la surface locale du produit Starter Free.

Valider le starterLien vers la section

Ouvrez les routes principales :

routes
/
/login
/register
/dashboard
/projects
/admin
/billing
/settings

Si les routes se chargent correctement et que la navigation fonctionne, l'installation est terminée.

Comportement attendu

Starter Free est intentionnellement simulé. Vous devriez être en mesure d'explorer les écrans, les mises en page et les flux de produits immédiatement sans configuration backend ou configuration secrète.

Les premières choses à essayerLien vers la section

Une fois que l'application est en cours d'exécution, faites un petit changement de produit avant de brancher quoi que ce soit.

Modifiez le titre du tableau de bord.

file
app/(app)/dashboard/page.tsx

Modifiez le texte d'en-tête et enregistrez. Le rechargement à chaud devrait mettre à jour le navigateur instantanément.

Ce que vous devriez voirLien vers la section

À ce stade, vous devriez avoir une surface SaaS locale avec:

  • auth écrans
  • tableau de bord
  • CRUD UI
  • surface d'administration
  • surface de facturation
  • structure des paramètres
  • rechargement à chaud

Bon signe

Si l'interface utilisateur se charge correctement et que la navigation fonctionne, votre configuration est suffisamment valide pour commencer l'exploration de produits et l'itération UX.

Pièges courantsLien vers la section

Starter Free ne nécessite pas :

  • URL de la base de données
  • Auth Secrets
  • Touches à rayures
  • informations d'identification du fournisseur de messagerie
  • Configuration de l'API backend

Tout est ridiculisé par le design.

Préférez

  • Utiliser PNPM de manière cohérente
  • Valider les routes avant de les éditer
  • changer une surface de produit en premier
  • garder des données simulées tout en explorant UX
  • fil backend seulement après avoir compris le flux

Éviter

  • ajouter la configuration de la base de données avant que l'interface utilisateur ne soit comprise
  • utiliser npm et pnpm dans le même projet
  • supprimer les flux simulés avant de les explorer
  • Réécrire la mise en page avant de valider la structure du produit
  • Traiter Starter Free comme un modèle backend complet

DépannageLien vers la section

Prochaines étapesLien vers la section

Structure du projetComprendre comment la base de code est organisée avant d'étendre les fonctionnalités du produit.Concept d'authentificationDécouvrez comment l'authentification est modélisée avant de connecter un fournisseur réel.Concept de facturationComprendre comment la monétisation est préparée avant l'intégration de Stripe.Mise à niveau vers Starter ProProSachez quand Starter Free cesse d'être suffisant et Starter Pro devient le chemin le plus rapide.

Mise à niveau lorsque le câblage devient le bloqueur

Starter Free valide la surface du produit. Starter Pro relie la couche métier avec des fondations adaptées à la production, de facturation, de backend et de livraison. /docs/starter-pro

Sur cette page

Vue d’ensembleCe que vous allez fairePréalablesÉtapesLes premières choses à essayerCe que vous devriez voirPièges courantsDépannageProchaines étapes