Perché Atlas?
Atlas non è un kit UI o una pagina di atterraggio: è un directory di lavoro e marketplace di prenotazione. Ogni schermata qui sotto è supportata da uno schema PostgreSQL reale (48 tabelle Drizzle), azioni server, autenticazione basata su ruoli e dati di seed ricchi, così puoi lanciare una guida della città, un marketplace di affitti, un directory di ristoranti, una piattaforma di eventi o qualsiasi directory di nicchia in giorni anziché mesi.
Copre l'intero ciclo: un visitatore cerca sulla mappa, sceglie un luogo, prenota e paga, il proprietario conferma dal proprio dashboard, l'amministratore della directory trattiene la commissione e la piattaforma gestisce molte directory come un SaaS. Niente WordPress, niente plugin, niente blocco del page-builder.
- Applicazione standalone Next.js 16 + React 19, 100% TypeScript, tutta l'interfaccia e il codice in inglese
- SaaS multi-tenant: sottodomini o domini personalizzati per directory, piani, prove e fatturazione
- Quattro modalità di prenotazione: soggiorni notturni, prenotazioni per un giorno, slot orari e biglietti per eventi con check-in QR
- Stripe Checkout + pagamenti Stripe Connect, pagamento in contante all'arrivo, coupon, spese opzionali, depositi, rimborsi e un registro delle commissioni
- Ricerca con mappa raggruppata, filtri, ricerche salvate, confronta e "cerca mentre muovo la mappa"
- Costruttore di pagine a 32 blocchi, branding, navigazione, testi e attivazione delle funzionalità — tutto dall'amministratore
- Studio di design per ogni annuncio in modo che ogni proprietario possa stilizzare la propria pagina pubblica
- Recensioni con foto e risposte, segnalibri, reclami, rapporti, lead, messaggistica e notifiche
- Modelli di email modificabili, blog, newsletter e moduli di contatto
- 12 modelli di nicchia (guida della città, affitti, ristoranti, eventi, servizi, benessere…) switchabili in qualsiasi momento
- Modalità chiara e scura, completamente responsive, componenti accessibili, metadati SEO e OpenGraph
- Dati demo realistici: 24 annunci, prenotazioni, ordini, recensioni e conversazioni
01. Vedi come funziona: un visitatore prenota in pochi secondi
Il widget di prenotazione si adatta al tipo di annuncio. I soggiorni mostrano un calendario con intervallo di date con prezzi notturni, spese di pulizia e tassa di soggiorno. Ristoranti e servizi mostrano un giorno singolo con slot orari calcolati in base agli orari di apertura, alla lunghezza dello slot e alle prenotazioni esistenti. Gli eventi vendono biglietti con un contatore di capacità che non può mai sovraprenotare. Gli ospiti possono effettuare il check-out senza un account quando lo consenti, applicare coupon e pagare con carta o in contante all'arrivo.
02. Una homepage che vende la tua directory
La homepage è costruita da blocchi: eroe con ricerca, categorie, annunci in evidenza, come funziona, statistiche, regioni, eventi in arrivo, recensioni e una call to action. Riordina, nascondi o ridisegna ogni blocco dal costruttore di pagine; ogni titolo e etichetta è modificabile.
03. Ricerca sulla mappa con filtri
Parola chiave, posizione, tipo di annuncio, categoria, date, ospiti, prezzo, aperto ora, prenotazione istantanea e filtri verificati. I risultati si sincronizzano con una mappa Leaflet raggruppata (tile OpenStreetMap per impostazione predefinita, qualsiasi fornitore di tile tramite una variabile di ambiente). I visitatori possono salvare una ricerca e ricevere notifiche, o confrontare gli annunci fianco a fianco.
04. Pagine degli annunci di cui i proprietari sono orgogliosi
Galleria, badge verificato, valutazione, fascia di prezzo, stato aperto ora, servizi, campi personalizzati, menu o servizi con prezzi, video, mappa della posizione, orari di apertura, FAQ, scheda host, recensioni e una barra laterale di prenotazione persistente. I proprietari possono riordinare le sezioni, aggiungere blocchi personalizzati e cambiare il layout dal proprio studio di design.
05. Dashboard del proprietario: un vero cockpit aziendale
Panoramica con grafico delle entrate e prenotazioni in arrivo, gestore degli annunci, prenotazioni con approva / rifiuta / annulla / check-in, calendario delle disponibilità con importazione ed esportazione iCal, messaggi, lead, recensioni, statistiche, coupon, promozioni (in evidenza / sponsorizzate), membri del team, portafoglio con onboarding Stripe Connect e pacchetti.
06. Amministratore della directory: personalizza tutto, senza codice
Branding (logo, colori, font, raggio), aspetto (stile intestazione, barra di annuncio, piè di pagina), navigazione mega-menu, 127 stringhe di testo modificabili, attivazione delle funzionalità, modelli di email, tipi di annunci con campi e tassonomie personalizzati, pacchetti, annunci, coupon, moderazione, reclami, rapporti, utenti, analisi e strumenti. Passa tra i 12 modelli di nicchia in qualsiasi momento.
07. Eseguilo come SaaS
Il dominio principale è la tua piattaforma: sito di marketing, prezzi, registrazione e un onboarding in 4 fasi che crea un nuovo directory sul suo sottodominio in pochi secondi. Piani con limiti (annunci, utenti, funzionalità), prove, fatturazione Stripe e un super-amministratore della piattaforma per gestire siti, utenti e piani. Oppure imposta TENANCY_MODE=single per eseguire una directory su un dominio.
08. Mobile, modalità scura e accessibilità
Ogni pagina funziona alla larghezza del telefono senza scorrimento orizzontale, la modalità scura segue il sistema o un interruttore, i componenti provengono da un sistema di design originale (marchio indigo, neutri caldi, Plus Jakarta Sans) con navigazione da tastiera e stati di messa a fuoco.
Suddivisione delle funzionalità per ruolo
Visitatori / ospiti: ricerca con mappa e filtri · ricerche salvate · confronto · segnalibri · prenotare soggiorni, slot o biglietti · checkout per ospiti · coupon · recensioni con foto · messaggi con gli host · viaggi, biglietti con QR e portafoglio
Proprietari: annunci con galleria, campi personalizzati, menu, FAQ, orari e video · flusso di lavoro delle prenotazioni · calendario delle disponibilità + iCal · contatti e messaggi · statistiche · coupon e promozioni · membri del team · studio di design · portafoglio Stripe Connect · pacchetti
Amministratori della directory: branding, aspetto, navigazione, testi, funzionalità · costruttore di pagine (32 blocchi) · selettore di modelli · tipi di annunci, campi, tassonomie · moderazione, reclami, rapporti, recensioni · prenotazioni, ordini, pagamenti · pacchetti, coupon, annunci · modelli email · analisi · libreria multimediale · dominio
Amministratori della piattaforma: siti, utenti, piani, sospensione, fatturazione
Stack tecnologico
- Next.js 16 (App Router, azioni del server, routing tenant basato su proxy)
- React 19, TypeScript, Tailwind CSS v4
- PostgreSQL 16 + Drizzle ORM (48 tabelle, migrazioni incluse)
- Better Auth (email + password, sessioni, reset della password)
- Stripe (Checkout, Billing, Connect) con una modalità di test che funziona senza chiavi
- Validazione Zod 4, Leaflet + supercluster maps, Recharts
- nodemailer (console transport in dev), node-ical / ical-generator, codici QR
- Vitest (55 test), ESLint, GitHub Actions CI, Docker + docker-compose, output autonomo, endpoint di salute
Cosa ottieni
- Codice sorgente completo della piattaforma, directory, dashboard del proprietario e amministratore
- 12 modelli di nicchia con script di semina e contenuti demo
- Migrazioni del database, cron job e un'interfaccia del driver di archiviazione (locale / compatibile con S3)
- Guida all'architettura, README con distribuzione, configurazione di Stripe e SMTP, guida alla privacy e ai dati, avvisi di terze parti, changelog
Installa in 4 passaggi
pnpm install- Copia
.env.example in .env e imposta DATABASE_URL, ROOT_DOMAIN e BETTER_AUTH_SECRET pnpm db:migrate && pnpm seedpnpm dev e apri la piattaforma al tuo dominio principale e la demo a demo.<root domain>
Requisiti
- Node.js 20 o superiore e pnpm
- PostgreSQL 16 (Docker compose incluso)
Account demo (dopo la semina)
Il seme crea account demo per valutazione locale: admin@atlas.test (amministratore della piattaforma + directory), sofia@nooks.test (proprietario) e emma@nooks.test (ospite). Non c'è password integrata: imposta DEMO_PASSWORD nel tuo .env, oppure lascia che il seme generi una casuale e la salvi in .seed-credentials.txt. Il seme rifiuta di essere eseguito in produzione senza un esplicito DEMO_PASSWORD.
Buono a sapersi
- Costruzione in camera pulita: codice originale e sistema di design originale, nessun codice di tema GPL o asset con licenza
- Stripe è facoltativo; senza chiavi il checkout funziona in una modalità di test che puoi dimostrare immediatamente
- Tutte le stringhe pubbliche sono modificabili dall'amministratore, quindi puoi tradurre il front end in qualsiasi lingua
- Impostazioni di sicurezza predefinite: accesso limitato, reset della password, intestazioni di sicurezza, controllo della configurazione all'avvio, nessuna analisi o script di terze parti caricati per impostazione predefinita
−27%
