ZEVRO
PROJEKTA APSKATS
006 // ZEVRO MATU SISTĒMAS

Veikals un aizmugures birojs Kur nauda un krājumi paliek pareizi

Next.js 16Reakcija 19TypeScriptPostgreSQL (neona)Cloudflare darbiniekiStripe CheckoutCloudinaryTailwind CSS 4GSAPLenis
zhr.artursdev.co.uk
ĪSS

Zevro pārdod vīriešu matu sistēmas fiksētā modeļu, izmēru un krāsu katalogā, katrs pasūtījums tiek saņemts no piegādātāja pēc tam, kad par to ir samaksāts. Veikalam vajadzēja pieņemt pasūtījumus visā pasaulē, droši veikt karšu maksājumus un nekad nepārdot krājumus, kuru tur nav.

RISINĀJUMS

Es izveidoju publisku veikalu un atsevišķu personāla biroju kā divas Next.js lietojumprogrammas bez serveriem vienā PostgreSQL datu bāzē ar Stripe maksājumiem, Cloudinary attēliem un servera puses adrešu meklēšanu.

REZULTĀTS

Viesi un kontu īpašnieki var pasūtīt un maksāt ar karti no aptuveni 240 valstīm. Darbinieki pārvalda katalogu, krājumus, piegādi un saturu kā datus, un nav jāuzrauga serveri.

TIEŠRAIDĒŠANAS UI // PĀRBAUDES ĒNOJUMS: AKTĪVS
zhr.artursdev.co.uk
ZEVRO vietnes sākuma ekrāns
┌─[KOPSAVILKUMS]───────────────────────

Zevro Hair Systems ir pilna e-komercijas platforma: publiska vitrīna un personāla CMS, katra Next.js 16 lietotne ir izvietota kā a Cloudflare darbinieks, tiekoties tikai vienā PostgreSQL datu bāze.

Nav atsevišķa API servera, nav Redis, nav rindas un nav savas failu krātuves. Dizains atbalsta pareizību, ja ir iesaistīta nauda un krājumi: cenas tiek atkārtoti nolasītas serverī, krājumi rezervēti vienai noliktavai darījumā un pasūtījums, kas atzīmēts kā apmaksāts tikai pēc pārbaudot ar Stripe.

└──────────────────────────────────────────┘
LOMAFull-Stack izstrādātājs
VEIDSE-komercijas vietne + SPS
IETVARSNext.js 16 / React 19 / TypeScript
DATU BĀZEPostgreSQL uz Neona, vienkāršs SQL, izmantojot pg
IZPILDES LAIKSCloudflare darbinieki, izmantojot OpenNext
MAKSĀJUMIStripe Checkout (mitināts)
//Galvenie fakti un metrika
2
Lietojumprogrammas bez serveriem
Veikals + CMS, viena datu bāze
~120
Datu bāzu tabulas
65 versiju SQL migrācijas
~240
Piegādes valstis
Piegādes metodes ir dati
0
Kartes informācija apstrādāta
Stripe mitināja Checkout
//Ierobežojumi
01
IEROBEŽOJUMS 01

Nekad neatzīmējiet apmaksātu pasūtījumu uzticībai

Veikals pieņem karšu maksājumus no viesiem un kontu īpašniekiem visā pasaulē. Atgriešanās veiksmes lapā neko nedrīkst pierādīt pati par sevi.

02
IEROBEŽOJUMS 02

Nekad nepārdodiet krājumus, kuru tur nav

Fiksēts modeļu katalogs, katrs no tiem ir pieejams vairākos pamatizmēros un matu krāsās dažādās noliktavās. Tas pats variants ar dažādām opciju akcijām akcijām.

03
IEROBEŽOJUMS 03

Viena vieta darbiniekiem, lai vadītu veikalu

Produktiem, attēliem, krājumiem, klientiem, pasūtījumiem, saturam un atļaujām bija jābūt personālam pārvaldāmiem bez izstrādātāja.

