Pourquoi Atlas ?
Atlas n'est pas un kit UI ou une page de destination : c'est un répertoire de travail et un marché de réservation. Chaque écran ci-dessous est soutenu par un véritable schéma PostgreSQL (48 tables Drizzle), des actions serveur, une authentification basée sur les rôles et des données de semence riches, vous permettant de lancer un guide de ville, un marché de locations, un annuaire de restaurants, une plateforme d'événements ou tout répertoire de niche en quelques jours au lieu de mois.
Il couvre tout le cycle : un visiteur recherche sur la carte, choisit un endroit, réserve et paie, le propriétaire confirme depuis son tableau de bord, l'administrateur du répertoire conserve la commission, et la plateforme gère de nombreux répertoires en tant que SaaS. Pas de WordPress, pas de plugins, pas de verrouillage de constructeur de pages.
- Application autonome Next.js 16 + React 19, 100 % TypeScript, toute l'UI et le code en anglais
- SaaS multi-locataires : sous-domaines ou domaines personnalisés par répertoire, plans, essais et facturation
- Quatre modes de réservation : séjours nocturnes, réservations d'une journée, créneaux horaires et billets d'événements avec check-in QR
- Stripe Checkout + paiements Stripe Connect, espèces à l'arrivée, coupons, frais optionnels, dépôts, remboursements et un registre de commissions
- Recherche avec carte regroupée, filtres, recherches sauvegardées, comparaison et "recherche en déplaçant la carte"
- Constructeur de pages à 32 blocs, branding, navigation, textes et bascules de fonctionnalités — tout depuis l'administration
- Studio de design par annonce pour que chaque propriétaire puisse styliser sa propre page publique
- Avis avec photos et réponses, signets, réclamations, rapports, pistes, messagerie et notifications
- Modèles d'e-mails éditables, blog, newsletter et formulaires de contact
- 12 modèles de niche (guide de ville, locations, restaurants, événements, services, bien-être…) interchangeables à tout moment
- Mode clair et sombre, entièrement réactif, composants accessibles, métadonnées SEO et OpenGraph
- Données de démonstration réalistes : 24 annonces, réservations, commandes, avis et conversations
01. Voyez-le fonctionner : un visiteur réserve en quelques secondes
Le widget de réservation s'adapte au type d'annonce. Les séjours affichent un calendrier de plage de dates avec des prix nocturnes, des frais de nettoyage et une taxe de ville. Les restaurants et services affichent une seule journée avec des créneaux horaires calculés à partir des heures d'ouverture, de la durée des créneaux et des réservations existantes. Les événements vendent des billets avec un compteur de capacité qui ne peut jamais être dépassé. Les invités peuvent passer à la caisse sans compte lorsque vous le permettez, appliquer des coupons et payer par carte ou en espèces à l'arrivée.
02. Une page d'accueil qui vend votre répertoire
La page d'accueil est construite à partir de blocs : héros avec recherche, catégories, annonces en vedette, comment ça marche, statistiques, régions, événements à venir, avis et un appel à l'action. Réorganisez, cachez ou redessinez chaque bloc depuis le constructeur de pages ; chaque titre et étiquette est éditable.
03. Recherche sur la carte avec filtres
Mots-clés, emplacement, type d'annonce, catégorie, dates, invités, prix, ouvert maintenant, réservation instantanée et filtres vérifiés. Les résultats se synchronisent avec une carte Leaflet regroupée (tuiles OpenStreetMap par défaut, tout fournisseur de tuiles via une variable d'environnement). Les visiteurs peuvent sauvegarder une recherche et être notifiés, ou comparer les annonces côte à côte.
04. Pages d'annonces dont les propriétaires sont fiers
Galerie, badge vérifié, évaluation, fourchette de prix, statut ouvert maintenant, commodités, champs personnalisés, menu ou services avec prix, vidéo, carte de localisation, heures d'ouverture, FAQ, carte de l'hôte, avis et une barre latérale de réservation persistante. Les propriétaires peuvent réorganiser les sections, ajouter des blocs personnalisés et changer la mise en page depuis leur propre studio de design.
05. Tableau de bord du propriétaire : un véritable cockpit d'affaires
Aperçu avec graphique de revenus et réservations à venir, gestionnaire d'annonces, réservations avec approbation / refus / annulation / check-in, calendrier de disponibilité avec importation et exportation iCal, messages, pistes, avis, statistiques, coupons, promotions (en vedette / sponsorisées), membres de l'équipe, portefeuille avec intégration Stripe Connect et forfaits.
06. Administration du répertoire : personnalisez tout, sans code
Branding (logo, couleurs, polices, rayon), apparence (style d'en-tête, barre d'annonce, pied de page), navigation méga-menu, 127 chaînes de texte éditables, bascules de fonctionnalités, modèles d'e-mails, types d'annonces avec champs personnalisés et taxonomies, forfaits, annonces, coupons, modération, réclamations, rapports, utilisateurs, analyses et outils. Changez entre les 12 modèles de niche à tout moment.
07. Exécutez-le en tant que SaaS
Le domaine racine est votre plateforme : site marketing, tarification, inscription et un processus d'intégration en 4 étapes qui provisionne un nouveau répertoire sur son propre sous-domaine en quelques secondes. Plans avec limites (annonces, utilisateurs, fonctionnalités), essais, facturation Stripe et un super administrateur de plateforme pour gérer les sites, les utilisateurs et les plans. Ou définissez TENANCY_MODE=single pour exécuter un répertoire sur un domaine.
08. Mobile, mode sombre et accessibilité
Chaque page fonctionne à la largeur du téléphone sans défilement horizontal, le mode sombre suit le système ou un basculement, les composants proviennent d'un système de design original (marque indigo, neutres chauds, Plus Jakarta Sans) avec navigation au clavier et états de focus.
Répartition des fonctionnalités par rôle
Visiteurs / invités : recherche avec carte et filtres · recherches enregistrées · comparaison · favoris · réservation de séjours, créneaux ou billets · paiement invité · coupons · avis avec photos · messages avec les hôtes · voyages, billets avec QR et portefeuille
Propriétaires : annonces avec galerie, champs personnalisés, menu, FAQ, heures et vidéo · flux de réservation · calendrier de disponibilité + iCal · prospects et messages · statistiques · coupons et promotions · membres de l'équipe · studio de design · portefeuille Stripe Connect · forfaits
Administrateurs de répertoire : branding, apparence, navigation, textes, fonctionnalités · constructeur de pages (32 blocs) · commutateur de modèles · types d'annonces, champs, taxonomies · modération, réclamations, rapports, avis · réservations, commandes, paiements · forfaits, coupons, annonces · modèles d'e-mail · analyses · bibliothèque multimédia · domaine
Administrateurs de plateforme : sites, utilisateurs, plans, suspension, facturation
Pile technologique
- Next.js 16 (App Router, actions serveur, routage des locataires basé sur un proxy)
- React 19, TypeScript, Tailwind CSS v4
- PostgreSQL 16 + Drizzle ORM (48 tables, migrations incluses)
- Better Auth (email + mot de passe, sessions, réinitialisation de mot de passe)
- Stripe (Checkout, Billing, Connect) avec un mode test qui fonctionne sans clés
- Validation Zod 4, Leaflet + supercluster maps, Recharts
- nodemailer (transport console en dev), node-ical / ical-generator, QR codes
- Vitest (55 tests), ESLint, GitHub Actions CI, Docker + docker-compose, sortie autonome, point de terminaison de santé
Ce que vous obtenez
- Code source complet de la plateforme, répertoire, tableau de bord propriétaire et administrateur
- 12 modèles de niche avec scripts de semence et contenu de démonstration
- Migrations de base de données, tâches cron et interface de pilote de stockage (local / compatible S3)
- Guide d'architecture, README avec déploiement, configuration de Stripe et SMTP, guide de confidentialité et de données, avis de tiers, journal des modifications
Installer en 4 étapes
pnpm install- Copiez
.env.example dans .env et définissez DATABASE_URL, ROOT_DOMAIN et BETTER_AUTH_SECRET pnpm db:migrate && pnpm seedpnpm dev et ouvrez la plateforme à votre domaine racine et la démo à demo.<root domain>
Exigences
- Node.js 20 ou plus récent et pnpm
- PostgreSQL 16 (Docker compose inclus)
Comptes de démonstration (après semis)
Le semis crée des comptes de démonstration pour évaluation locale : admin@atlas.test (administrateur de plateforme + répertoire), sofia@nooks.test (propriétaire) et emma@nooks.test (invité). Il n'y a pas de mot de passe intégré : définissez DEMO_PASSWORD dans votre .env, ou laissez le semis générer un mot de passe aléatoire et l'enregistrer dans .seed-credentials.txt. Le semis refuse de s'exécuter en production sans un DEMO_PASSWORD explicite.
Bon à savoir
- Construction en salle blanche : code original et système de design original, pas de code de thème GPL ou d'actifs sous licence
- Stripe est optionnel ; sans clés, le paiement fonctionne en mode test que vous pouvez démontrer immédiatement
- Toutes les chaînes publiques sont éditables depuis l'administrateur, vous pouvez donc traduire l'interface utilisateur dans n'importe quelle langue
- Defaults de sécurité : connexion et réinitialisation de mot de passe limitées, en-têtes de sécurité, vérification de configuration au démarrage, pas d'analyses ou de scripts tiers chargés par défaut
−27%
