Frontend implementation·2026

Carmatik Platform

The buyer storefront, the seller marketplace flow and the dealer help center of carmatik.ro. I built the full frontend of all three.

JavaScript
PostCSS
JSP
Figma

Visit live site

Full frontendBrowse, price, list, manage

14 filtersLive stock search with sorting

Buyer + sellerBoth sides of the marketplace

Desktop + mobileEvery screen size

01 — Context

The brief

carmatik.ro is a production automotive e-commerce platform. This study collects my platform work in three chapters. The insurance funnel is covered in its own study.

Buyer storefront: filter the live stock, open a vehicle page and price the car with the leasing calculator.
Seller flow: list a car with one guided form and manage it from the account dashboard.
Dealer help center: searchable documentation for the whole platform.

02 — Challenge

What made it hard

Two audiences share one platform: buyers who need to find and price the right car fast, and sellers who need to list one without it feeling like paperwork.

Findable stock. Buyers narrow the live stock through 14 filters with sorting.
Pricing on the spot. Every vehicle page carries a leasing calculator: a down payment and a term from 12 to 60 months give the monthly cost right next to the price, so a buyer never leaves the page to work it out.
A long form that reads short. The listing form is one accordion: technical details, listing details, optional extras and equipment. Completed sections get a checkmark, incomplete ones count the required fields still missing.
Equipment at scale. 160+ equipment options would drown a flat checkbox list. They sit in seven collapsible groups (audio, comfort, electric, electronics, extras, performance, safety), each with a live selected counter.
Quality gate. Nothing goes straight to the platform: a finished listing is sent to validation first, and sellers can park work in progress as a draft and finish later.
Dealer self-service. Dealers shouldn't need a phone call to learn the platform: a searchable help center documents it in categories and step-by-step articles.

03 — Contribution

What I did

I built the front end on both sides of the marketplace: the storefront buyers browse and the account area sellers work in.

Stock browsing. The stock listing behind 14 filters and sorting, on desktop and mobile.
Vehicle page. The gallery-led vehicle page: a full-screen lightbox, the description and equipment sections, the leasing calculator and similar offers to keep the browsing going.
The listing form. The four-section add-car accordion with per-section completion states, the grouped equipment checklists with live counters, and the photo uploader with drag ordering and a designated profile shot.
Account area. Login and registration, the my-listings dashboard with active, draft and deactivated tabs, and the publish, save-as-draft and deactivate modals around it.
Help center. All three levels of the dealer help center: the home with as-you-type search suggestions, category pages grouping their articles by task, and article pages with numbered steps, callouts and a was-this-helpful vote.

What it looks like

15 items

Carmatik stock listing with the filter rail, sorting and vehicle cards — Stock listing: every car on the platform, narrowed down with 14 filters and six ways to sort. On mobile the filters slide up from the bottom of the screen. Screens are in Romanian, the platform's home market.

The mobile stock listing with the filter bottom sheet open — Stock listing: every car on the platform, narrowed down with 14 filters and six ways to sort. On mobile the filters slide up from the bottom of the screen. Screens are in Romanian, the platform's home market.

Vehicle page with the image gallery leading the page — Vehicle page: the photos lead, with the price and the dealer's contact details right beside them.

Full-screen lightbox over the vehicle page gallery — Full-screen photos: any photo opens large, with the rest lined up underneath to keep flipping through.

Vehicle page below the gallery: description, leasing calculator and equipment list — Further down the vehicle page: the car's description and equipment, links to independent history reports, and a leasing calculator that turns a down payment and a term into a monthly cost. On mobile, a map to the dealer and similar cars round off the page.

The dealer-location map and similar offers on the vehicle page on mobile — Further down the vehicle page: the car's description and equipment, links to independent history reports, and a leasing calculator that turns a down payment and a term into a monthly cost. On mobile, a map to the dealer and similar cars round off the page.

Carmatik login page: email and password form beside a full-height photo — Login: email and password, with a link for forgotten passwords.

The my-listings dashboard with active, drafts and deactivated tabs, an empty state and the account dropdown — My listings: a seller's cars in three tabs (active, drafts, deactivated). A brand-new seller is pointed straight at adding their first car.

Add-car form showing a completed section checkmark, a section flagging one missing required field, and the optional details section — The listing form: it checks itself as the seller fills it in. Sections get their checkmark the moment they're complete, and unfinished ones show how many required fields are left.

The add-car form on mobile — The listing form: it checks itself as the seller fills it in. Sections get their checkmark the moment they're complete, and unfinished ones show how many required fields are left.

Equipment section: seven collapsible groups with per-group selected counters and the Extra group expanded — Equipment: 160+ options sorted into seven groups, each counting what's picked, so the list never feels endless.

Photos and description: at least six photos, arranged in the order they'll appear with one marked as the cover shot, plus a short description of the car.

Confirmation modal: the listing was sent to validation and will be reviewed before going live — Publish: a finished listing is reviewed before it goes live. Work in progress can be saved as a draft instead.

The send-to-validation confirmation on mobile — Publish: a finished listing is reviewed before it goes live. Work in progress can be saved as a draft instead.

The my-listings dashboard with one active listing: the card shows an active badge, spec chips and price beside view, edit and deactivate actions — Live listing: the car's status, key details and price on one card, with buttons to view it online, edit it or take it down.

The my-listings dashboard on mobile — Live listing: the car's status, key details and price on one card, with buttons to view it online, edit it or take it down.

Help center home with live search suggestions open over the platform categories — Help center: type a question and matching articles appear as you type, with everything organized by topic below.

Help center home on mobile — Help center: type a question and matching articles appear as you type, with everything organized by topic below.

A help center category page listing its articles — Inside a topic: all of its articles in one place, with the other topics listed alongside.

A help center category on mobile — Inside a topic: all of its articles in one place, with the other topics listed alongside.

A help center article page with numbered steps and callouts — An article: the answer step by step, with warnings and tips where they matter and a quick did-this-help vote at the end.

A help center article on mobile — An article: the answer step by step, with warnings and tips where they matter and a quick did-this-help vote at the end.

Outcome

A buyer filters the live stock, opens a gallery-led vehicle page and prices the car with the leasing calculator. A seller creates an account, completes one guided form and manages the validated listing from their dashboard. Dealers learn the platform from the searchable help center instead of a phone call.