LAND OF FIRE
PROJEKTA APSKATS
005 // LAND OF FIRE

Restorāna vietne un Rezervēšanas sistēma uz robežas

Next.js 16Reakcija 19TypeScriptPostgreSQLCloudflare darbiniekiOpenNextGSAPLenisPlaywright
lof.artursdev.co.uk
ĪSS

Land of Fire ir azerbaidžāņu restorāns Kaledonijas ceļā King's Cross. Vietnei bija jāizstāsta savs stāsts, jāpieņem galdiņu rezervācijas bez trešās puses logrīka un jānodrošina darbiniekiem viena privāta vieta, kur vadīt māju.

RISINĀJUMS

Es izveidoju kinematogrāfisku vietni trīs valodās, publisku rezervāciju plūsmu un privātu personāla darbvietu rezervācijām un viesu e-pastam, un tas viss darbojas kā viens Cloudflare Worker, ko nodrošina PostgreSQL.

REZULTĀTS

Viesi pieprasa galdiņu tiešsaistē un tiek informēti pa e-pastu. Darbinieki apstiprina, maina un eksportē rezervācijas no vienas vietas. Nav jāuztur serveri, kā arī nav analītikas vai reklāmas sīkfailu.

//Stāsts
  1. SĀKUMA PUNKTS

    Tīmekļa vietne, kurā bija uzskaitīti ēdieni, bet nekas nebija teikts par šo vietu

    Land of Fire jau bija vietne, kas izveidota, izmantojot tiešsaistes pasūtīšanas veidni. Tajā bija ēdienkarte, adrese un stundas. Tas neparādīja, ar ko restorāns atšķiras: azerbaidžāņu mājas virtuve, tēja, kas pasniegta armudu glāzēs, un vienmēr vieta vēl vienam pie galda.

  2. KO ES PAMANĪJU

    Vecā vietne bija pretrunā pati ar sevi

    Mājaslapa trīs vietās ievietoja "Pasūtīt tiešsaistē", savukārt lapā iebūvētajā paziņojumā teikts, ka tiešsaistes pasūtīšana ir izslēgta, un peldošās cilnes aicināja viesus reģistrēt tai kontu. Pirmdiena tika norādīta kā "00:00, 00:00", kad restorāns pirmdienās ir slēgts. A pop-up announcing an August closure was still showing in October. And the site was in English only, though an Azerbaijani restaurant's guests are as likely to read Azerbaijani or Russian. Each problem was small, but together they told a first-time visitor that nobody was looking after the site.

  3. IDEJA

    "Vienmēr ir vieta vēl vienam"

    Es pārtraucu šo vietni uzskatīt par līdzņemamu katalogu un izveidoju to kā sveicienu. Šī līnija kļuva par pavedienu visā vietnē. Tas tiek atvērts pilnekrāna filmā, pēc tam iepazīstina ar cilvēkiem, ēdieniem, kas gatavoti kopīgai lietošanai, un azerbaidžāņu saknēm aiz tiem. Tas beidzas ar norādēm uz durvīm. Jaunavas torņa ilustrācijas ar zelta līniju, tējas komplekts, paklājs un darva piešķir tai identitāti, ko nevarētu izmantot veidne.

  4. LADOT TO DARBOTIES

    Skaista vietne ir tikai puse no darba

    Restorāns pats apstiprina katru galdiņu, tāpēc rezervācijas veidlapā tiek solīts pieprasījums, nevis tūlītējs apstiprinājums, un tas teikts skaidri. Aiz tā es izveidoju privātu darbvietu, kurā darbinieki apstiprina, maina un eksportē rezervācijas un atbild viesu e-pastiem no vienas vietas. Tālāk sniegtā inženierija pastāv tā, lai šis viens solījums atbilstu: pieprasījums nekad netiek pazaudēts, nekad netiek dublēts un nekad netiek nopludināts.

  5. ŠODIEN

    Viena vieta, kur atklāt, izlemt un rezervēt

    Tagad viesis var izlasīt stāstu, pārlūkot pilnu ēdienkarti ar cenām, pārbaudīt atsauksmes un pieprasīt tabulu vienā lapā angļu, azerbaidžāņu vai krievu valodā. Staff work from a single dashboard instead of an inbox and a phone. Nav serveru, ko uzturēt.

