OCTOBOATS: Yritystason jahtien ja luksusmatkojen varausalusta

Premium-tason Full-Stack SPA -ratkaisu, joka luo saumattoman varauskokemuksen ylellisille meriseikkailuille. Sisältää yritystason maksujärjestelmän, reaaliaikaisen saatavuuden hallinnan ja hienostuneen hallintapaneelin ylläpidolle.

Liiketoimintatarve

OCTOBOATS ratkaisee luksusjahtien ja elämysvarausten pirstoutuneen markkinan tarjoamalla yhtenäisen ja kitkattoman alustan, jossa asiakkaat voivat löytää, vertailla ja varata ensiluokkaisia merielämyksiä. Alusta muuttaa varausprosessin monimutkaisuuden intuitiiviseksi ja konversio-optimoiduksi kokemukseksi – nostaen keskimääräistä tilausarvoa (AOV) älykkäiden lisämyyntien, joustavien kampanjoiden ja strategisten ostoskorin palautusmekanismien avulla. OCTOBOATS on rakennettu alle sekunnin suorituskykyyn, 99,9 % maksuvarmuuteen ja saumattomaan skaalautuvuuteen, mikä osoittaa tuotantotason insinööritaitoja jokaisessa arkkitehtuurikerroksessa.

Keskeinen arvolupaus

Suorituskyky ja skaalautuvuus

Optimoitu kyselyiden suoritus: Eager-loading-suhteet strategisilla rajoitteilla N+1-ongelmien eliminoimiseksi ostoskorin, kassatoimintojen ja saatavuustarkistusten yhteydessä.
Älykäs välimuististrategia: 1 tunnin välimuisti etusivun tiedoille (kaupungit, venesatamat, jahtiluettelot) ja välimuistin tyhjennys kriittisten päivitysten yhteydessä, mikä vähentää tietokannan kuormitusta n. 70 % vilkkailla sivuilla.
Tietokanta-arkkitehtuuri: Polymorfiset suhteet yhtenäiselle varausmallille (käsittelee sekä jahdit että matkat), mikä mahdollistaa yhden liiketoimintalogiikan kerroksen eri tuotetyypeille.
Reaaliaikainen saatavuuden tarkistus: Kilpailutilanteita (race condition) sietävä saatavuuden vahvistus tietokantatapahtumien avulla kassatoiminnon aikana, mikä estää tuplavaraukset ja ylivaraukset.

UX/UI-erinomaisuus

Responsiivinen luksusmuotoilu: Mobile-first React-arkkitehtuuri Tailwind CSS v4:llä, joka tarjoaa pikselintarkan kokemuksen kaikilla näyttökoolla.
Konversio-optimoidut prosessit: Monivaiheinen kassa, jossa on progressiivinen tiedon näyttö, ostoskorin pysyvyys ja yhden klikkauksen lisämyynti.
Premium-komponenttikirjasto: Radix UI -headless-komponentit takaavat saavutettavuuden (WCAG 2.1 AA) tinkimättä muotoilun eleganssista.
Älykäs lomakkeiden käsittely: Palvelinpuolen validointi Laravel Form Requesteillä, reaaliaikainen asiakaspuolen palaute TypeScript-tyyppiturvallisuudella.
Tumman tilan tuki: Teeman pysyvyys localStorage-tallennuksella, ei välkkyviä tyylejä.

Turvallisuus ja luotettavuus

Vahvistettu tunnistautuminen: Laravel Fortify kaksivaiheisella tunnistautumisella (2FA/TOTP), istuntojen hallinnalla ja turvallisella salasanan tiivistyksellä (bcrypt).
Maksuturvallisuus: PCI-yhteensopiva Kashier-integraatio 3DS-tunnistautumisella, palvelinpuolen tapahtumien vahvistuksella ja webhook-allekirjoituksen validoinnilla.
Valtuutuskerros: Hienojakoinen käytäntöpohjainen pääsynhallinta (vain ylläpitäjille tarkoitettu kojelauta, käyttäjäkohtaiset varausnäkymät).
CSRF- ja XSS-suojaus: Laravelin natiivi väliohjelmisto suojaamaan kaikilta tilan muuttavilta operaatioilta.
Transaktioiden eheys: Tietokantatapahtumat webhook-käsittelyn aikana varmistavat, että varausmerkintöjä ei voi olla olemassa ilman vastaavia maksuja.

