SPA architektúra
Single-Page Application: az oldal nem tölt újra, a tartalom a useUI hook-kal dinamikusan frissül a window-on regisztrált state-szel.
Bemutató · Projekt
Gabesz Pizza — Olasz pizzéria, online rendelés
Olasz stílusú pizzéria online rendelési platformja SPA architektúrával.
Next.js 14 + Prisma + bcrypt auth + SPA + modal-login
Áttekintés
A projekt célja
Egy olasz stílusú pizzéria online rendelési felületének kialakítása, ahol a vásárlók modal-login mintával, SPA-ban böngészhetik az étlapot és kosárba helyezhetik a kiválasztott pizzát.
Megoldásunk
Single-Page Application Next.js-szel, bcrypt hash-elt credential auth, modal-login mintával (nem dedikált login oldal), reszponzív kártyás étlap megjelenítéssel.
Eredmény
A vásárlók egy gombnyomással bejelentkezhetnek és leadhatják a rendelésüket anélkül, hogy elhagynák az aktuális oldalt — a modal-login pattern gyorsabbá és kényelmesebbé teszi a vásárlási folyamatot.
Főbb funkciók
Modal-login
A bejelentkezés nem külön oldal, hanem egy modal-ablak — a vásárló az étlap böngészése közben, egy kattintással léphet be.
Reszponzív étlap
Olasz pizzéria kártyás megjelenítés asztali és mobil nézetben, ?view= query paraméter támogatással a különböző nézetek teszteléséhez.
bcrypt credential auth
Biztonságos jelszó-tárolás bcrypt hash-sel, NextAuth credentials provider-rel, session-alapú jogosultságkezeléssel.
Tetszik amit látsz?
Írd meg, miben segíthetünk — 24 órán belül válaszolunk egy konkrét ajánlattal.
Képernyők
Képernyőkép
01-public-hero.webp — gabesz-pizza demo
Képernyőkép
02-public-etlap.webp — gabesz-pizza demo
Képernyőkép
03-public-pizzak.webp — gabesz-pizza demo
Képernyőkép
04-public-tesztak.webp — gabesz-pizza demo
Képernyőkép
05-public-desszertek.webp — gabesz-pizza demo
Képernyőkép
06-public-hero-dark.webp — gabesz-pizza demo
Képernyőkép
07-public-login-modal.webp — gabesz-pizza demo
Képernyőkép
08-customer-fiok.webp — gabesz-pizza demo
Képernyőkép
09-customer-fiok-scroll.webp — gabesz-pizza demo
Képernyőkép
10-customer-fiok-dark.webp — gabesz-pizza demo
Képernyőkép
11-admin-dashboard.webp — gabesz-pizza demo
Képernyőkép
12-admin-rendelesek.webp — gabesz-pizza demo
Képernyőkép
13-admin-etlap.webp — gabesz-pizza demo
Képernyőkép
14-admin-stat.webp — gabesz-pizza demo
Képernyőkép
15-admin-dashboard-dark.webp — gabesz-pizza demo
Képernyőkép
16-public-fooldal-mobile.webp — gabesz-pizza demo
Képernyőkép
17-customer-mobile.webp — gabesz-pizza demo
Képernyőkép
18-admin-mobile.webp — gabesz-pizza demo
Képernyőkép
gabesz-pizza homepage desktop hero (1440x900)
Képernyőkép
gabesz-pizza homepage mobile hero (375x812)
Képernyőkép
Új weboldal — gabeszpizza.aisolve.me
Technológiák
- Next.js
- TypeScript
- Prisma
- PostgreSQL
- Tailwind CSS
Eredmények
- 18+
- Screenshot a galériában
- 100%
- Reszponzív
- <200ms
- Modal-login válaszidő
Hasonló projektet szeretnél?
Nézd meg a csomagjainkat, vagy kérj egyedi ajánlatot — egy űrlap kitöltése elég.