PILNA MĀJAS LAPA // VELK ⇆, LAI SALĪDZINĀTU, RITINĀT ↓ LAI IZPĒTĪTU
SKATĪT:
The full redesigned Land of Fire homepage on desktop: restaurant film, welcome, dishes made to share, Azerbaijani heritage, tabbed menu, reviews, booking form, directions and illustrated footer
The full original Land of Fire homepage on desktop: photo slider, category tiles, a long About paragraph, booking form, app promotion, two identical hours tables, newsletter and footer

ORIĢINĀLS LAPA BEIDZAS ŠEIT

ORIĢINĀLSPĀRDOŠANA
⇆
NAVIGĀCIJA // IZVĒLNE ATVĒRTS
SKATĪT:
Redesigned navigation: a full-screen burgundy overlay with five large numbered links (Our story, Azerbaijan, The menu, Find us, Book a table) beside address, phone and social links
Original desktop navigation: contact bar, social icons, Reservation button and a Menu dropdown listing 12 food categories
ORIĢINĀLSPĀRDOŠANA
⇆
ORIĢINĀLĀ NAVIGĀCIJA
  • —Augšējā e-pasta josla, tālrunis, četras sociālo tīklu ikonas un poga Rezervācija virs otrās saišu rindas
  • —"Izvēlne" atver 12 ēdienu kategoriju nolaižamo izvēlni, katrai no tām ir sava lapa
  • —Pasūtīšanas kontam katras lapas kreisajā malā atrodas pieteikšanās un reģistrācijas cilnes
  • —Tālruņos: neliels panelis ar četrām saitēm, kā arī fiksēta piecu pogu josla, tostarp "Pasūtīt tiešsaistē" izslēgtai pasūtīšanas sistēmai
PĀRDOTA NAVIGĀCIJA
  • —Četras klusas teksta saites un logotips centrā; nekas nekonkurē ar filmu
  • —Viena poga "Izvēlne" atver pilnekrāna pārklājumu ar pieciem numurētiem galamērķiem, kas beidzas ar "Rezervēt galdiņu"
  • —Adrese, tālrunis, Deliveroo, e-pasts un sociālās saites atrodas blakus izvēlnei, tāpēc kontaktinformācija ir viena pieskāriena attālumā
  • —Tas pats pārklājums visiem ekrāna izmēriem, atvērts un aizvērts ar tastatūru, kā arī pieskaroties

Pirmais iespaids

ORIĢINĀLĀ VIETNE

Vispārēja kopija “Laipni lūdzam oficiālajā vietnē” un četras attēla saites bez etiķetēm

PĀRDOŠANA

Full-screen film of the restaurant behind "A little fire. A lot of soul." un viena poga "Rezervēt galdiņu".

Stāstu stāstīšana

ORIĢINĀLĀ VIETNE

Nav stāsta, mantojuma vai cilvēku; viena rindkopa

PĀRDOŠANA

nodaļas “Mūsu stāsts”, “Pie mūsu galda” un “Mūsu saknes” ar mantojuma kartēm, kas saistītas ar UNESCO avotiem

Vizuālā identitāte

ORIĢINĀLĀ VIETNE

Pieejama pasūtīšanas veidne ar krājumu kategorijas flīzēm

PĀRDOŠANA

Visā vietnē izmantots ekskluzīvs zelta mākslas darbu komplekts (Maiden Tower, Armudu tējas glāze, paklājs, darva, granātābols).

Izvēlne

ORIĢINĀLĀ VIETNE

Divpadsmit atsevišķas kategoriju lapas, katra klikšķa un lapas ielādes attālumā

PĀRDOŠANA

Viena cilnes izvēlne ar ēdienu aprakstiem un cenām, kā arī PDF lejupielādes un Deliveroo saiti

Rezervēšana

ORIĢINĀLĀ VIETNE

Form shown alongside an "order now" button for a switched-off ordering system; rezervācijas CTA atkārto apmēram piecas reizes

PĀRDOŠANA

Viena skaidra veidlapa ar reālu darba laiku, 1–8 viesu atlasītājs, piekrišana un godīgs "pieprasījums, nevis apstiprinājums" formulējums

Darba laiks

ORIĢINĀLĀ VIETNE

Pirmdiena tiek rādīta kā "00:00, 00:00"; stundu bloks dublēts kā "Rezervācijas stundas"