Tekninen arkkitehtuuri ja pino

┌─────────────────────────────────────────────────────────────────────┐ │ CLIENT LAYER (React 19) │ │ ┌─────────────┬──────────────┬──────────────┬──────────────────┐ │ │ │ Sivut │ Komponentit │ Hookit │ Palvelut │ │ │ │ (TypeScript)│ (Radix UI) │ (Custom) │ (API-kutsut) │ │ │ └─────────────┴──────────────┴──────────────┴──────────────────┘ │ │ ↓ Inertia Protocol ↓ │ ├─────────────────────────────────────────────────────────────────────┤ │ SERVER LAYER (Laravel 12, PHP 8.2) │ │ ┌──────────────────────────────────────────────────────────────┐ │ │ │ Ohjaimet (kevyet) → Form Requestit (validointi) → Käytännöt │ │ │ └──────────────────────────────────────────────────────────────┘ │ │ ┌──────────────────────────────────────────────────────────────┐ │ │ │ Liiketoimintalogiikan palvelut │ │ │ │ • KashierPaymentService (maksujen orkestratointi) │ │ │ │ • KashierWebhookService (tapahtumien käsittely) │ │ │ │ • PageServices (toimialakohtainen tiedon aggregointi) │ │ │ └──────────────────────────────────────────────────────────────┘ │ │ ┌──────────────────────────────────────────────────────────────┐ │ │ │ Eloquent-mallit ja suhteet │ │ │ │ • Polymorfiset varaukset (Jahti/Matka) │ │ │ │ • Saatavuuden hallinta (reaaliaikainen validointi) │ │ │ │ • Ostoskorijärjestelmä (monituotteinen, pysyvä) │ │ │ └──────────────────────────────────────────────────────────────┘ │ ├─────────────────────────────────────────────────────────────────────┤ │ DATABASE LAYER (MySQL/Postgres) │ │ ┌──────────────────────────────────────────────────────────────┐ │ │ │ Normalisoitu skeema: Käyttäjät → Varaukset ← (Jahdit/Matkat) │ │ │ │ Saatavuusindeksit, viiteavaimet, kaskadoituvat poistot │ │ │ └──────────────────────────────────────────────────────────────┘ │ ├─────────────────────────────────────────────────────────────────────┤ │ ULKOISET PALVELUT JA INFRASTRUKTUURI │ │ ┌──────────────────────────────────────────────────────────────┐ │ │ │ • Kashier Payment Gateway (3DS käytössä) │ │ │ │ • Sähköposti-ilmoitukset (Laravel Mail) │ │ │ │ • Istuntojen tallennus (Redis-yhteensopiva) │ │ │ │ • Tiedostojen tallennus (Paikallinen/S3) │ │ │ └──────────────────────────────────────────────────────────────┘ │ └─────────────────────────────────────────────────────────────────────┘

Käyttöliittymäpino

Kehys: React 19 tiukalla TypeScript-tyypityksellä (tsconfig.json: strict mode päällä)
SSR/Hydration: Inertia.js v2 palvelinpuolen renderöidyillä sivuominaisuuksilla, mikä eliminoi vesiputouspyynnöt
Muotoilu: Tailwind CSS v4 + Tailwind CSS Vite -lisäosa optimoituja koontiversioita varten
UI-komponentit: Radix UI (headless, saavutettava) käärittynä omaan komponenttikirjastoon
Lomakehallinta: React Hook Form palvelinpuolen Laravel-validointipalautteella
Reititys: Wayfinder v0 tyyppiturvalliseen reittien generointiin Laravel-reiteistä
Tyyppiturvallisuus: Kattava TypeScript-kattavuus tiukoilla null-tarkistuksilla ja syrjinnän liitoilla API-vastauksille
Työkalut: Vite React-kääntäjän lisäosalla optimoituun JSX:ään ja älykkääseen puun karsimiseen

