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
Alpe oil and energy marketplace homepage

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

Available for new projects

NEXT STEP

Have a project like this?

Based in Bangladesh — serving clients worldwide. Tell me what you are building and where it is stuck, and you will have a reply within one working day.

  • Reply within one working day
  • Fixed quote before work starts
  • UK, EU and US hours covered