PĀRDOŠANA

"Pirmdiena: Slēgts", norādīts vienreiz un tiek īstenots ar to pašu moduli, ko izmanto rezervēšanas API

Valodas

ORIĢINĀLĀ VIETNE

tikai angļu valodā; an EN / DE switch exists in the code but is hidden from visitors

PĀRDOŠANA

Angļu, azerbaidžāņu un krievu valodā, ar meklētājprogrammu aizstājējiem hreflang

Uzticība un sociāls pierādījums

ORIĢINĀLĀ VIETNE

Uznirstošais logs, kas paziņo par augusta slēgšanu, un oktobrī joprojām tiek rādīti vietturi “Notiek ielāde…” un kopiju drukas kļūdas

PĀRDOŠANA

Tripadvisor citāti virs rezervācijas veidlapas, saites uz Google un Tripadvisor, nav bojātu saišu

Pieejamība

ORIĢINĀLĀ VIETNE

Tikai attēla saites bez alternatīva teksta

PĀRDOŠANA

Izlaist saiti, semantiskie orientieri, ar tastatūru darbināmi atlasītāji un pilnīgs preferenču un samazinātu kustību atbalsts

ORIĢINĀLS: LANDOFFIRERESTAURANT.COM
TIEŠRAIDĒŠANAS UI // PĀRBAUDES ĒNOJUMS: AKTĪVS
lof.artursdev.co.uk
LAND OF FIRE vietnes sākuma ekrāns
┌─[KOPSAVILKUMS]───────────────────────

Land of Fire ir pilnīga restorānu tīmekļa platforma: daudzvalodu mārketinga vietne, publiska rezervācijas plūsma un privāta personāla darbvieta, kas izveidota ar Next.js 16 un PostgreSQL un izvietots kā viens Cloudflare darbinieks.

Publiskās lapas tiek iepriekš renderētas un tiek rādītas kā statisks saturs; tikai rezervācijas un personāla API izpilda kodu pēc pieprasījuma. Pareizību nodrošina datu bāze: idempotences atslēgas, konsultatīvās slēdzenes, rindu bloķēšanas, optimistiskas pārskatīšanas un darījumu e-pasta izsūtne, ar integrācijas testiem pret reāliem PostgreSQL un sintētiskiem TLS pasta serveriem.

└──────────────────────────────────────────┘
LOMAVienīgais izstrādātājs
VEIDSFull-Stack tīmekļa lietojumprogramma
IETVARSNext.js 16 / React 19 / TypeScript
DATU BĀZEPostgreSQL, izmantojot postgres.js
IZPILDES LAIKSCloudflare darbinieki, izmantojot OpenNext
IZMĒRS~12 800 rindiņas, 9 lapas, 8 API maršruti
//Galvenie fakti un metrika
1
Izvietojams strādnieks
Nav rindas, kešatmiņas slāņa vai cron
~20ms
Darbinieka uzsākšana
~2,3 MB gzip pakotne
3
Valodas
angļu, azerbaidžāņu, krievu
0
Trešās puses izsekotāji
Nav analītikas, reklāmu sīkfailu vai logrīku
//Ierobežojumi
01
IEROBEŽOJUMS 01

Nav serveru, zemas ekspluatācijas izmaksas

Restorānā nav operāciju komandas. The platform had to run without servers to maintain, and without paying for or depending on a third-party booking widget.

02
IEROBEŽOJUMS 02

Viesu dati ir personas dati

Vārdi, e-pasta adreses, tālruņu numuri un piezīmes par uzturu nekad nedrīkst nonākt publiskās lapās, kešatmiņās, žurnālos vai veidot artefaktus.

03
IEROBEŽOJUMS 03

Katra rezervācija ir apstiprināta ar roku

Restorāns pats apstiprina katru rezervāciju. The system records requests and keeps people informed; tas nepiešķir tabulas vai neapstiprina automātiski.

04
IEROBEŽOJUMS 04

Neuzticams tīkls

Cilvēki veic rezervācijas tālruņos, vilcienos un veic dubultskārienu iesniegšanas pogām. Atkārtots mēģinājums vai atkārtots pieprasījums nekad nedrīkst izveidot otru rezervāciju.