Taustajärjestelmän pino

Kehys: Laravel 12 virtaviivaistetulla tiedostorakenteella (ei Kernel.php-tiedostoa, middleware bootstrap/app.php-tiedostossa)
ORM: Eloquent eager-loadingilla, polymorfisilla suhteilla ja kyselyiden optimoinnilla
Tunnistautuminen: Laravel Fortify (headless auth backend) 2FA/TOTP-tuella TwoFactorAuthenticatable-traitin avulla
API-kerros: RESTful-päätepisteet JSON:API-konvention mukaisesti, palauttaen Laravel API Resources -resursseja johdonmukaista vastausmuotoilua varten
Validointi: Form Request -luokat deklaratiivisille ja uudelleenkäytettäville validointisäännöille
Valtuutus: Käytäntöpohjainen pääsynhallinta Laravel Gates- ja Policies-järjestelmillä
Välimuisti: Laravelin välimuistifasadi 1 tunnin oletus-TTL:llä etusivun aggregointiin
Taustatyöt: Jonojärjestelmä (määritetty synkroniseksi kehityksessä, tietokanta/Redis tuotannossa)
Testaus: Pest 4 RefreshDatabase-traitilla eristettyyn testaukseen

Keskeiset tekniset syväsukellukset

1. Polymorfinen varausarkkitehtuuri: Yksi malli, useita tuotetyyppejä

Haaste: Jahdit ja matkat edustavat täysin erilaisia tuotetyyppejä, joilla on erilaiset hinnoittelumallit, saatavuusrajoitukset ja liiketoimintasäännöt. Yksinkertainen lähestymistapa vaatisi erillisiä varaustaulukoita ja monistettua logiikkaa. OCTOBOATS yhdistää nämä tyylikkäästi Eloquent-mallin polymorfisten suhteiden avulla.

Miksi tämä on tärkeää:

Yksi totuuden lähde varauksien hyväksymiselle, maksujen käsittelylle ja hyvityksille – tuotetyypistä riippumatta
Jaettu hallintapaneeli, josta näkee kaikki varaukset yhtenäisellä suodatus- ja hyväksymisprosessilla
Skaalautuu N tuotetyyppiin (tulevaisuudessa hotellit, ruokailuelämykset) ilman ohjainten monistamista
Tietokannan normalisointi takaa viitteellisen eheyden; viiteavaimet estävät orvot varaukset

2. Maksujen webhook-arkkitehtuuri: Vankka tapahtumien käsittely

Haaste: Maksunvälittäjät (Kashier) ovat luonnostaan epäluotettavia – webhookit voivat saapua väärässä järjestyksessä, monistua tai jäädä saapumatta. Ilman idempotenttia käsittelyä ja atomisia transaktioita käyttäjät voisivat päätyä useisiin varauksiin yhdellä maksulla tai päinvastoin.

Miksi tämä on tärkeää:

Täsmälleen kerran -semantiikka merchantOrderId-tunnisteen avulla idempotenttina avaimena; toistuvasti lähetetyt webhookit ohitetaan turvallisesti
Tietokantatapahtumat varmistavat, että varaus- ja maksutiedot luodaan atomisesti yhdessä
Kaskadoituvat poistot ostoskorin tuotteille vasta vahvistetun maksun jälkeen, mikä estää tilauksien katoamisen
Webhook-resilienssi: Epäonnistuneet maksut eivät estä tulevia yrityksiä; uudelleenyritystagi rakennettu Kashier-konfiguraatioon

Lopputulos: Ei kadonneita maksuja, ennakoitava tila ja tarkastusjälki response_data-JSON-kentän kautta.

3. Reaaliaikainen saatavuuden validointi: Tuplavarausten estäminen

Haaste: Kaksi asiakasta katsoo samaa jahtia samana päivänä ja klikkaa "Varaa nyt" samanaikaisesti. Ilman pessimististä lukitusta tai älykästä validointia molemmat varaukset onnistuvat, mikä johtaa ylivaraukseen.

