Comment créer un job board avec l'IA

Avant d’écrire des prompts, définissez la version la plus simple et utile. La plupart des job boards n’ont pas besoin d’un tableau de bord employeur complexe dès le premier jour.

Une première version pratique comprend généralement :

• une page d’accueil avec recherche et offres mises en avant
• une page de listings avec filtres
• une page de détail d’offre
• un formulaire de candidature ou un lien externe pour postuler
• une page à propos ou tarifs si vous comptez facturer les employeurs

Déterminez qui sont les utilisateurs :

• les candidats qui parcourent les offres et postulent
• les employeurs qui publient des offres, si vous voulez plus tard une publication en libre-service
• un administrateur, si vous voulez valider les soumissions

Puis listez les données pour chaque offre. Les champs courants sont :

• intitulé du poste
• nom de l’entreprise
• lieu
• statut télétravail ou sur site
• fourchette de salaire
• type de contrat
• catégorie ou équipe
• description
• URL de candidature ou formulaire de candidature
• date de publication

Si vous voulez seulement un job board éditorialisé, vous n’avez peut-être pas besoin de connexion au départ. Si les employeurs doivent soumettre eux-mêmes leurs offres, ajoutez plus tard une base de données et la connexion avec Supabase.

Votre premier prompt doit ressembler à une courte spécification. Soyez précis sur les pages, les champs, la mise en page et les interactions. Moremade transforme une description en langage naturel en aperçu d’application fonctionnelle et génère le code source correspondant.

Un bon premier prompt précise :

• le type de site
• les pages requises
• les champs de données des offres
• les filtres et le comportement de recherche
• le style visuel
• ce qui doit se passer quand quelqu’un clique sur Postuler

Exemple de prompt :

Créez un site de job board pour des postes tech et design. Utilisez une mise en page propre et simple avec une page d’accueil, une page de listings d’offres et une page de détail d’offre. Chaque offre doit afficher le titre, l’entreprise, le lieu, le statut télétravail, la fourchette de salaire, le type de contrat, la catégorie, la date de publication et un bref résumé. Ajoutez une recherche par mot-clé et des filtres par lieu, catégorie, statut télétravail et type de contrat. Sur la page de détail, incluez une description complète et un bouton Postuler. Pour l’instant, faites en sorte que Postuler ouvre une page de formulaire de candidature plutôt qu’un lien externe. Utilisez une typographie claire et des cartes et formulaires adaptés au mobile.

Une fois que Moremade génère la première version, examinez-la comme un prototype fonctionnel plutôt que comme un produit fini. Parcourez les pages, vérifiez les espacements, testez les filtres et voyez si les informations de l’offre sont faciles à lire.

Faites de petites demandes de suivi concrètes au lieu de réécrire tout le brief. Cela produit généralement des itérations plus propres.

Trois exemples de prompts de suivi :

• "Changez la page de listings en une mise en page à deux colonnes sur desktop, avec les filtres dans une barre latérale gauche et les résultats à droite. Gardez les filtres dans un panneau coulissant sur mobile."
• "Ajoutez des badges pour Remote, Full-time et la fourchette de salaire sur chaque carte d’offre, et rendez le nom de l’entreprise et la date de publication moins visibles que le titre."
• "Sur la page de détail de l’offre, remontez le bouton Postuler, ajoutez un panneau récapitulatif collant sur desktop, et affichez le lieu, le type de contrat et le salaire dans une ligne de métadonnées compacte."

Si un élément précis ne convient pas, utilisez l’inspecteur visuel pour le pointer et décrire le changement. Si vous voulez vérifier ou ajuster directement des détails d’implémentation, utilisez la vue code.

Un job board statique d’exemple suffit pour le design et la structure, mais un vrai job board a généralement besoin de données stockées. Dans Moremade, Supabase est l’option intégrée pour la base de données, la connexion et le stockage de fichiers.

Utilisez Supabase si vous avez besoin de :

• permettre aux employeurs de soumettre des offres
• laisser des administrateurs examiner ou modifier les listings
• permettre aux candidats de créer un compte
• gérer des logos ou pièces jointes téléversés