04
IEROBEŽOJUMS 04

Lēti ekspluatācijā, bez serveriem

Workers izpildlaikam nav savienojuma atkārtotas izmantošanas starp pieprasījumiem un nav vietējo moduļu, tāpēc piekļuvei datu bāzei, paroļu jaukšanai un e-pastam bija tam jāatbilst.

//Sistēmas arhitektūra
[AUDITORIJAS]
KlientiViesi + kontu īpašnieki
PersonālsLomas + atļaujas
Nākotnes klientiTas pats API, izmantojot HTTP
↓
[CLOUDFLARE STRĀDNIEKI]
Veikala skatlogsNext.js + /api/v1
CMSNext.js + /api/v1/cms
In-App APIApstrādes procesā tiek izsaukts pa lapām
↓
[DATI]
PostgreSQL (neona)Apvienotais galapunkts
Piecas shēmaskomercija, klients, cms…
65 MigrācijasVienīgais veids, kā mainās shēma
↓
[INTEGRĀCIJAS]
Stripe CheckoutHosted maksājumi
CloudinaryParakstītas tiešās augšupielādes
SMTP + GeoapifyE-pasta + adreses meklēšana
//Ordeņa ceļojums
  1. 01

    Grozs

    Pievienojot preci, tiek pārbaudīta šī varianta kopsumma katrā groza rindā, tāpēc saskarne nekad nepiedāvā daudzumu, ko serveris atteiktu.

  2. 02

    Izrakstīties

    Pārlūkprogramma sūta identifikatorus un daudzumus, nevis cenas. Serveris no datu bāzes atkārtoti nolasa katru cenu, piegādes maksu un valūtu.

  3. 03

    Pasūtījums veikts

    Krājumu rindas tiek bloķētas un krājumi tiek rezervēti pa noliktavām vienā darījumā. Pasūtījumam tiek izmantots groza identifikators, tāpēc divreiz iesniedzot, tiek atgriezts tas pats pasūtījums.

  4. 04

    Stripe Checkout

    Sesija tiek izveidota serverī no saglabātā pasūtījuma ar piespraustu API versiju un idempotences atslēgu, kas iegūta no pasūtījuma, mēģinājuma numura un pieprasījuma hash.

  5. 05

    Apstiprināts

    Pasūtījums tiek atzīmēts par apmaksātu tikai pēc tam, kad Stripe ziņo par sesiju kā apmaksātu un tā atsauci, summu un valūtu sakrīt. E-pasta ziņojumi tiek nosūtīti pēc maksājuma veikšanas.

//Inženiertehniskās darbības
01 /Divas lietojumprogrammas, viena datu bāze
Viena lietojumprogramma katrai auditorijai

Veikala mājaslapa un CMS ir atsevišķas izvietošanas ar atsevišķām sesijām, sīkfailiem un uzbrukuma virsmām. Problēma publiskajā veikalā nevar atklāt personāla funkcijas, jo tās nav vienā aplikācijā.

API atrodas lietotnē

Katrai lietotnei ir savs API kā vienkāršu pieprasījumu apstrādātāji aiz neliela maršrutētāja, kas tiek sasniegts, izmantojot HTTP, izmantojot vienu visaptverošu maršrutu, vai procesa laikā no savām lapām. Viens validācijas, autorizācijas un SQL komplekts bez tīkla lēciena starp lapu un savu API.

Darbojas blakus datiem

Darbinieks atver datu bāzes savienojumu katram vaicājumam vai transakcijai, izmantojot Neon apvienoto galapunktu. Viedais izvietojums vada darbinieku netālu no datu bāzes, nevis apmeklētāju, jo lapa veic vairākus vaicājumus.

02 /Rūpīgi modelēta datu bāze
Nauda nekad nav peldoša

Summas ir CIPARI datu bāzē un decimāldaļas teksts lietojumprogrammā ar nelielu precīzās aritmētiskās palīgierīci. Ceļā uz Stripe nekas netiek noapaļots caur peldošo komatu.