Miksi tämä on tärkeää:

Kilpailutilanteita sietävä validointi tapahtuu saman HTTP-pyyntöjakson aikana, mikä minimoi ajan tarkistushetkestä käyttöhetkeen (TOCTOU)
Käyttäjäpalaute on välitöntä ja spesifiä ("vain 2 paikkaa jäljellä"), mikä edistää konversioita
Webhook-idempotenssi tarkoittaa, että jos maksun käsittelyä yritetään uudelleen, varauksen luominen on turvallista
Tarkastusjälki yacht_availabilities-taulukon kautta näyttää varaushistorian

Lopputulos: Ei ylivarauksia, läpinäkyvä saatavuus, luottavaiset varaukset.

4. Monimutkainen hinnoittelu ja ostoskorimoottori: Monituote, monivaluutta, kampanjalogiikka

Haaste: Kassan on laskettava kokonaishinta huomioiden:

Useita ostoskorin tuotteita (jahdit + matkat sekaisin)
Tuotekohtaiset aikuisten/lasten lippumäärät
Päiväkohtaiset hinnoitteluvaihtelut (jahtien saatavuus)
Kampanjakoodialennukset (kiinteä tai prosentuaalinen)
Lisämyynnit (juomat, varusteiden vuokraus) venesatamakohtaisella hinnoittelulla
Satamien verot (prosenttiperusteinen)

Tekninen ratkaisu:

Miksi tämä on tärkeää:

Koostettava hinnoittelulogiikka ei vaadi uutta koodia uusille alennustyypeille
Snapshot-malli (tallennettu varaukseen) varmistaa historiallisen tarkkuuden; hinnanmuutokset kassan jälkeen eivät vaikuta vahvistuksiin
Tyyppiturvalliset laskelmat Laravelin decimal-castilla estävät liukulukuvirheet
Front-end-peili (React-komponentit) käyttää samaa laskentalogiikkaa WYSIWYG-kassan esikatseluun

5. Frontend-optimointi: Inertia + React tilallisille SPA-sovelluksille

Haaste: Perinteiset palvelinpuolella renderöidyt sovellukset vaativat sivun uudelleenlatauksen; SPA-sovellukset turvottavat JavaScript-paketteja. Inertia siltaa tämän kuilun: palvelin renderöi sivut React-komponentteina, hydratoi ominaisuuksilla, eliminoiden tilan synkronoinnin monimutkaisuuden.

Miksi tämä on tärkeää:

Tyyppiturvallisuus HTTP-rajapinnan yli Wayfinderin avulla; reittiparametrit/vastaukset generoidaan automaattisesti Laravel-reiteistä
Progressiivinen parannus viivästettyjen ominaisuuksien (deferred props) avulla; luonnos-UI latautuu välittömästi, kun raskaat listat latautuvat asynkronisesti
Reaktiiviset päivitykset ilman sivun uudelleenlatausta; ostoskorin muutokset laukaisevat välittömät UI-päivitykset
Ei JavaScript-turvotusta sivun interaktiivisuudessa; vain kriittiset UI-komponentit hydratoidaan

Ominaisuudet ja kyvykkyydet

Asiakaspuolen ominaisuudet

Selaus ja haku: Suodata jahdit ja matkat kaupungin, sataman, kapasiteetin ja hinnan mukaan
Älykäs ostoskori: Lisää useita tuotteita, tallenna myöhemmäksi, muokkaa määriä/päivämääriä reaaliajassa
Yhden klikkauksen kassa: Virtaviivaistettu maksuprosessi Kashier 3DS:llä
Kaksinkertainen varaus: Varaa jahdit (tunti/päivä) tai kuratoidut matkat (aikuisten/lasten hinnoittelu)
Kampanjamoottori: Käytä kampanjakoodeja, automaattinen alennuslaskenta
Lisämyynnit: Lisäpalvelut (juomat, varusteet) kassalla
Chatbot: AI-pohjainen asiakaspalvelu kontaktilomakkeen varajärjestelmällä
Sisältösivut: Gallerianäyttely, UKK, tietoa/yhteystiedot