//Sistēmas arhitektūra
[KLIENTI]
Viesu pārlūkprogrammaLapas + rezervācijas forma
Personāla pārlūkprogramma/reservations workspace
Viesu iesūtneApstiprinājumi + ielūgumi
↓
[CLOUDFLARE EDGE]
Statiskie aktīviHTML, CSS, JS, video, PDF
StrādnieksNext.js, izmantojot OpenNext
Slepenās saitesŠifrēts, nav komplektēts
↓
[DATI]
PostgreSQLTCP ligzda pēc pieprasījuma
E-pasta izsūtneTāds pats darījums kā rezervācija
Revīzijas notikumiKatra personāla maiņa
↓
[PASTS]
SMTPSTARTTLS / TLS
IMAP pastkasteTikai lasāma iesūtne
Kalendārs aicina.ics + Google link
//Rezervēšanas plūsma
  1. 01

    Pieprasīt

    Pārlūkprogramma ģenerē UUID, kad viesis pirmo reizi nospiež iesniegt, un izmanto to atkārtoti katrā atkārtotajā mēģinājumā.

  2. 02

    Sargs

    Tādas pašas izcelsmes pārbaude, JSON satura veids, 8 KB korpusa vāciņš, slēpts medus poda lauks un pārbaude pret reālo darba laiku.

  3. 03

    Slēdzene

    Viesa e-pastā ievadītā darījumu aptvēruma PostgreSQL padomdevēja bloķēšana serializē vienlaicīgus pieprasījumus visās Worker instancēs.

  4. 04

    Rakstiet

    The booking, an audit event and the guest and staff emails are inserted in one transaction. Atkārtots mēģinājums atgriež sākotnējo atsauci.

  5. 05

    Piegādāt

    Pēc saistību izpildes Darbinieks nosūta rindā esošos e-pasta ziņojumus pēc iespējas labāk un atbild uz 201 ar rezervācijas atsauci.

//Inženiertehniskās darbības
01 /Idempotentas rezervācijas bez sacīkstēm
Idempotences atslēga kā primārā atslēga

Klienta ģenerētais UUID ir rezervācijas primārā atslēga, tāpēc, veicot dubultskārienu vai veicot atkārtotu mēģinājumu pēc taimauta, tiek atgriezta sākotnējā atsauce. Atkārtots mēģinājums, kas tiek veikts ar citu e-pasta adresi, tiek noraidīts, tāpēc uzminētais ID nevar pārbaudīt kāda cita rezervāciju.

Viens patiesības avots darba laikiem

Viens modulis nosaka darba laiku, un to importē gan veidlapa, gan API: slēgts pirmdienās, pusstundas laika posmi, pēdējā sēde divas stundas pirms slēgšanas, 1–8 viesi, līdz 90 dienām uz priekšu, vienmēr tiek novērtēts pēc Londonas laika.

Gracioza degradācija

If the database is unreachable the form shows the restaurant's phone number instead of failing silently. Publiskā vietne nekad nav atkarīga no datu bāzes.

02 /Uzticams e-pasts: transakciju izsūtne
Saglabāts kopā vai nesaglabāts vispār

E-pasta ziņojumi tiek atveidoti un ievietoti izsūtnē tajā pašā darījumā, kurā tika veikta rezervācija, un katram ir unikāla atšifrēšanas atslēgu, tāpēc atkārtoti atskaņots pieprasījums nevar ievietot rindā dublikātu.

Droša vienlaicīga nosūtīšana

Neapstiprinātie ziņojumi tiek pieprasīti pa vienam ar FOR UPDATE SKIP LOCKED. Kļūmes atgriežas gaidīšanas režīmā, un ziņojums, kas iestrēdzis sūtīšanā ilgāk par piecām minūtēm, atkal kļūst par prasību.

Precīzi mēģinājumi un pareizi uzaicinājumi

Renderētais HTML, vienkāršais teksts un .ics pielikums tiek glabāti rindā, tāpēc atkārtots mēģinājums nosūta tieši to, kas tika izveidots. Laiki tiek pārrēķināti no Londonas sienas pulksteņa laika uz UTC, tāpēc ielūgumi paliek pareizi, ņemot vērā vasaras laika izmaiņas.

03 /Personāla autentifikācija un autorizācija
Pa e-pastu nosūtīti vienreizējie kodi