Pasūtījumi ir momentuzņēmumi

Pasūtījuma vienība kopē produkta nosaukumu, SKU, cenu un izvēlētās opcijas pirkuma brīdī, tāpēc vēlākie kataloga labojumi nekad nepārraksta vēsturi. Pasūtījums, maksājums un izpildes statuss ir trīs neatkarīgas kolonnas.

Tikai migrācijas

65 versiju SQL migrācijas izveido apmēram 120 tabulas piecās shēmās. Tie darbojas stingrā secībā, un katrs tiek ierakstīts ar savu vēstures rindu tajā pašā darījumā. Identifikatori ir ULID: kārtojami, droši un neuzminējami.

03 /Krājumi, kurus nevar pārpārdot
Rezervācijas katrai noliktavai

Veicot pasūtījumu, tiek bloķētas krājumu rindas, tiek rezervēti krājumi pa noliktavām un tiek reģistrēts tieši tas, kas tika rezervēts, kur vienā darījumā. Atceļot izlaidumus, tiek atbrīvotas tieši šīs rezervācijas.

Interfeiss, kas sakrīt ar serveri

Produkta lapa, grozs un galvenes soma atņem to, kas jau ir grozā, tāpēc klientam nekad netiek piedāvāts daudzums, ko izrakstīšanās noraidītu.

04 /Maksājumi pārbaudīti ar Stripe
Idempotenta sesijas izveide

Vienlaicīgi klikšķi saņem vienu un to pašu Stripe sesiju, un labotais pieprasījums nekad netiek bloķēts ar iepriekšēju neveiksmīgu pieprasījumu. Maksājuma ierakstīšana tiek apsargāta, lai tas notiktu tieši vienu reizi, lai arī cik reižu pasūtījums tiktu skatīts.

Atcelts nozīmē atcelts

Atceļot pasūtījumu, vispirms tiek nokārtota vai beigusies jebkura atvērtā Stripe sesija, tāpēc atcelto pasūtījumu pēc tam nevar apmaksāt.

Atkļūdošana, kur tā darbojas

Checkout neizdevās tikai izvietošanas laikā. Tiešraides darbinieka žurnālu sakārtošana, reproducējot reālu pieprasījumu, liecināja, ka Stripe noraidīja sesijas izveidi, jo konts nepiedāvāja maksājuma veidus. Iemesls tika novērsts, un reģistrēšana tagad reģistrē Stripe kļūdas kodu un pieprasījuma ID.

05 /Konti, viesi un drošība
Viesi un deputāti

Checkout darbojas bez konta. Viesi identificē ar nejaušu marķieri sīkfailā HttpOnly; tiek saglabāts tikai tā hash. Paroles izmanto Argon2id tīrā JavaScript, un sesijas ir jauktas datu bāzes rindas, kuras var atsaukt centralizēti.

Īpašumtiesības pēc katra pasūtījuma pieprasījuma

Katrā pieprasījumā tiek pārbaudīts pierakstījies konts vai viesis, kuram ir pasūtījuma marķieris. Pasūtījumu viesis var atvērt jebkurā ierīcē ar pasūtījuma numuru, uzvārdu un pasta indeksu; visiem trim ir jāsakrīt, nepareiza informācija sniedz vienu vispārīgu atbildi, un rezultāts ir tikai lasāms.

Atļaujas un apstiprināšana

Katrs CMS maršruts nosauc atļauju, lomām ir atļaujas, un personāla darbības tiek ierakstītas audita žurnālā. Pieprasījuma struktūras tiek pārbaudītas, salīdzinot ar deklarēto formu, un nezināmi lauki tiek noraidīti.

06 /Piegāde, adreses un e-pasts
Piegāde kā dati

Katrā piegādes veidā ir norādītas valstis, kurās tas apkalpo, tāpēc reģionus un cenas maina darbinieki, nevis kods. Tā kā katrs pasūtījums tiek iegūts pēc pirkuma, veikals piedāvā vienu norādīto piegādes solījumu ar izslēgtām, bet gatavām pārvadātāja metodēm.

