Laravel + Vue Ads

01 / The task

Classified ads in Laravel and Vue

The list and detail pages used mismatched API contracts. Fields, pagination and validation needed to be aligned, with visitor records separated for the demo.

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 / Technology

Stack

03 / 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.

04 / Verification

Demo workflows

1. Open the catalog, change sorting and go to the next page.
2. View listing details and create a listing using a local image.
3. Check validation of empty or invalid input.
4. 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.