Store

PORTFOLIO / 2026

NUXT.JSLARAVEL

FULL-STACK E-COMMERCE

Modern
Commerce
Platform

Decoupled architecture between Nuxt.js as a customer-facing storefront and Laravel as an API backend — designed for scalability, security, and an efficient content management experience.

FRONTEND

Nuxt.js 3

BACKEND

Laravel + Filament

DATABASE

Neon Postgres

STORAGE

Cloudflare R2

01 —

System Architecture

👤

Customer

HTTPS
Nuxt.js 3 — Storefront
🗂Catalog & Product

/catalogs, /catalogs/[slug], and /products/[slug]

SSRPublic
🖼Gallery Page

/gallery

SSRPublic
✉️Message Me

/contact -> send-email.post.ts → Resend

ResendServer Route
👤Profile & Address

/profile -> CRUD Addresses

Bearer Token
🛒Cart & Checkout

Pinia + localStorage

Client-onlyNo DB
🔐Google Login

Redirect → Laravel Socialite

OAuth 2.0← Token
→ API← Token
Laravel — API Backend
🔌GET /catalogs

List catalog

Public
🔌GET /catalogs/{slug}

Catalog +

PublicWith Relations
🔌GET /products/{slug}

Product details

Public
🔌GET /gallery

Gallery images list

Public
🔒Profile & Address API

CRUD Addresses — protected

Bearer Token
🔑Google Socialite

OAuth callback → issue token

Socialite← Token
Eloquent
Filament v3 — Admin CMS
🗂Catalog Management

CRUD Catalog

CRUD→ R2
📦Product Management

CRUD Product

CRUD→ R2
🖼Gallery Management

CRUD Gallery

CRUD→ R2
👥User & Role

Manage user, role, permission

ShieldSpatie
🛡Permission System

Granular permission per role

RBACspatie/permission
HTTPS
🧑‍💼

Admin / Staff

Infra — Nuxt
📧Resend

Email delivery from Message Me via server/api/send-email.post.ts

TransactionalDirect
Infra — Laravel
🗄Neon PostgreSQL

Serverless DB — data, relationships, image URLs

ServerlessPostgreSQL
☁️Cloudflare R2

Object storage for images — S3-compat DB only stores upload URLs

S3-compatZero Egress
🔑Google OAuth

Identity provider via Socialite Callback handled by Laravel

OAuth 2.0External IdP
Legend —
Nuxt.js
Laravel API
Filament CMS
Infra Nuxt
Infra Laravel
Request / Data Flow
02 —

Nuxt.js Pages & Features

🗂
Catalog Listing
Displays all available catalogs. Each catalog shows a list of products linked through relationships in Laravel.
SSRPublic APIDynamic Route
📦
Product Detail
Product detail page accessed via slug. Data is fetched from the Laravel public endpoint /api/products/{slug}.
Slug-basedNo AuthSEO Meta
🖼
Gallery
Showcase of product photos used by customers. Managed through Filament and retrieved via the public gallery API.
Cloudflare R2Public API
✉️
Message Me
Contact form with name, email, subject, and message fields. Emails are sent directly from the Nuxt server route using Resend — without going through Laravel.
Resend APIServer Routesend-email.post.ts
👤
Profile & Address
The profile page is only accessible after login. Users can perform CRUD operations on shipping addresses. Every request uses a Bearer token from Google OAuth.
Protected RouteBearer TokenCRUD
🛒
Cart & Checkout
The slideover cart is managed entirely on the client-side using Pinia store and localStorage. No database persistence — lightweight and fast.
PinialocalStorageClient-only
03 —

OAuth Google Flow

DESIGN DECISION

Laravel acts as an OAuth broker — verifying Google identity via Socialite and returning an internal token to Nuxt, so Nuxt doesn't need to store Google credentials.

👤
User
Click "Login with Google" in Nuxt
🔗
Google OAuth
Redirect to Google consent screen
⚙️
Laravel Socialite
Verify callback, check / create user
🔑
Token Issued
Laravel returns Bearer token to Nuxt
🔓
Profile Unlocked
Nuxt stores token, accesses profile page
04 —

Laravel Backend & Filament CMS

🔌
Public RESTful API
Public endpoints without authentication for storefront needs. Catalog by slug returns product relations all at once. Designed for Nuxt SSR.
GET /catalogsGET /catalogs/{slug}GET /products/{slug}GET /gallery
🏛
Filament Admin Panel
Content management dashboard for superadmins and staff. Full CRUD for catalogs, products, and gallery. Direct image uploads to Cloudflare R2.
Filament v3Cloudflare R2Neon Postgres
🛡
RBAC — Role & Permission
User and role management for internal staff. Filament Shield as a UI wrapper on top of Spatie Laravel Permission.
Filament ShieldSpatie PermissionRole-based
🗄
Neon Postgres
Serverless cloud PostgreSQL for production. Stores only upload URLs — no binary images in the database. Schema managed via Laravel migrations.
ServerlessPostgreSQLURL-only Storage
☁️
Cloudflare R2 Object Storage
All images (catalogs, products, gallery) are stored in R2. Uses S3-compatible API from Laravel. Free CDN edge delivery with no egress fees.
S3-compatibleZero EgressCDN Edge
🔐
Google OAuth via Socialite
Laravel acts as an OAuth broker for customer authentication. Socialite handles the Google callback, verifies identity, and issues an internal Bearer token returned to Nuxt.
Laravel SocialiteOAuth 2.0
05 —

Tech Stack Summary

TECHNOLOGYLAYERPeran dalam Sistem
Nuxt.jsfrontendStorefront SSR, routing, server API routes, state management
PiniafrontendGlobal state for cart — persisted in localStorage
LaravelbackendREST API, Google OAuth via Socialite, business logic
Filament v3backendAdmin panel CMS — CRUD for catalogs, products, gallery
Filament Shield + SpatiebackendRBAC — granular role & permission management for staff
Neon PostgresinfraServerless PostgreSQL — data, relationships, image URLs
Cloudflare R2infraImage object storage — S3-compatible, zero egress fee
ResendinfraEmail delivery from contact form via Nuxt server route
Google OAuth / SocialiteauthCustomer login — handshake via Laravel, token returned to Nuxt