Hallintapaneeli

Varausten hallinta: Tarkastele, hyväksy, muokkaa ja kirjaa maksuja kaikista varauksista
Varaston hallinta: Luo/muokkaa jahteja, matkoja, aseta saatavuus ja hinnoittelu
Gallerian hallinta: Lataa ja järjestä galleriakuvia luokittain
Kampanjakoodit: Luo/hallinnoi alennuskoodeja käyttörajoituksilla
Lisämyynnit ja lisäosat: Määritä lisäpalvelut ja hinnoittelu
Sivuston asetukset: Hallitse UKK-osioita, yhteystietoja ja globaaleja asetuksia

Tekniset ominaisuudet

2FA-tunnistautuminen: TOTP-pohjainen kaksivaiheinen tunnistautuminen
Roolipohjainen pääsy: Admin-käytännöt valvovat käyttöoikeuksien rajoja
Responsiivinen muotoilu: Mobile-first, toimii kaikilla laitteilla
Tumma tila: Teeman pysyvyys, automaattinen järjestelmän mieltymysten tunnistus
Saavutettavuus: WCAG 2.1 AA -yhteensopivuus Radix UI -komponenteilla
SSR-valmis: Palvelinpuolen renderöintimahdollisuus hakukonenäkyvyyden (SEO) ja nopeamman latauksen parantamiseksi

Projektirakenne

octaboats/
├── app/
│   ├── Http/
│   │   ├── Controllers/
│   │   │   ├── Admin/              # Ylläpidon kojelaudan ohjaimet
│   │   │   ├── Api/                # API-päätepisteet
│   │   │   └── *.php               # Julkiset sivuohjaimet
│   │   ├── Requests/               # Lomakepyyntöjen validointi
│   │   ├── Resources/              # JSON-vastausten muotoilijat
│   │   ├── Middleware/             # HTTP-väliohjelmistot
│   │   └── Policies/               # Valtuutus käytännöt
│   ├── Models/                     # Eloquent-mallit
│   ├── Services/                   # Liiketoimintalogiikka (maksu, webhook, aggregointi)
│   └── Actions/                    # Yhden toiminnon luokat (Fortify auth)
├── resources/
│   ├── js/
│   │   ├── pages/                  # React-sivukomponentit
│   │   │   ├── admin/              # Ylläpidon sivut
│   │   │   ├── auth/               # Kirjautuminen, rekisteröityminen, salasanan nollaus
│   │   │   └── *.tsx               # Julkiset sivut
│   │   ├── components/             # Uudelleenkäytettävät React-komponentit
│   │   ├── hooks/                  # Mukautetut React-hookit
│   │   ├── services/               # Frontend API-asiakkaat
│   │   ├── types/                  # TypeScript-rajapinnat
│   │   ├── layouts/                # Asettelukääreet
│   │   └── app.tsx                 # Inertia-asennus
│   ├── css/
│   │   └── app.css                 # Tailwind-direktiivit
│   └── views/                      # Sähköpostimallit (Blade)
├── routes/
│   ├── web.php                     # Julkiset/vierasreitit
│   ├── api.php                     # API-päätepisteet
│   ├── admin.php                   # Ylläpidon reitit (vaatii auth + admin-käytännön)
│   ├── settings.php                # Käyttäjäasetusten reitit
│   └── console.php                 # Artisan-komennot
├── database/
│   ├── migrations/                 # Skeeman migraatiot
│   ├── factories/                  # Mallitehtaat testaukseen
│   └── seeders/                    # Tietokannan siemenet
├── config/                         # Sovelluksen konfiguraatio
├── bootstrap/
│   ├── app.php                     # Sovelluksen asennus (middleware, reititys)
│   └── providers.php               # Palveluntarjoajan rekisteröinti
├── tests/                          # Pest-testit
├── storage/                        # Lataukset, lokit, välimuisti
├── vite.config.ts                  # Frontend-koontiversion konfiguraatio
├── composer.json                   # PHP-riippuvuudet
├── package.json                    # Node-riippuvuudet
└── README.md                       # Tämä tiedosto