Une suite logique consiste à demander une table jobs et un flux de soumission simple. Par exemple, vous pouvez demander à Moremade de connecter Supabase et de créer un formulaire qui enregistre les nouvelles offres dans la base de données.

Vous n’avez pas besoin de paiements sauf si les employeurs paient pour publier. Si votre job board est gratuit, ignorez Stripe pour l’instant.

Ajoutez Stripe seulement si vous voulez un parcours de publication payant, par exemple :

• l’employeur choisit une formule de publication
• le paiement s’effectue avec un prix que vous définissez
• l’employeur accède à un formulaire de soumission après paiement

Gardez la première version simple. La recherche, les filtres et un flux de candidature fiable comptent plus que les systèmes de comptes que la plupart des premiers job boards n’utilisent jamais.

Les job boards génèrent beaucoup de trafic mobile, alors vérifiez soigneusement l’expérience sur petit écran. Une mise en page qui semble correcte sur desktop se dégrade souvent lorsque les filtres, les longs titres et les formulaires se disputent l’espace.

Testez ces points :

• le champ de recherche et les contrôles de filtre sont faciles à utiliser avec les pouces
• les cartes ne deviennent pas trop hautes ni trop chargées visuellement
• le salaire, le lieu et le statut télétravail restent lisibles sur un écran étroit
• le bouton Postuler est évident sur la page de détail
• le formulaire de candidature est court et utilisable sur mobile

Si quelque chose paraît serré, demandez des corrections précises. Par exemple :

• "Réduisez le padding vertical des cartes d’offre sur mobile et gardez les métadonnées sur deux lignes compactes."
• "Transformez les filtres en chips desktop en panneau coulissant sur mobile."
• "Faites du formulaire de candidature une seule colonne sur toutes les tailles d’écran et augmentez la hauteur des champs pour l’usage tactile."

Testez aussi les états vides. Un job board a besoin d’un bon message sans résultat et d’une action claire pour réinitialiser les filtres.

Quand le site fonctionne, publiez-le. Moremade peut publier en un clic sur un sous-domaine gratuit yourname.moremade.ai. C’est utile pour une relecture, des tests internes ou un lancement anticipé.

Si vous êtes sur une offre payante, vous pouvez connecter un domaine personnalisé. Vous pouvez aussi acheter des domaines directement dans Moremade.

Un déploiement pratique ressemble à ceci :

• publier sur un sous-domaine Moremade
• tester le site en ligne sur desktop et mobile
• vérifier les formulaires, les liens et le chargement des pages
• connecter votre domaine personnalisé une fois la structure stabilisée

Comme le projet est du vrai code React + Tailwind, vous pouvez exporter le code source complet en ZIP à tout moment ou le pousser vers GitHub. C’est utile si vous voulez changer d’hébergement, confier le code à un développeur ou étendre le projet en dehors de l’éditeur plus tard.

La plupart des problèmes viennent du fait de demander trop de choses au premier passage ou d’ajouter des systèmes avant d’en avoir besoin.

Surveillez ces erreurs :

• Commencer avec trop de types d’utilisateurs. Si vous lancez en même temps les candidats, les employeurs et les administrateurs, l’application devient vite complexe.
• Prompts vagues. "Créez un job board moderne" ne suffit pas. Nommez les pages, les champs et les actions.
• Surconstruire les paiements. Si personne ne paie encore, n’ajoutez pas Stripe tant que le flux de publication n’est pas validé.
• Ignorer la structure des données d’offre. Les filtres ne fonctionnent bien que si des champs comme le lieu, le type de contrat et la catégorie sont définis de façon cohérente.
• Sauter la vérification mobile. Les métadonnées denses et les contrôles de filtre deviennent souvent gênants sur téléphone.
• Modifier trop de choses à la fois. Les petits changements sont plus faciles à valider qu’une refonte complète à chaque itération.

Pour un premier lancement, visez la clarté : une bonne recherche, des filtres utiles, des pages de détail lisibles et un flux de candidature qui fonctionne.