Sešciparu kodi, kas derīgi desmit minūtes, vienreizējai lietošanai, ar ne vairāk kā pieciem minējumiem, kas izdarīti rindas bloķēšanas iekšpusē. Datu bāzē tiek glabāti tikai izaicinājuma pilnvaras un koda SHA-256 īssavilkumi.

Paroles un sesijas

Argon2id in PHC format, with older scrypt hashes upgraded on the next successful login and a fifteen-minute lockout after five failures. Sessions are 32 random bytes in an HttpOnly, Secure, SameSite=Strict cookie; tiek saglabāts tikai apkopojums.

Viens iesaiņojums katram personāla galapunktam

Viens iesaiņotājs veic rakstīšanas izcelsmes pārbaudi, apstiprina sesiju, iestata kešatmiņas kontroli: privāta, bez veikala, sanitizē kļūdu reģistrēšanu un vienmēr aizver datu bāzes savienojumu. Visas personāla izmaiņas tiek ierakstītas revīzijas tabulā.

04 /Vienlaicīga rediģēšana un droša eksportēšana
Optimistiska vienlaicība

Katrai rezervācijai ir pārskatīšanas numurs. Serveris bloķē rindu, salīdzina un atgriež 409 konfliktu, ja kolēģis vispirms saglabāja, tāpēc divas planšetdatoras nevar klusi pārrakstīt viena otru.

Formulai drošs CSV

Šūnām, kas sākas ar =, +, - vai @, ir prefikss, tāpēc izklājlapu programmatūra tās uzskata par tekstu. Viesu nodrošinātās piezīmes nevar izpildīt kā formulas, kad eksportēšana tiek atvērta programmā Excel.

Tikai lasāma iesūtne

IMAP pastkaste tiek atvērta tikai lasāma, nelasītie karodziņi tiek atstāti neskarti un tiek rādīts tikai vienkāršs teksts. Attālais HTML un attēli nekad netiek renderēti personāla informācijas panelī.

05 /Darbojas ar Cloudflare Workers
Nav savienojuma baseina

Programmā Workers TCP ligzda pieder pieprasījumam, kas to atvēra. Katrs API izsaukums atver tieši vienu savienojumu ar atspējotiem sagatavotajiem priekšrakstiem un aizver to beigu blokā.

Pareizais draiveris, pareizais saimniekdatora nosaukums

Postgres.js ir atzīmēts kā ārējs, tāpēc OpenNext izvēlas savu darbinieka būvējumu, ar būvēšanas darbību, kas apliecina, ka izvadē ir Cloudflare ligzdas draiveris. Novērsta SMTP STARTTLS, nododot nodemailer ligzdu, kas savienota ar saimniekdatora nosaukumu, saglabājot pilnībā iespējotu sertifikāta verifikāciju.

Adaptera lāpīšana

Next.js 16.4 izstaro manifestu, kuru OpenNext 1.20 neapkopa, izpildes laikā sabojājot Worker. Izsekoja to līdz vienam globusa rakstam un satur vienas rindiņas ielāpu, kas tiek lietots automātiski instalēšanas laikā.

06 /Būve, kas atsakās nosūtīt noslēpumus
Nosvītrot, pēc tam skenēt

Skripts pēc izveides pārraksta adaptera vides moduli, lai saglabātu tikai NEXT_PUBLIC_ vērtības, un pēc tam skenē katru izvades failu, lai atrastu burtiskā datu bāzes URL un pasta paroles, kā arī jebkuru klaiņojošu .env failu. Izvietošana neizdodas, ja kaut kas tiek atrasts.

Šifrēti darbinieku noslēpumi

Īstie noslēpumi tiek augšupielādēti atsevišķi kā šifrēti darbinieka noslēpumi, kas tiek nosūtīti caur stdin, lai tie nekad neparādītos čaulas vēsturē, procesa argumentos vai žurnālos.

Vienas komandas izvietošana

Viena komanda izveido lietotni, pārveido to ar OpenNext, palaiž slepeno skenēšanu un izvieto ar Wrangler. 223 statiskie līdzekļi tiek augšupielādēti pakāpeniski.

07 /Frontend Amatniecība un pieejamība
Kustība

