Demo · 8 September 2026

Laravel + Vue Ads

A Laravel API and Vue client implement an ads catalog: list, detail, create, delete, search, sort and pagination. Response and error contracts match across layers; demo CRUD is session-isolated and API plus images use the same origin.

Demo ↗Documentation →Source code ↗

Backend and Vue client: April 2024. Public demo update: 7 September 2026.Version 54f1be9a13 interface screenshots

Catalog: cards and sorting

01 / The task

Classified ads in Laravel and Vue

Public deployment required correcting base URLs, frontend/backend contracts and form validation, while preventing one visitor from changing another visitor’s data.

Use case: Browsing and posting classified ads.

Work done

Laravel API and Vue client.
Contract fixes for the list, detail page, descriptions and images.
Upgrade to Laravel 12, validation, signed cookies and restricted demo CRUD.

02 / Implementation

What sets the implementation apart

One contract supports desktop and mobile views, server pagination and validation errors. A session owns its created ads, foreign records return 404, and reset restores the initial dataset without an admin step.

Screenshots

Screens, forms, errors

Screenshots, diagrams and source evidence retain their original language; captions and descriptions are translated.

03 / Technology

Stack

Shares use Git application-file bytes at pinned revisions. Each file belongs to one subsystem under scripts/generate-stack-share.mjs rules; tests, assets, dependencies and generated files are excluded. Rounded to 0.1%. This describes code composition, not proficiency.

Laravel / Eloquent

Validation, owner scope, CRUD and expiration.

Vue

Catalog routes, listing details, forms, sorting and pagination.

MySQL

Listings, DECIMAL prices and retention period.

04 / Decisions

How the project works

The client and API share one origin with no external backend URL.
The 24 seed listings are shared; visitor-created records are filtered by owner.
Images come from a fixed set of local SVGs; arbitrary URLs and mass assignment are excluded.
Prices are stored as DECIMAL(10,2); the API returns consistent scalar pagination metadata.

05 / Verification

Demo workflows

Open the catalog, change sorting and go to the next page.
View listing details and create a listing using a local image.
Check validation of empty or invalid input.
Open another visitor's ID in a second session: expect 404. Delete your own listing and reset the example.

Check results

13 meaningful screenshots of the actual interface retained.
Each screenshot includes its date, scenario and code revision.
Peak container RAM in the short test: 39.76 MiB. Shared services are counted separately; the shop includes its own database.
6 scenario repetitions measured; median 1605.5 ms, maximum 2981 ms. Timing includes the browser and HTTPS; methodology and limitations are included.

Limitations

All listings and images are for demonstration. Sales and arbitrary uploads are disabled.
20 personal listings per session, 1,000 in total; one-hour TTL and a cleanup timer every five minutes.
The legacy Vue build tooling has known development-dependency issues; a full frontend tooling migration was not performed.

Technical notes

Modules, API, data model, setup and check results.

Documentation →Materials ↓