Adreses ieraksts, kas palīdz

Pasta indeksa lauks ir nosaukts valstij, ievadot pasta indeksu, tiek aizpildīta pilsēta, un mājas numurs un iela norāda tuvumā esošās atbilstības. Uzmeklēšana tiek veikta serverī, tāpēc nodrošinātāja atslēga nekad netiek atklāta, un adresi vienmēr var ierakstīt ar roku.

E-pasts, kas nevar atsaukt izpārdošanu

Zīmola HTML e-pasta ziņojumi ar vienkārša teksta alternatīvu tiek nosūtīti, kad pasūtījums ir apmaksāts, pēc tam, kad maksājums ir veikts. Pasta bibliotēkas noklusējuma savienojums neizdevās TLS rokasspiedienā darbiniekiem; izsekots no dzīvajiem žurnāliem un labots, izveidojot savienojumu, izmantojot saimniekdatora nosaukumu.

07 /Veikala pieredze
Ātri un indeksējami

Servera renderēts katalogs un saturs ar produktu lapām, kas piedāvā galeriju, variantu izvēli, krājumus pēc noliktavas un pielāgotas opcijas.

Zīmols un kustība

A dark black-and-gold default theme with a light alternative, an animated brand mark on first load, smooth scrolling and scroll-linked transitions with GSAP and Lenis. Reduced-motion preferences are respected.

Saturs tiek pārvaldīts SPS

Žurnālu, stāstus, ceļvežus, FAQ un politikas rediģē biroja darbinieki.

08 /Kvalitāte un darbība
Testi, kur kļūdas maksā naudu

Tipa pārbaude līdz galam ar automatizētām pārbaudēm, kas aptver pasūtījumu e-pastus un to piegādi, daudzuma ierobežojumus, piegādes reģionus, adreses veidlapu un pasūtījuma darbības.

Vienas komandas izvietošana

Katra lietojumprogramma tiek veidota ar OpenNext adapteri un tiek publicēta pakalpojumā Cloudflare ar vienu komandu. Konfigurācija ir repozitorijā; noslēpumi ir strādnieku noslēpumi un tādi nav.

Pārbaudīts, kur tas darbojas

Novērojamība ir ieslēgta abiem darbiniekiem ar strukturētu kļūdu reģistrēšanu katrā integrācijā. Izvietotās lietojumprogrammas labojumi tika apstiprināti ar reāliem pieprasījumiem, ne tikai izstrādes mašīnā.

//Kompromisi un nākamie soļi

Maksājuma apstiprinājums ir pull, nevis push

Maksājums tiek apstiprināts, kad klients atgriežas pie pasūtījuma.

NĀKAMAIS SOLIS

Stripe tīmekļa aizķere, tāpēc apstiprinājums un e-pasta ziņojumi nav atkarīgi no klienta atgriešanās

Adrešu ieteikumi ir atkarīgi no kartes datiem

Kartes dati zina ielas labāk nekā atsevišķus dzīvokļus.

NĀKAMAIS SOLIS

Pasta reģistra pakalpojumu sniedzējs ir pievienots tam pašam galapunktam precīzām AK adresēm

Nav fona darbu rindas

E-pasts tiek nosūtīts vienu reizi pēc atbildes saņemšanas.

NĀKAMAIS SOLIS

Rinda ar mēģinājumiem, lai padarītu piegādi stabilāku

Atsauksmes ir izstrādātas, nevis būvētas

Pārbaudītas pirkumu atsauksmes, kas saistītas ar piegādātiem, apmaksātiem pasūtījumiem, ar regulēšanu SPS.

NĀKAMAIS SOLIS

Nākamā izveides funkcija

RAŽOŠANA // TIEŠRAIDĒ
Skatiet tiešraidi vietnē zhr.artursdev.co.uk
zhr.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.