GSAP laika skalas ievads, iekļautas SVG ainas, kas animētas ar ScrollTrigger un Lenis vienmērīgu ritināšanu, ko koordinē pielāgoti DOM notikumi. Datuma atlasītājs un atlases izvēlnes ir izveidotas no jauna, izmantojot tastatūras atbalstu.

Cieņa pret Apmeklētāju

Visi kustības apbalvojumi dod priekšroku-reduced-motion: ievads tiek izlaists, varoņa video pauzes un ritināšanas efekti ir atspējoti. Izlaist saites, semantiskos orientierus, katras valodas lang atribūtus un redzamu video pauzes vadīklu.

SEO un internacionalizācija

Katras lapas metadati no viena palīga, savstarpējais hreflang mijas ar x-default, ģenerētu vietnes karti un robotiem un restorānu JSON-LD. Strukturētajos datos netiek pieprasītas atsauksmes par zvaigznītēm vai apkopotiem vērtējumiem.

08 /Testēšana pret reāliem pakalpojumiem
Integrācija vairāk nekā izspēles

Rezervēšanas testi sāk vienreizējās lietošanas PostgreSQL klasteru un ražošanas serveri, pēc tam pārbauda noturību, idempotenci, vienlaicīgus atkārtotus mēģinājumus, validāciju, piekrišanu, izcelsmes aizsardzību un ātruma ierobežojumus.

Personāla darbplūsmas no beigām līdz beigām

Shēmas migrācija no sākotnējās versijas, pierakstīšanās un sesijas, rediģēšanas konflikti, CSV eksportēšana un e-pasta piegāde, kļūme un atkārtots mēģinājums pret sintētiskiem TLS pasta serveriem galddatorā un mobilajā ierīcē.

Dūmu tests pēc izvietošanas

Katrs maršruts, ilustrācijas, baitiem precīza PDF lejupielāde, video diapazona pieprasījumi, rezervācijas apstiprināšana un izcelsmes aizsardzība. Neviens tests neskar restorāna reālo datu bāzi vai nesūta īstu e-pastu.

//Kompromisi un nākamie soļi

Personāls apstiprina rezervācijas manuāli

IZMAKSAS

Nav tiešraides pieejamības; iespējama dubulta rezervācija

NĀKAMAIS SOLIS

Tabulu inventarizācija un ietilpības uz slotu pārbaudes

Atkārtoti mēģinājumi pa e-pastu tiek aktivizēti pēc pieprasījumiem vai personāla

IZMAKSAS

Neveiksmīgs e-pasts gaida līdz nākamajai darbībai vai manuālam atkārtotam mēģinājumam

NĀKAMAIS SOLIS

Cloudflare Cron Trigger, kas iztukšo izsūtni

Viens datu bāzes savienojums katram pieprasījumam

IZMAKSAS

Savienojuma iestatīšanas latentums katrā API izsaukumā

NĀKAMAIS SOLIS

Cloudflare Hyperdrive malu apvienošanai

Likmes ierobežojums ir norādīts tikai e-pastā

IZMAKSAS

Skripts var pagriezt adreses

NĀKAMAIS SOLIS

Uz IP balstīti ierobežojumi vai turniketa izaicinājums

Rezervācijas veidlapa un iekšējās lapas tikai angļu valodā

IZMAKSAS

Azerbaidžāņu un krievu viesi rezervē angļu valodā

NĀKAMAIS SOLIS

Tulkojiet rezervēšanas plūsmu un izvēlni

Autentifikācija, kas izveidota uz vietas

IZMAKSAS

Vairāk koda, kas pieder un jāpārbauda

NĀKAMAIS SOLIS

Pieņemams šajā jomā; atkārtoti apmeklējiet, ja ir nepieciešama SSO vai MFA

RAŽOŠANA // TIEŠRAIDĒ
Skatiet tiešraidi vietnē lof.artursdev.co.uk
lof.artursdev.co.uk
Saņemt cenas piedāvājumu

Ir ideja projektam?

Pastāstiet man, ko jūs mēģināt sasniegt. Jums nav jāzina, kura tehnoloģija jums ir nepieciešama: es palīdzēšu definēt tehnisko pieeju, darbības jomu, laika grafiku un izmaksas pirms izstrādes sākuma.

Tādējādi tiek atvērta jūsu e-pasta lietotne ar ievadīto informāciju. Nekas netiek nosūtīts, kamēr nenospiežat sūtīt.