Alpe
A B2B marketplace for oil and energy, built from a Figma file — the whole interface written by hand in HTML, CSS and JavaScript, then handed to the agency’s developer to wire into their Laravel application.
- HTML5
- CSS3
- JavaScript
- Bootstrap
- jQuery
- B2B marketplace · Oil & energy
- Frontend developer, via Panze Studio
- Frontend Development
- alpe.org
The ask
A Figma design for a commodity marketplace, to be built as the front end of a Laravel application.
The build
Every screen written by hand in HTML, CSS and JavaScript — matched to the design rather than approximated with a builder.
The outcome
Markup the agency’s developer could wire straight into Laravel, without rebuilding it to fit.
THE PROBLEM
A design that has to survive being wired up
A marketplace front end is not a brochure: the same markup has to hold a commodity picker with a long taxonomy, an offer list that sorts, a bid table that changes as data arrives, and forms for buyers, sellers and agents who each see something different. It also has to be picked up by another developer and driven from a Laravel application — so guessing at structure, or leaning on a page builder, moves the work rather than doing it.
THE SOLUTION
Written by hand, to the Figma file
I built every screen from the design in plain HTML, CSS and JavaScript — no builder, no theme bent into shape — and used the libraries the interface genuinely calls for rather than a bundle: searchable selects for the commodity pickers, sortable tables for the offer lists, date pickers for delivery windows. The agency’s developer took that and wired it into their Laravel application.
- Eight commodity categories, faceted search and a requirement-posting flow
- Offer listings with tonnage, seller and release date, built to be driven from data
- Account, registration and trade-assurance screens for buyers, sellers and agents
- Conventional, readable markup, because someone else had to template it
THE STACK
Chosen for who picks it up next
The front end is mine; the Laravel application behind it is the agency’s. That split is the reason the markup stays plain — the developer templating it should not have to learn my abstractions first:
- HTML5
- CSS3
- JavaScript
- Bootstrap
- jQuery
- Select2
- DataTables
THE RESULT
Handed over ready to template
The design shipped as a working interface across the marketplace’s screens, and went into the Laravel build without being reworked to fit it. On an agency job split between two developers, that is the part that decides whether the front end saves time or costs it.
THE SERVICE BEHIND IT
Want something built this way?
This project came out of my Frontend Development work. That page covers the process in full — what I deliver, how a project runs, and the questions people usually ask before starting one.
What that service covers
- Pixel-accurate implementation, responsive from 320px upward
- Interfaces built to the data they carry, not to a template
- Accessible, conventional code the next developer can read
MORE WORK
Other case studies
Same write-up every time — the problem, the approach, the stack and what changed.
E-commerce enablement · Fujairah, UAE
Cod Partner
Figma design from the agency, built by hand as the marketing front end for a GCC e-commerce enablement platform — nine linked operations in one page.
- HTML5
- CSS3
- JavaScript
Branding & design studio · Subscription service
Canvascroft
Subscription creative service for a branding studio — no design file, just reference sites and a requirements list, built out in WordPress.
- WordPress
- Elementor
- WooCommerce