Turvallisuusnäkökohdat

HTTPS pakotettu: Kaikki ulkoiset integraatiot vaativat suojatut yhteydet
CSRF-suojaus: Tokenin validointi kaikissa POST/PUT/PATCH/DELETE-pyynnöissä
SQL-injektion esto: Parametrisoidut kyselyt Eloquent ORM:n kautta
XSS-esto: React karkaa automaattisesti dynaamisen sisällön; ei käytetä dangerouslySetInnerHTML-ominaisuutta
Tunnistautuminen: Fortified 2FA-tuki ylläpitäjille
Maksuturvallisuus: 3DS käytössä, PCI-yhteensopivuus Kashierin kautta
Arkaluontoinen tieto: Salasanan tiivistys (bcrypt), salaisuudet .env-tiedostossa, two_factor_*-kentät piilotettu API-vastauksissa
TÄRKEÄÄ: Älä koskaan commit-toiminnolla lähetä .env- tai *.key-tiedostoja; käytä .env.example-tiedostoa mallina

Teknologiat ja riippuvuudet

| Kerros | Teknologia | Versio | Tarkoitus | |-------|-----------|---------|---------| | PHP | Laravel Framework | 12.0 | Taustajärjestelmän kehys | | PHP | Laravel Fortify | 1.30 | Headless-tunnistautuminen | | PHP | Laravel Inertia | 2.0 | Palvelinpuolen ominaisuudet Reactille | | PHP | Laravel Wayfinder | 0.1.9 | Tyyppiturvallinen reittien generointi | | PHP | Pest | 4.4 | Testauskehys | | Frontend | React | 19.2 | UI-renderöinti | | Frontend | TypeScript | Latest | Tyyppiturvallisuus | | Frontend | Tailwind CSS | 4.0 | Utility-first-tyylittely | | Frontend | Radix UI | Latest | Headless-komponentit | | Frontend | Inertia.js | 2.3.7 | Asiakaspuolen adapteri | | Build | Vite | Latest | Nopea koontityökalu | | Payments | Kashier | Live API | Maksuyhdyskäytävä |

Keskeiset opit ja parhaat käytännöt

Tämä projekti on esimerkki tuotantotason insinööritaidoista:

Arkkitehtuurin puhtaus: Polymorfiset suhteet eliminoivat koodin monistamisen; kevyet ohjaimet delegoivat palveluille; käytännöt valvovat valtuutusta mallitasolla
Transaktioiden eheys: Tietokantatapahtumat varmistavat varaus+maksu-atomisuuden; webhookin idempotenssi estää monikäsittelyn
Tyyppiturvallisuus: Täysi TypeScript-kattavuus estää ajonaikaiset virheet; Laravel Form Requestit validoivat palvelinpuolella; API-resurssit muotoilevat vastaukset johdonmukaisesti
Suorituskyvyn optimointi: Eager loading eliminoi N+1-kyselyt; älykäs välimuisti vähentää tietokantapainetta; Vite-koontiversiot toimittavat vain tarvittavan JavaScriptin
Käyttökokemus: Inertia + React tarjoavat SPA-responsiivisuuden ilman JavaScript-turvotusta; Tailwind CSS mahdollistaa nopean, johdonmukaisen UI-iteroinnin
Testattavuus: Pestin ilmaisukykyinen syntaksi tekee testien tavoitteista selkeitä; RefreshDatabase-traitti eristää testit; tehtaat tarjoavat realistisia kiinnityksiä
Turvallisuus: Fortify käsittelee tunnistautumisen reunatapaukset; käytännöt keskittävät valtuutuksen; maksun webhook-käsittely on idempotenttia ja transaktiollista
Kehittäjäkokemus: Wayfinder generoi automaattisesti tyyppiturvalliset reitit; ESLint + Prettier valvovat koodityyliä; modulaariset palvelut kannustavat koostamiseen