Waarom Atlas?
Atlas is geen UI-kit of een landingspagina: het is een werkdirectory en boekingsmarktplaats. Elk scherm hieronder is ondersteund door een echte PostgreSQL-schema (48 Drizzle-tabellen), serveracties, rolgebaseerde authenticatie en rijke seeddata, zodat je binnen enkele dagen in plaats van maanden een stads gids, een verhuurmarktplaats, een restaurantdirectory, een evenementenplatform of een niche-directory kunt lanceren.
Het dekt de hele cyclus: een bezoeker zoekt op de kaart, kiest een plek, boekt en betaalt, de eigenaar bevestigt vanuit hun dashboard, de directorybeheerder behoudt de commissie, en het platform beheert meerdere directories als een SaaS. Geen WordPress, geen plugins, geen page-builder lock-in.
- Standalone Next.js 16 + React 19 applicatie, 100% TypeScript, alle UI en code in het Engels
- Multi-tenant SaaS: subdomeinen of aangepaste domeinen per directory, plannen, proefversies en facturering
- Vier boekingsmodi: nachtverblijven, reserveringen voor één dag, uurslots en evenementtickets met QR-check-in
- Stripe Checkout + Stripe Connect uitbetalingen, contant bij aankomst, coupons, optionele kosten, aanbetalingen, terugbetalingen en een commissieboekhouding
- Zoeken met geclusterd kaart, filters, opgeslagen zoekopdrachten, vergelijken en "zoeken terwijl ik de kaart beweeg"
- 32-blok pagina builder, branding, navigatie, teksten en functie-instellingen — allemaal vanuit de admin
- Per-vermelding ontwerpstudio zodat elke eigenaar hun eigen openbare pagina kan stylen
- Beoordelingen met foto's en reacties, bladwijzers, claims, rapporten, leads, berichten en meldingen
- Bewerkbare e-mailtemplates, blog, nieuwsbrief en contactformulieren
- 12 niche-sjablonen (stads gids, verhuur, restaurants, evenementen, diensten, wellness…) op elk moment verwisselbaar
- Licht- en donkere modus, volledig responsief, toegankelijke componenten, SEO-metadata en OpenGraph
- Realistische demo-gegevens: 24 vermeldingen, boekingen, bestellingen, beoordelingen en gesprekken
01. Zie het werken: een bezoeker boekt in seconden
De boekingswidget past zich aan het type vermelding aan. Verblijven tonen een datumbereik kalender met nachtprijzen, schoonmaakkosten en stadsbelasting. Restaurants en diensten tonen een enkele dag met tijdslots berekend op basis van openingstijden, slotlengte en bestaande boekingen. Evenementen verkopen tickets met een capaciteitsmeter die nooit oververkocht kan worden. Gasten kunnen afrekenen zonder een account wanneer je dat toestaat, coupons toepassen en betalen met kaart of contant bij aankomst.
02. Een homepage die je directory verkoopt
De homepage is opgebouwd uit blokken: hero met zoekfunctie, categorieën, uitgelichte vermeldingen, hoe het werkt, statistieken, regio's, aankomende evenementen, beoordelingen en een oproep tot actie. Herordenen, verbergen of opnieuw stylen van elk blok vanuit de pagina builder; elke kop en label is bewerkbaar.
03. Kaart zoeken met filters
Zoekwoord, locatie, type vermelding, categorie, data, gasten, prijs, open-nu, directe boeking en geverifieerde filters. Resultaten synchroniseren met een geclusterde Leaflet-kaart (OpenStreetMap-tegels standaard, elke tegelprovider via een omgevingsvariabele). Bezoekers kunnen een zoekopdracht opslaan en meldingen ontvangen, of vermeldingen naast elkaar vergelijken.
04. Vermeldingpagina's waar eigenaren trots op zijn
Galerij, geverifieerde badge, beoordeling, prijsklasse, open-nu status, voorzieningen, aangepaste velden, menu of diensten met prijzen, video, locatiekaart, openingstijden, FAQ, hostkaart, beoordelingen en een persistente boekingssidebar. Eigenaren kunnen secties herordenen, aangepaste blokken toevoegen en de lay-out wijzigen vanuit hun eigen ontwerpstudio.
05. Eigenaar dashboard: een echte bedrijfs cockpit
Overzicht met omzetgrafiek en aankomende boekingen, vermeldingbeheerder, boekingen met goedkeuren / afwijzen / annuleren / inchecken, beschikbaarheidskalender met iCal import en export, berichten, leads, beoordelingen, statistieken, coupons, promoties (uitgelicht / gesponsord), teamleden, portemonnee met Stripe Connect onboarding en pakketten.
06. Directory admin: pas alles aan, geen code
Branding (logo, kleuren, lettertypen, straal), uiterlijk (kopstijl, aankondigingsbalk, voettekst), mega-menu navigatie, 127 bewerkbare tekststrings, functie-instellingen, e-mailtemplates, vermeldingstypes met aangepaste velden en taxonomieën, pakketten, advertenties, coupons, moderatie, claims, rapporten, gebruikers, analyses en tools. Wissel op elk moment tussen de 12 niche-sjablonen.
07. Voer het uit als een SaaS
Het hoofddomein is jouw platform: marketingwebsite, prijzen, aanmelding en een onboarding van 4 stappen die in enkele seconden een nieuwe directory op zijn eigen subdomein aanmaakt. Plannen met limieten (vermeldingen, gebruikers, functies), proefversies, Stripe Billing en een platform super-admin om sites, gebruikers en plannen te beheren. Of stel TENANCY_MODE=single in om één directory op één domein uit te voeren.
08. Mobiel, donkere modus en toegankelijkheid
Elke pagina werkt op telefoonbreedte zonder horizontale scroll, de donkere modus volgt het systeem of een schakelaar, componenten komen uit een origineel ontwerpsysteem (indigo merk, warme neutrale kleuren, Plus Jakarta Sans) met toetsenbordnavigatie en focusstatussen.
Functieverdeling per rol
Bezoekers / gasten: zoeken met kaart en filters · opgeslagen zoekopdrachten · vergelijken · bladwijzers · boek verblijven, tijdslots of tickets · gastafrekening · coupons · beoordelingen met foto's · berichten met hosts · reizen, tickets met QR en portemonnee
Eigenaren: vermeldingen met galerij, aangepaste velden, menu, FAQ, openingstijden en video · boekingsworkflow · beschikbaarheidskalender + iCal · leads en berichten · statistieken · coupons en promoties · teamleden · ontwerpatelier · Stripe Connect-portemonnee · pakketten
Directory-beheerders: branding, uiterlijk, navigatie, teksten, functies · pagina bouwer (32 blokken) · sjabloonwisselaar · vermeldingstypen, velden, taxonomieën · moderatie, claims, rapporten, beoordelingen · boekingen, bestellingen, uitbetalingen · pakketten, coupons, advertenties · e-mailtemplates · analytics · mediatheek · domein
Platformbeheerders: sites, gebruikers, plannen, opschorting, facturering
Technische stack
- Next.js 16 (App Router, serveracties, proxy-gebaseerde huurder routing)
- React 19, TypeScript, Tailwind CSS v4
- PostgreSQL 16 + Drizzle ORM (48 tabellen, migraties inbegrepen)
- Better Auth (e-mail + wachtwoord, sessies, wachtwoord reset)
- Stripe (Checkout, Billing, Connect) met een testmodus die werkt zonder sleutels
- Zod 4 validatie, Leaflet + supercluster kaarten, Recharts
- nodemailer (console transport in dev), node-ical / ical-generator, QR-codes
- Vitest (55 tests), ESLint, GitHub Actions CI, Docker + docker-compose, standalone output, health endpoint
Wat je krijgt
- Volledige broncode van het platform, directory, eigenaar dashboard en admin
- 12 niche-sjablonen met seed-scripts en demo-inhoud
- Database-migraties, cronjobs en een opslagdriverinterface (lokaal / S3-compatibel)
- Architectuurgids, README met implementatie, Stripe en SMTP-configuratie, privacy- en gegevensgids, derdenmeldingen, changelog
Installeer in 4 stappen
pnpm install- Kopieer
.env.example naar .env en stel DATABASE_URL, ROOT_DOMAIN en BETTER_AUTH_SECRET in pnpm db:migrate && pnpm seedpnpm dev en open het platform op jouw hoofddomein en de demo op demo.<root domain>
Vereisten
- Node.js 20 of nieuwer en pnpm
- PostgreSQL 16 (Docker compose inbegrepen)
Demo-accounts (na het zaaien)
De seed creëert demo-accounts voor lokale evaluatie: admin@atlas.test (platform + directory admin), sofia@nooks.test (eigenaar) en emma@nooks.test (gast). Er is geen ingebouwd wachtwoord: stel DEMO_PASSWORD in jouw .env in, of laat de seed een willekeurig wachtwoord genereren en opslaan in .seed-credentials.txt. De seed weigert te draaien in productie zonder een expliciete DEMO_PASSWORD.
Goed om te weten
- Clean-room build: originele code en origineel ontwerpsysteem, geen GPL-thema code of gelicentieerde activa
- Stripe is optioneel; zonder sleutels draait de checkout in een testmodus die je onmiddellijk kunt demonstreren
- Alle openbare strings zijn bewerkbaar vanuit de admin, zodat je de frontend naar elke taal kunt vertalen
- Beveiligingsstandaarden: rate-limited aanmelding en wachtwoordreset, beveiligingsheaders, opstartconfiguratiecontrole, geen analytics of scripts van derden standaard geladen
−27%
