Premiers pas
Choisissez votre produit PyColors, suivez son guide d’installation et vérifiez le fonctionnement de votre premier écran.
Choisissez votre point de départLien vers la section
Choisissez le produit adapté à votre projet. Chaque guide présente les prérequis, les commandes d’installation et les vérifications à effectuer avant de personnaliser votre application.
Un seul produit pour commencer
Il n’est pas nécessaire d’installer tous les produits PyColors. Utilisez PyColors UI dans une application existante, Starter Free pour explorer une interface SaaS, un template pour créer une landing page ou Starter Pro pour disposer également des fondations côté serveur.
Avant de commencerLien vers la section
- PyColors UI : disposez d’une application React avec Tailwind CSS v4 et une feuille de style globale. Le guide d’installation détaille les prérequis et la configuration CSS.
- Starter Free : installez Git, Node.js et pnpm, puis clonez le dépôt public en suivant le guide d’installation. L’authentification, la facturation et les données sont simulées : aucun identifiant de service de production n’est nécessaire pour les explorer.
- NA-AI Landing : téléchargez et décompressez le template acheté, puis suivez le guide de configuration. Le template de base comprend uniquement le frontend.
- Starter Pro : téléchargez et décompressez le starter acheté, puis suivez les étapes de configuration locale, qui couvrent l’environnement et la base de données.
Pour un starter ou un template, utilisez les versions de Node.js et du gestionnaire de paquets indiquées dans le projet téléchargé. Exécutez les commandes à la racine de ce projet. Pour PyColors UI, installez le package directement dans l’application qui l’utilisera.
Vérifiez votre premier résultatLien vers la section
Effectuez les vérifications du guide choisi avant de modifier la structure du projet.
PyColors UILien vers la section
Suivez le guide d’installation pour installer les packages, charger les tokens CSS, configurer l’analyse Tailwind et afficher l’exemple de carte.
Votre application doit afficher une carte et un lien correctement stylés. Vérifiez les modes clair et sombre, la visibilité du focus au clavier et la compilation de l’application. Consultez ensuite les exemples de composition pour construire votre prochain écran, ou le guide de migration pour remplacer une interface existante.
Starter FreeLien vers la section
Suivez le guide d’installation, démarrez le serveur local, puis ouvrez /dashboard et /projects. Testez une action sur un projet et consultez les paramètres.
Vous disposez d’une démo SaaS navigable avec des données d’exemple. Continuez avec le premier parcours, puis adaptez un écran à votre produit. Ces écrans ne créent ni compte réel, ni paiement, ni données persistantes côté serveur.
NA-AI LandingLien vers la section
Suivez le guide de configuration pour lancer le template téléchargé. Vérifiez la page d’accueil en mode clair et sombre, puis exécutez la commande de compilation de production indiquée.
Vous disposez d’une landing page locale qui compile correctement. Consultez ensuite le guide de personnalisation pour adapter l’identité visuelle et le contenu.
Starter ProLien vers la section
Suivez le guide Premiers pas dans l’ordre : décompressez le ZIP, installez les dépendances, configurez l’environnement et la base de données, puis démarrez l’application. Vérifiez la connexion et les routes protégées avant de personnaliser le produit.
Vous disposez d’une base applicative fonctionnelle en local. Avant le lancement, suivez également les guides de configuration et de validation de l’authentification, de la facturation et de la livraison. Une application qui démarre en local ne suffit pas à valider ces systèmes en production.
Si l’installation ne fonctionne pasLien vers la section
- Les composants s’affichent sans style : vérifiez le CSS global et le chemin d’analyse du package. Installer le package JavaScript ne suffit pas à générer ses styles Tailwind.
- Une dépendance ou une commande échoue : comparez vos versions de Node.js et de pnpm avec celles indiquées dans le projet téléchargé avant de réinstaller. Consultez ensuite la section de dépannage du guide concerné.
- Starter Free ne crée pas de comptes réels ni de paiements : c’est la limite prévue de ce starter frontend. Consultez le guide de mise à niveau lorsque vous souhaitez connecter un backend.
Une fois ces vérifications terminées, poursuivez avec le guide suivant de votre produit. Revenez à cette page si votre projet nécessite un autre produit PyColors.