{"id":19405,"date":"2025-12-20T12:55:17","date_gmt":"2025-12-20T12:55:17","guid":{"rendered":"https:\/\/offline-web.com\/project\/hodler-ike\/"},"modified":"2026-08-14T16:17:58","modified_gmt":"2026-08-14T13:17:58","slug":"bitvalve","status":"publish","type":"project","link":"https:\/\/offline-web.com\/en\/project\/bitvalve\/","title":{"rendered":"BitValve \u2013 Crypto P2P Marketplace Frontend"},"content":{"rendered":"\t\t<div data-elementor-type=\"page\" data-elementor-id=\"19113\" class=\"elementor elementor-19113\" data-elementor-settings=\"{&quot;ha_cmc_init_switcher&quot;:&quot;no&quot;}\" data-elementor-post-type=\"elementor_library\">\n\t\t\t\t<div class=\"elementor-element elementor-element-38ff0c92 e-flex e-con-boxed tm-col-stretched-none tm-bg-color-over-image e-con e-parent\" data-id=\"38ff0c92\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-4d84c6b0 e-con-full e-flex tm-col-stretched-none tm-bg-color-over-image e-con e-child\" data-id=\"4d84c6b0\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t<div class=\"elementor-element elementor-element-1cb10c66 e-con-full e-flex tm-col-stretched-none tm-bg-color-over-image e-con e-child\" data-id=\"1cb10c66\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t<div class=\"elementor-element elementor-element-4b4fbcf9 e-con-full e-flex tm-col-stretched-none tm-bg-color-over-image e-con e-child\" data-id=\"4b4fbcf9\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3e90d164 project-feature-image elementor-widget elementor-widget-image\" data-id=\"3e90d164\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"1600\" height=\"900\" src=\"https:\/\/offline-web.com\/wp-content\/uploads\/2026\/08\/bitvalve-banner.png\" class=\"attachment-full size-full wp-image-20594\" alt=\"BitValve case study \u2014 Built the P2P marketplace frontend: offer listings, filtering and the full trade flow\" srcset=\"https:\/\/offline-web.com\/wp-content\/uploads\/2026\/08\/bitvalve-banner.png 1600w, https:\/\/offline-web.com\/wp-content\/uploads\/2026\/08\/bitvalve-banner-300x169.png 300w, https:\/\/offline-web.com\/wp-content\/uploads\/2026\/08\/bitvalve-banner-1024x576.png 1024w, https:\/\/offline-web.com\/wp-content\/uploads\/2026\/08\/bitvalve-banner-768x432.png 768w, https:\/\/offline-web.com\/wp-content\/uploads\/2026\/08\/bitvalve-banner-1536x864.png 1536w\" sizes=\"(max-width: 1600px) 100vw, 1600px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-5263195e e-con-full e-flex tm-col-stretched-none tm-bg-color-over-image e-con e-child\" data-id=\"5263195e\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t<div class=\"elementor-element elementor-element-1ebddd8d e-con-full e-flex tm-col-stretched-none tm-bg-color-over-image e-con e-child\" data-id=\"1ebddd8d\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-73391389 elementor-widget elementor-widget-tm-ele-text-editor-advanced\" data-id=\"73391389\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"tm-ele-text-editor-advanced.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"tm-text-editor-advanced\">\r\n\t\t\t\t\t<div class=\"each-item elementor-repeater-item-3a4f152\" >\r\n\t\t\t\t<p>Client:<\/p>\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t<div class=\"each-item elementor-repeater-item-8b12c64\" >\r\n\t\t\t\tBitValve\t\t\t\t<\/div>\r\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-547cac06 e-con-full tm-col-stretched-none e-flex tm-bg-color-over-image e-con e-child\" data-id=\"547cac06\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6b4efee7 elementor-widget elementor-widget-tm-ele-text-editor-advanced\" data-id=\"6b4efee7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"tm-ele-text-editor-advanced.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"tm-text-editor-advanced\">\r\n\t\t\t\t\t<div class=\"each-item elementor-repeater-item-3a4f152\" >\r\n\t\t\t\t<p>Date:<\/p>\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t<div class=\"each-item elementor-repeater-item-8b12c64\" >\r\n\t\t\t\t2021\t\t\t\t<\/div>\r\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-2281579 e-con-full tm-col-stretched-none e-flex tm-bg-color-over-image e-con e-child\" data-id=\"2281579\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-946c45c elementor-widget elementor-widget-tm-ele-text-editor-advanced\" data-id=\"946c45c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"tm-ele-text-editor-advanced.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"tm-text-editor-advanced\">\r\n\t\t\t\t\t<div class=\"each-item elementor-repeater-item-3a4f152\" >\r\n\t\t\t\t<p>Duration:<\/p>\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t<div class=\"each-item elementor-repeater-item-8b12c64\" >\r\n\t\t\t\t4 months\t\t\t\t<\/div>\r\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-18561d34 e-con-full tm-col-stretched-none e-flex tm-bg-color-over-image e-con e-child\" data-id=\"18561d34\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t<div class=\"elementor-element elementor-element-dbeab39 e-con-full e-flex tm-col-stretched-none tm-bg-color-over-image e-con e-child\" data-id=\"dbeab39\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-150b6588 elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"150b6588\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-29b55989 elementor-widget elementor-widget-tm-ele-text-editor\" data-id=\"29b55989\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"tm-ele-text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"tm-text-editor\" >\r\n\t\tBitValve \u2013 Crypto P2P Marketplace Frontend\t\t<\/div>\r\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-383389de elementor-widget elementor-widget-text-editor\" data-id=\"383389de\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\tA crypto P2P marketplace frontend modelled on BitValve, with offer listings, multi-dimensional filtering and the trading flows around them. I built the frontend only.\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c9f7e47 elementor-widget elementor-widget-shortcode\" data-id=\"c9f7e47\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\"><div class=\"offline-proj-gallery\" style=\"display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;\"><img decoding=\"async\" src=\"https:\/\/offline-web.com\/wp-content\/uploads\/2026\/08\/bitvalve-1-1024x683.png\" alt=\"BitValve offer listings \u2014 Buy and sell offers with payment method filters\" loading=\"lazy\" style=\"width:100%;height:auto;display:block;border-radius:12px;\" \/><img decoding=\"async\" src=\"https:\/\/offline-web.com\/wp-content\/uploads\/2026\/08\/bitvalve-2-1024x683.png\" alt=\"BitValve trade flow \u2014 Escrow trade screen with limits and reputation\" loading=\"lazy\" style=\"width:100%;height:auto;display:block;border-radius:12px;\" \/><\/div><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ee6d20c elementor-widget elementor-widget-heading\" data-id=\"ee6d20c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">About the client<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3c76891 elementor-widget elementor-widget-text-editor\" data-id=\"3c76891\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\tBitValve is a peer-to-peer crypto marketplace where people buy and sell digital assets directly, across a long list of payment methods. Everything on it depends on users trusting a stranger enough to trade.\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a075adf elementor-widget elementor-widget-heading\" data-id=\"a075adf\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Project Overview<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d0a0dfd elementor-widget elementor-widget-text-editor\" data-id=\"d0a0dfd\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\tThis was the frontend layer of a crypto P2P marketplace built along the lines of BitValve: browsing offers, filtering by payment method, currency, country and amount, and moving through the trading screens.\n\nThe interesting problem is density. A single offer row carries price, limits, accepted payment methods, seller reputation and availability, and a user scans dozens of them looking for the one that fits. Get the hierarchy wrong and the whole list becomes unreadable.\n\nFiltering is the other half. Filters have to combine, and results have to update while the user is still thinking, not after. On a list this size that is a frontend architecture question before it is a UI question.\n\nNo backend on this one. The work was UI architecture, component composition and state handling, built so a real API could be dropped in behind it without a rewrite.\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1383c846 elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"1383c846\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-5896966 e-con-full e-flex tm-col-stretched-none tm-bg-color-over-image e-con e-child\" data-id=\"5896966\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t<div class=\"elementor-element elementor-element-818494d e-con-full e-flex tm-col-stretched-none tm-bg-color-over-image e-con e-child\" data-id=\"818494d\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-32b867c6 horizontal-line-align-left vertical-line-align-bottom elementor-widget elementor-widget-tm-ele-section-title\" data-id=\"32b867c6\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"tm-ele-section-title.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"tm-sc-section-title section-title \">\r\n\t<div class=\"title-wrapper\">\r\n\t\t\t\t\t\t\t<h2 class=\"title \"  >\r\n\r\n\t\t\r\n\t\t\t\t<span class=\"title-part1 \">The Challenge<\/span>\r\n\t\t\t\t\r\n\t\t\t\t\t\t\t\r\n\t<\/h2>\r\n\t<div class=\"title-seperator-line\"><\/div>\t\t\t\t\t\t<\/div>\r\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-678448a1 e-con-full tm-col-stretched-none e-flex tm-bg-color-over-image e-con e-child\" data-id=\"678448a1\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1e31b7a2 elementor-widget elementor-widget-tm-ele-text-editor\" data-id=\"1e31b7a2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"tm-ele-text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"tm-text-editor\" >\r\n\t\tFintech interfaces carry a lot of UI state. Filters, sorting and pagination all interact, and every combination has an empty case, a loading case and a too-many-results case. Missing one of those is how a marketplace ends up looking broken.\n\nThere is also a trust dimension that is easy to underestimate. When someone is about to send money to a stranger, a misaligned column or an ambiguous label costs more than it would anywhere else.\t\t<\/div>\r\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-558c3bf6 e-flex e-con-boxed tm-col-stretched-none tm-bg-color-over-image e-con e-parent\" data-id=\"558c3bf6\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7427a4b elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"7427a4b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-af4b431 elementor-widget elementor-widget-heading\" data-id=\"af4b431\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\"><p>My Contribution<\/p><\/h3>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-030d331 e-flex e-con-boxed tm-col-stretched-none tm-bg-color-over-image e-con e-parent\" data-id=\"030d331\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9d749f7 elementor-widget elementor-widget-html\" data-id=\"9d749f7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\tI built the entire frontend around a component architecture meant to be reused rather than copied. An established component library covers the tables and filter controls, where writing my own would have been effort spent on a solved problem.\n\nTailwind CSS handles layout and spacing, which is what made it possible to iterate quickly on screens this dense.\n\nI structured the UI so that backend integration would be a matter of swapping the data source, not reworking the components.\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f449a5f elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"f449a5f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fc269f2 elementor-widget elementor-widget-heading\" data-id=\"fc269f2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\"><p>Technology Stack<\/p><\/h3>\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-24736805 e-con-full e-flex tm-col-stretched-none tm-bg-color-over-image e-con e-child\" data-id=\"24736805\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-458bd0eb elementor-widget elementor-widget-tm-ele-list\" data-id=\"458bd0eb\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"tm-ele-list.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<ul class=\"tm-sc-list \">\r\n\t<li class=\"\">\r\n\t\t\t\t<i aria-hidden=\"true\" class=\" flaticon-common-confirmation\"><\/i>\t\t\t\t<span>\r\n\tVue.js, Tailwind CSS, frontend-only architecture, crypto marketplace UI, complex filtering and listing interfaces<\/span><\/li><\/ul>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8d79716 elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"8d79716\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1a28db7 elementor-widget elementor-widget-heading\" data-id=\"1a28db7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h6 class=\"elementor-heading-title elementor-size-default\">Tags<\/h6>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6164aa5 elementor-widget elementor-widget-post-info\" data-id=\"6164aa5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"post-info.default\">\n\t\t\t\t\t\t\t<ul class=\"elementor-inline-items elementor-icon-list-items elementor-post-info\">\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item elementor-repeater-item-12c28ab elementor-inline-item\" itemprop=\"about\">\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-tags\" viewBox=\"0 0 640 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M497.941 225.941L286.059 14.059A48 48 0 0 0 252.118 0H48C21.49 0 0 21.49 0 48v204.118a48 48 0 0 0 14.059 33.941l211.882 211.882c18.744 18.745 49.136 18.746 67.882 0l204.118-204.118c18.745-18.745 18.745-49.137 0-67.882zM112 160c-26.51 0-48-21.49-48-48s21.49-48 48-48 48 21.49 48 48-21.49 48-48 48zm513.941 133.823L421.823 497.941c-18.745 18.745-49.137 18.745-67.882 0l-.36-.36L527.64 323.522c16.999-16.999 26.36-39.6 26.36-63.64s-9.362-46.641-26.36-63.64L331.397 0h48.721a48 48 0 0 1 33.941 14.059l211.882 211.882c18.745 18.745 18.745 49.137 0 67.882z\"><\/path><\/svg>\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text elementor-post-info__item elementor-post-info__item--type-terms\">\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-post-info__terms-list\">\n\t\t\t\t<a href=\"https:\/\/offline-web.com\/en\/tag\/crypto-platforms\/\" class=\"elementor-post-info__terms-list-item\">Crypto Platforms<\/a>, <a href=\"https:\/\/offline-web.com\/en\/tag\/fintech-interfaces\/\" class=\"elementor-post-info__terms-list-item\">Fintech Interfaces<\/a>, <a href=\"https:\/\/offline-web.com\/en\/tag\/frontend-development\/\" class=\"elementor-post-info__terms-list-item\">Frontend Development<\/a>, <a href=\"https:\/\/offline-web.com\/en\/tag\/p2p-marketplaces\/\" class=\"elementor-post-info__terms-list-item\">P2P Marketplaces<\/a>, <a href=\"https:\/\/offline-web.com\/en\/tag\/primevue\/\" class=\"elementor-post-info__terms-list-item\">PrimeVue<\/a>, <a href=\"https:\/\/offline-web.com\/en\/tag\/tailwind-css\/\" class=\"elementor-post-info__terms-list-item\">Tailwind CSS<\/a>, <a href=\"https:\/\/offline-web.com\/en\/tag\/ui-architecture\/\" class=\"elementor-post-info__terms-list-item\">UI Architecture<\/a>, <a href=\"https:\/\/offline-web.com\/en\/tag\/vue-js\/\" class=\"elementor-post-info__terms-list-item\">Vue.js<\/a>\t\t\t\t<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t<\/ul>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-68e616d elementor-widget elementor-widget-heading\" data-id=\"68e616d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h6 class=\"elementor-heading-title elementor-size-default\">Categories<\/h6>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7e0ca46 elementor-widget elementor-widget-post-info\" data-id=\"7e0ca46\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"post-info.default\">\n\t\t\t\t\t\t\t<ul class=\"elementor-inline-items elementor-icon-list-items elementor-post-info\">\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item elementor-repeater-item-276f4a9 elementor-inline-item\" itemprop=\"about\">\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-tags\" viewBox=\"0 0 640 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M497.941 225.941L286.059 14.059A48 48 0 0 0 252.118 0H48C21.49 0 0 21.49 0 48v204.118a48 48 0 0 0 14.059 33.941l211.882 211.882c18.744 18.745 49.136 18.746 67.882 0l204.118-204.118c18.745-18.745 18.745-49.137 0-67.882zM112 160c-26.51 0-48-21.49-48-48s21.49-48 48-48 48 21.49 48 48-21.49 48-48 48zm513.941 133.823L421.823 497.941c-18.745 18.745-49.137 18.745-67.882 0l-.36-.36L527.64 323.522c16.999-16.999 26.36-39.6 26.36-63.64s-9.362-46.641-26.36-63.64L331.397 0h48.721a48 48 0 0 1 33.941 14.059l211.882 211.882c18.745 18.745 18.745 49.137 0 67.882z\"><\/path><\/svg>\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text elementor-post-info__item elementor-post-info__item--type-terms\">\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-post-info__terms-list\">\n\t\t\t\t<a href=\"https:\/\/offline-web.com\/en\/category\/fintech\/\" class=\"elementor-post-info__terms-list-item\">Fintech<\/a>, <a href=\"https:\/\/offline-web.com\/en\/category\/marketplaces\/\" class=\"elementor-post-info__terms-list-item\">Marketplaces<\/a>, <a href=\"https:\/\/offline-web.com\/en\/category\/web-applications\/\" class=\"elementor-post-info__terms-list-item\">Web Applications<\/a>\t\t\t\t<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t<\/ul>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2be1224 elementor-widget elementor-widget-tm-ele-projects-pre-next\" data-id=\"2be1224\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"tm-ele-projects-pre-next.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"single-post-next-prev-links\">\r\n\t<div class=\"nav-previous\">\r\n\t\t<a rel=\"prev\" href=\"https:\/\/offline-web.com\/en\/project\/icap-bulgaria-ead\/\" title=\"ICAP Bulgaria EAD \u2013 Corporate Website\" class=\" \"><span>ICAP Bulgaria EAD \u2013 Corporate Website<\/span><\/a>\t<\/div>\r\n\r\n\t<div class=\"nav-next \">\r\n\t\t<a rel=\"next\" href=\"https:\/\/offline-web.com\/en\/project\/baby-sisters\/\" title=\"Baby Sisters \u2013 Babysitting Booking Platform\" class=\" \"><span>Baby Sisters \u2013 Babysitting Booking Platform<\/span><\/a>\t<\/div>\r\n<\/div> \t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-753783f elementor-widget elementor-widget-heading\" data-id=\"753783f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Read More<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-39a9f3c elementor-grid-3 elementor-grid-tablet-2 elementor-grid-mobile-1 elementor-posts--thumbnail-top elementor-widget elementor-widget-posts\" data-id=\"39a9f3c\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;classic_columns&quot;:&quot;3&quot;,&quot;classic_columns_tablet&quot;:&quot;2&quot;,&quot;classic_columns_mobile&quot;:&quot;1&quot;,&quot;classic_row_gap&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:35,&quot;sizes&quot;:[]},&quot;classic_row_gap_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;classic_row_gap_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]}}\" data-widget_type=\"posts.classic\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-posts-container elementor-posts elementor-posts--skin-classic elementor-grid\" role=\"list\">\n\t\t\t\t<article class=\"elementor-post elementor-grid-item post-19395 project type-project status-publish has-post-thumbnail hentry category-real-estate-platforms category-startups category-web-applications tag-full-stack-development tag-geospatial-search tag-laravel tag-real-estate-tech tag-startup-product tag-vue-3 tag-vue-js tag-vuetify\" role=\"listitem\">\n\t\t\t\t<a class=\"elementor-post__thumbnail__link\" href=\"https:\/\/offline-web.com\/en\/project\/prosperty-ike\/\" tabindex=\"-1\" >\n\t\t\t<div class=\"elementor-post__thumbnail\"><img decoding=\"async\" width=\"300\" height=\"169\" src=\"https:\/\/offline-web.com\/wp-content\/uploads\/2026\/08\/prosperty-ike-banner-300x169.png\" class=\"attachment-medium size-medium wp-image-20581\" alt=\"Prosperty case study \u2014 Built the geospatial property platform: map search, listings and the agent back office\" srcset=\"https:\/\/offline-web.com\/wp-content\/uploads\/2026\/08\/prosperty-ike-banner-300x169.png 300w, https:\/\/offline-web.com\/wp-content\/uploads\/2026\/08\/prosperty-ike-banner-1024x576.png 1024w, https:\/\/offline-web.com\/wp-content\/uploads\/2026\/08\/prosperty-ike-banner-768x432.png 768w, https:\/\/offline-web.com\/wp-content\/uploads\/2026\/08\/prosperty-ike-banner-1536x864.png 1536w, https:\/\/offline-web.com\/wp-content\/uploads\/2026\/08\/prosperty-ike-banner.png 1600w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/div>\n\t\t<\/a>\n\t\t\t\t<div class=\"elementor-post__text\">\n\t\t\t\t<h3 class=\"elementor-post__title\">\n\t\t\t<a href=\"https:\/\/offline-web.com\/en\/project\/prosperty-ike\/\" >\n\t\t\t\tProsperty IKE \u2013 Real Estate Platform\t\t\t<\/a>\n\t\t<\/h3>\n\t\t\t\t<div class=\"elementor-post__excerpt\">\n\t\t\t<p>A property platform built around geospatial search, rather than a list with filters bolted on. Full-stack, plus a lot of restructuring as the startup found its shape.<\/p>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/article>\n\t\t\t\t<article class=\"elementor-post elementor-grid-item post-19381 project type-project status-publish has-post-thumbnail hentry category-b2b-platforms category-enterprise-systems category-internal-tools tag-b2b-sales-tools tag-customer-management tag-desktop-applications tag-electron tag-enterprise-software tag-frontend-development tag-vue-js\" role=\"listitem\">\n\t\t\t\t<a class=\"elementor-post__thumbnail__link\" href=\"https:\/\/offline-web.com\/en\/project\/adidas-ag\/\" tabindex=\"-1\" >\n\t\t\t<div class=\"elementor-post__thumbnail\"><img decoding=\"async\" width=\"300\" height=\"169\" src=\"https:\/\/offline-web.com\/wp-content\/uploads\/2026\/08\/adidas-ag-banner-300x169.png\" class=\"attachment-medium size-medium wp-image-20569\" alt=\"Adidas AG case study \u2014 Built a lightweight Electron desktop app for B2B customer and document management\" srcset=\"https:\/\/offline-web.com\/wp-content\/uploads\/2026\/08\/adidas-ag-banner-300x169.png 300w, https:\/\/offline-web.com\/wp-content\/uploads\/2026\/08\/adidas-ag-banner-1024x576.png 1024w, https:\/\/offline-web.com\/wp-content\/uploads\/2026\/08\/adidas-ag-banner-768x432.png 768w, https:\/\/offline-web.com\/wp-content\/uploads\/2026\/08\/adidas-ag-banner-1536x864.png 1536w, https:\/\/offline-web.com\/wp-content\/uploads\/2026\/08\/adidas-ag-banner.png 1600w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/div>\n\t\t<\/a>\n\t\t\t\t<div class=\"elementor-post__text\">\n\t\t\t\t<h3 class=\"elementor-post__title\">\n\t\t\t<a href=\"https:\/\/offline-web.com\/en\/project\/adidas-ag\/\" >\n\t\t\t\tAdidas AG \u2013 B2B Sales Desktop Application\t\t\t<\/a>\n\t\t<\/h3>\n\t\t\t\t<div class=\"elementor-post__excerpt\">\n\t\t\t<p>A lightweight desktop tool for Adidas B2B sales, with customer data and sales documents in one place for frequent daily use.<\/p>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/article>\n\t\t\t\t<article class=\"elementor-post elementor-grid-item post-19403 project type-project status-publish has-post-thumbnail hentry category-corporate-websites category-financial-services category-web-applications tag-content-management tag-corporate-websites tag-credit-risk tag-financial-services tag-international-organizations tag-seo tag-wordpress\" role=\"listitem\">\n\t\t\t\t<a class=\"elementor-post__thumbnail__link\" href=\"https:\/\/offline-web.com\/en\/project\/icap-crif-ae\/\" tabindex=\"-1\" >\n\t\t\t<div class=\"elementor-post__thumbnail\"><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"169\" src=\"https:\/\/offline-web.com\/wp-content\/uploads\/2026\/08\/icap-crif-ae-banner-300x169.png\" class=\"attachment-medium size-medium wp-image-20639\" alt=\"ICAP CRIF AE case study \u2014 Built the corporate site and kept 200+ service and editorial pages consistent across the group\" srcset=\"https:\/\/offline-web.com\/wp-content\/uploads\/2026\/08\/icap-crif-ae-banner-300x169.png 300w, https:\/\/offline-web.com\/wp-content\/uploads\/2026\/08\/icap-crif-ae-banner-1024x576.png 1024w, https:\/\/offline-web.com\/wp-content\/uploads\/2026\/08\/icap-crif-ae-banner-768x432.png 768w, https:\/\/offline-web.com\/wp-content\/uploads\/2026\/08\/icap-crif-ae-banner-1536x864.png 1536w, https:\/\/offline-web.com\/wp-content\/uploads\/2026\/08\/icap-crif-ae-banner.png 1600w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/div>\n\t\t<\/a>\n\t\t\t\t<div class=\"elementor-post__text\">\n\t\t\t\t<h3 class=\"elementor-post__title\">\n\t\t\t<a href=\"https:\/\/offline-web.com\/en\/project\/icap-crif-ae\/\" >\n\t\t\t\tICAP CRIF AE \u2013 Corporate Website\t\t\t<\/a>\n\t\t<\/h3>\n\t\t\t\t<div class=\"elementor-post__excerpt\">\n\t\t\t<p>The Greek public face of a credit risk group. The hard part was editorial: making complicated financial services readable.<\/p>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/article>\n\t\t\t\t<\/div>\n\t\t\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-b16a854 e-con-full tm-col-stretched-none e-flex tm-bg-color-over-image e-con e-child\" data-id=\"b16a854\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f1d2905 tm-contact-form-7-button-full-width elementor-widget elementor-widget-tm-ele-contact-form-7\" data-id=\"f1d2905\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"tm-ele-contact-form-7.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"tm-contact-form-7-wrapper\">\r\n\t\t\t\t<div class=\"tm-contact-form tm-contact-form-7 tm-contact-form-f1d2905 placeholder-show tm-contact-form-align-default\"><div class=\"tm-contact-form-7-heading\"><h5 class=\"tm-contact-form-subtitle tm-contact-form-7-subtitle\">\r\n\t\t\t\t\t\t\t\tTell me about your project and get a price, timeline and project scope by email \u2014 no call needed.\r\n\t\t\t\t\t\t\t<\/h5><h5 class=\"tm-contact-form-title tm-contact-form-7-title\">\r\n\t\t\t\t\t\t\t\tLike what you see? Let\u2019s work together\r\n\t\t\t\t\t\t\t<\/h5><\/div>\n<div class=\"wpcf7 no-js\" id=\"wpcf7-f6-o1\" lang=\"en-US\" dir=\"ltr\" data-wpcf7-id=\"6\">\n<div class=\"screen-reader-response\"><p role=\"status\" aria-live=\"polite\" aria-atomic=\"true\"><\/p> <ul><\/ul><\/div>\n<form action=\"\/en\/wp-json\/wp\/v2\/project\/19405#wpcf7-f6-o1\" method=\"post\" class=\"wpcf7-form init\" aria-label=\"Contact form\" novalidate=\"novalidate\" data-status=\"init\">\n<fieldset class=\"hidden-fields-container\"><input type=\"hidden\" name=\"_wpcf7\" value=\"6\" \/><input type=\"hidden\" name=\"_wpcf7_version\" value=\"6.1.6\" \/><input type=\"hidden\" name=\"_wpcf7_locale\" value=\"en_US\" \/><input type=\"hidden\" name=\"_wpcf7_unit_tag\" value=\"wpcf7-f6-o1\" \/><input type=\"hidden\" name=\"_wpcf7_container_post\" value=\"0\" \/><input type=\"hidden\" name=\"_wpcf7_posted_data_hash\" value=\"\" \/><input type=\"hidden\" name=\"_wpcf7_recaptcha_response\" value=\"\" \/>\n<\/fieldset>\n<div class=\"contact\">\n  <div class=\"row g-3\">\n    <div class=\"col-sm-12\">\n       <div class=\"ow-howit\" style=\"font-size:13px;line-height:1.55;opacity:.72;margin-bottom:2px;\">\n         <div style=\"text-transform:uppercase;letter-spacing:.06em;font-size:11px;opacity:.85;margin-bottom:6px;\">How it works<\/div>\n         <div style=\"margin-bottom:3px;\"><strong>1.<\/strong> Tell me about your project below.<\/div>\n         <div style=\"margin-bottom:3px;\"><strong>2.<\/strong> I'll email you a few quick questions (about 3 minutes).<\/div>\n         <div><strong>3.<\/strong> You get a price, timeline and project scope by email \u2014 no call.<\/div>\n       <\/div>\n    <\/div>\n    <div class=\"col-sm-6\">\n       <label for=\"fname\">Name *<\/label>\n       <span class=\"wpcf7-form-control-wrap\" data-name=\"your-name\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text wpcf7-validates-as-required form-control\" autocomplete=\"name\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"Jane Doe\" value=\"\" type=\"text\" name=\"your-name\" \/><\/span>\n    <\/div>\n    <div class=\"col-sm-6\">\n       <label for=\"femail\">Email *<\/label>\n       <span class=\"wpcf7-form-control-wrap\" data-name=\"your-email\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-email wpcf7-validates-as-required wpcf7-text wpcf7-validates-as-email form-control\" autocomplete=\"email\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"you@example.com\" value=\"\" type=\"email\" name=\"your-email\" \/><\/span>\n    <\/div>\n    <div class=\"col-sm-12\">\n       <label for=\"fcompany\">Company or website (optional)<\/label>\n       <span class=\"wpcf7-form-control-wrap\" data-name=\"your-company\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text form-control\" aria-invalid=\"false\" placeholder=\"Company name or website, if you have one\" value=\"\" type=\"text\" name=\"your-company\" \/><\/span>\n       <small class=\"form-hint\">A link helps me scope your project faster.<\/small>\n    <\/div>\n    <div class=\"col-sm-12\">\n       <label for=\"fservice\">Which service? *<\/label>\n       <span class=\"wpcf7-form-control-wrap\" data-name=\"your-service\"><select class=\"wpcf7-form-control wpcf7-select wpcf7-validates-as-required form-control\" aria-required=\"true\" aria-invalid=\"false\" name=\"your-service\"><option value=\"\">&#8212;Please choose an option&#8212;<\/option><option value=\"Vue 2 to 3 migration\">Vue 2 to 3 migration<\/option><option value=\"jQuery to Vue migration\">jQuery to Vue migration<\/option><option value=\"Nuxt migration\">Nuxt migration<\/option><option value=\"Vanilla JS to Vue migration\">Vanilla JS to Vue migration<\/option><option value=\"Excel to web app \/ dashboard\">Excel to web app \/ dashboard<\/option><option value=\"Custom web app development\">Custom web app development<\/option><option value=\"AI features \/ LLM integration\">AI features \/ LLM integration<\/option><option value=\"Something else\">Something else<\/option><\/select><\/span>\n    <\/div>\n    <div class=\"col-sm-12\">\n       <label for=\"fmessage\">What do you want to build or fix? *<\/label>\n       <span class=\"wpcf7-form-control-wrap\" data-name=\"your-message\"><textarea cols=\"40\" rows=\"4\" maxlength=\"2000\" class=\"wpcf7-form-control wpcf7-textarea wpcf7-validates-as-required form-control\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"e.g. Migrate a Vue 2 dashboard to Vue 3, or turn an Excel workflow into a web app. A sentence or two is enough.\" name=\"your-message\"><\/textarea><\/span>\n    <\/div>\n    <div class=\"col-sm-12\">\n       <input class=\"wpcf7-form-control wpcf7-submit has-spinner btn btn-theme-colored2\" type=\"submit\" value=\"Get a price &amp; timeline\" \/>\n    <\/div>\n    <div class=\"col-sm-12\">\n       <p class=\"form-sla\">Complete the short questionnaire to receive your indicative price, timeline and scope by email.<\/p>\n       <p class=\"offline-recaptcha-note\">This site is protected by reCAPTCHA and the Google <a href=\"https:\/\/policies.google.com\/privacy\" target=\"_blank\" rel=\"noopener\">Privacy Policy<\/a> and <a href=\"https:\/\/policies.google.com\/terms\" target=\"_blank\" rel=\"noopener\">Terms of Service<\/a> apply.<\/p>\n    <\/div>\n  <\/div>\n<\/div><div class=\"wpcf7-response-output\" aria-hidden=\"true\"><\/div>\n<\/form>\n<\/div>\n<\/div>\r\n\t\t\t<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\n","protected":false},"excerpt":{"rendered":"<p>A crypto P2P marketplace frontend with dense offer listings and filters that combine without slowing the interface down. I built the frontend only.<\/p>\n","protected":false},"featured_media":20594,"template":"","meta":{"_acf_changed":false},"categories":[136,108,74],"tags":[137,139,138,140,126,123,141,65],"class_list":["post-19405","project","type-project","status-publish","has-post-thumbnail","hentry","category-fintech","category-marketplaces","category-web-applications","tag-crypto-platforms","tag-fintech-interfaces","tag-frontend-development","tag-p2p-marketplaces","tag-primevue","tag-tailwind-css","tag-ui-architecture","tag-vue-js"],"acf":{"project_img_1":20632,"project_img_2":20571,"project_img_3":null,"main_text":"This was the frontend layer of a crypto P2P marketplace built along the lines of BitValve: browsing offers, filtering by payment method, currency, country and amount, and moving through the trading screens.\n\nThe interesting problem is density. A single offer row carries price, limits, accepted payment methods, seller reputation and availability, and a user scans dozens of them looking for the one that fits. Get the hierarchy wrong and the whole list becomes unreadable.\n\nFiltering is the other half. Filters have to combine, and results have to update while the user is still thinking, not after. On a list this size that is a frontend architecture question before it is a UI question.\n\nNo backend on this one. The work was UI architecture, component composition and state handling, built so a real API could be dropped in behind it without a rewrite.","client":"BitValve","date":"2021","duration":"4 months","second_paragraph":"Fintech interfaces carry a lot of UI state. Filters, sorting and pagination all interact, and every combination has an empty case, a loading case and a too-many-results case. Missing one of those is how a marketplace ends up looking broken.\n\nThere is also a trust dimension that is easy to underestimate. When someone is about to send money to a stranger, a misaligned column or an ambiguous label costs more than it would anywhere else.","intro_summary":"A crypto P2P marketplace frontend modelled on BitValve, with offer listings, multi-dimensional filtering and the trading flows around them. I built the frontend only.","my_contribution":"I built the entire frontend around a component architecture meant to be reused rather than copied. An established component library covers the tables and filter controls, where writing my own would have been effort spent on a solved problem.\n\nTailwind CSS handles layout and spacing, which is what made it possible to iterate quickly on screens this dense.\n\nI structured the UI so that backend integration would be a matter of swapping the data source, not reworking the components.","tech_stack":"Vue.js, Tailwind CSS, frontend-only architecture, crypto marketplace UI, complex filtering and listing interfaces","about_the_client":"BitValve is a peer-to-peer crypto marketplace where people buy and sell digital assets directly, across a long list of payment methods. Everything on it depends on users trusting a stranger enough to trade."},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.8 (Yoast SEO v28.1) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>BitValve: Crypto Marketplace Frontend | OFFLINE<\/title>\n<meta name=\"description\" content=\"Frontend work on a crypto P2P marketplace inspired by BitValve, with dense offer listings, multi-dimensional filtering and trading flows.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/offline-web.com\/en\/project\/bitvalve\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"BitValve \u2013 Crypto P2P Marketplace Frontend\" \/>\n<meta property=\"og:description\" content=\"Frontend work on a crypto P2P marketplace inspired by BitValve, with dense offer listings, multi-dimensional filtering and trading flows.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/offline-web.com\/en\/project\/bitvalve\/\" \/>\n<meta property=\"og:site_name\" content=\"offline-web.com\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/profile.php?id=61565994551139\" \/>\n<meta property=\"article:modified_time\" content=\"2026-08-14T13:17:58+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/offline-web.com\/wp-content\/uploads\/2026\/08\/bitvalve-banner.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1600\" \/>\n\t<meta property=\"og:image:height\" content=\"900\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@offline_web\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/offline-web.com\\\/en\\\/project\\\/bitvalve\\\/\",\"url\":\"https:\\\/\\\/offline-web.com\\\/en\\\/project\\\/bitvalve\\\/\",\"name\":\"BitValve: Crypto Marketplace Frontend | OFFLINE\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/offline-web.com\\\/en\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/offline-web.com\\\/en\\\/project\\\/bitvalve\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/offline-web.com\\\/en\\\/project\\\/bitvalve\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/offline-web.com\\\/wp-content\\\/uploads\\\/2026\\\/08\\\/bitvalve-banner.png\",\"datePublished\":\"2025-12-20T12:55:17+00:00\",\"dateModified\":\"2026-08-14T13:17:58+00:00\",\"description\":\"Frontend work on a crypto P2P marketplace inspired by BitValve, with dense offer listings, multi-dimensional filtering and trading flows.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/offline-web.com\\\/en\\\/project\\\/bitvalve\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/offline-web.com\\\/en\\\/project\\\/bitvalve\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/offline-web.com\\\/en\\\/project\\\/bitvalve\\\/#primaryimage\",\"url\":\"https:\\\/\\\/offline-web.com\\\/wp-content\\\/uploads\\\/2026\\\/08\\\/bitvalve-banner.png\",\"contentUrl\":\"https:\\\/\\\/offline-web.com\\\/wp-content\\\/uploads\\\/2026\\\/08\\\/bitvalve-banner.png\",\"width\":1600,\"height\":900,\"caption\":\"BitValve \u2014 Crypto P2P. 4 months \u00b7 2021. Built with Vue.js, PrimeVue, Tailwind.\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/offline-web.com\\\/en\\\/project\\\/bitvalve\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/offline-web.com\\\/en\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"BitValve \u2013 Crypto P2P Marketplace Frontend\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/offline-web.com\\\/en\\\/#website\",\"url\":\"https:\\\/\\\/offline-web.com\\\/en\\\/\",\"name\":\"offline-web.com\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/offline-web.com\\\/en\\\/#\\\/schema\\\/person\\\/520626b2a7a5c2d1fbeb91e5bd8b4aa3\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/offline-web.com\\\/en\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/offline-web.com\\\/en\\\/#\\\/schema\\\/person\\\/520626b2a7a5c2d1fbeb91e5bd8b4aa3\",\"name\":\"Stelios Kitziris\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/offline-web.com\\\/wp-content\\\/uploads\\\/2026\\\/06\\\/0404afea-ad5d-45e2-8111-d489cd7935ab.png\",\"url\":\"https:\\\/\\\/offline-web.com\\\/wp-content\\\/uploads\\\/2026\\\/06\\\/0404afea-ad5d-45e2-8111-d489cd7935ab.png\",\"contentUrl\":\"https:\\\/\\\/offline-web.com\\\/wp-content\\\/uploads\\\/2026\\\/06\\\/0404afea-ad5d-45e2-8111-d489cd7935ab.png\",\"width\":1122,\"height\":1402,\"caption\":\"Stelios Kitziris\"},\"logo\":{\"@id\":\"https:\\\/\\\/offline-web.com\\\/wp-content\\\/uploads\\\/2026\\\/06\\\/0404afea-ad5d-45e2-8111-d489cd7935ab.png\"},\"sameAs\":[\"https:\\\/\\\/offline-web.com\",\"https:\\\/\\\/www.facebook.com\\\/profile.php?id=61565994551139\",\"https:\\\/\\\/www.instagram.com\\\/offline_web_\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/offline-web\\\/\",\"https:\\\/\\\/x.com\\\/offline_web\"]}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"BitValve: Crypto Marketplace Frontend | OFFLINE","description":"Frontend work on a crypto P2P marketplace inspired by BitValve, with dense offer listings, multi-dimensional filtering and trading flows.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/offline-web.com\/en\/project\/bitvalve\/","og_locale":"en_US","og_type":"article","og_title":"BitValve \u2013 Crypto P2P Marketplace Frontend","og_description":"Frontend work on a crypto P2P marketplace inspired by BitValve, with dense offer listings, multi-dimensional filtering and trading flows.","og_url":"https:\/\/offline-web.com\/en\/project\/bitvalve\/","og_site_name":"offline-web.com","article_publisher":"https:\/\/www.facebook.com\/profile.php?id=61565994551139","article_modified_time":"2026-08-14T13:17:58+00:00","og_image":[{"width":1600,"height":900,"url":"https:\/\/offline-web.com\/wp-content\/uploads\/2026\/08\/bitvalve-banner.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_site":"@offline_web","twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/offline-web.com\/en\/project\/bitvalve\/","url":"https:\/\/offline-web.com\/en\/project\/bitvalve\/","name":"BitValve: Crypto Marketplace Frontend | OFFLINE","isPartOf":{"@id":"https:\/\/offline-web.com\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/offline-web.com\/en\/project\/bitvalve\/#primaryimage"},"image":{"@id":"https:\/\/offline-web.com\/en\/project\/bitvalve\/#primaryimage"},"thumbnailUrl":"https:\/\/offline-web.com\/wp-content\/uploads\/2026\/08\/bitvalve-banner.png","datePublished":"2025-12-20T12:55:17+00:00","dateModified":"2026-08-14T13:17:58+00:00","description":"Frontend work on a crypto P2P marketplace inspired by BitValve, with dense offer listings, multi-dimensional filtering and trading flows.","breadcrumb":{"@id":"https:\/\/offline-web.com\/en\/project\/bitvalve\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/offline-web.com\/en\/project\/bitvalve\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/offline-web.com\/en\/project\/bitvalve\/#primaryimage","url":"https:\/\/offline-web.com\/wp-content\/uploads\/2026\/08\/bitvalve-banner.png","contentUrl":"https:\/\/offline-web.com\/wp-content\/uploads\/2026\/08\/bitvalve-banner.png","width":1600,"height":900,"caption":"BitValve \u2014 Crypto P2P. 4 months \u00b7 2021. Built with Vue.js, PrimeVue, Tailwind."},{"@type":"BreadcrumbList","@id":"https:\/\/offline-web.com\/en\/project\/bitvalve\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/offline-web.com\/en\/"},{"@type":"ListItem","position":2,"name":"BitValve \u2013 Crypto P2P Marketplace Frontend"}]},{"@type":"WebSite","@id":"https:\/\/offline-web.com\/en\/#website","url":"https:\/\/offline-web.com\/en\/","name":"offline-web.com","description":"","publisher":{"@id":"https:\/\/offline-web.com\/en\/#\/schema\/person\/520626b2a7a5c2d1fbeb91e5bd8b4aa3"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/offline-web.com\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/offline-web.com\/en\/#\/schema\/person\/520626b2a7a5c2d1fbeb91e5bd8b4aa3","name":"Stelios Kitziris","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/offline-web.com\/wp-content\/uploads\/2026\/06\/0404afea-ad5d-45e2-8111-d489cd7935ab.png","url":"https:\/\/offline-web.com\/wp-content\/uploads\/2026\/06\/0404afea-ad5d-45e2-8111-d489cd7935ab.png","contentUrl":"https:\/\/offline-web.com\/wp-content\/uploads\/2026\/06\/0404afea-ad5d-45e2-8111-d489cd7935ab.png","width":1122,"height":1402,"caption":"Stelios Kitziris"},"logo":{"@id":"https:\/\/offline-web.com\/wp-content\/uploads\/2026\/06\/0404afea-ad5d-45e2-8111-d489cd7935ab.png"},"sameAs":["https:\/\/offline-web.com","https:\/\/www.facebook.com\/profile.php?id=61565994551139","https:\/\/www.instagram.com\/offline_web_\/","https:\/\/www.linkedin.com\/company\/offline-web\/","https:\/\/x.com\/offline_web"]}]}},"yoast_title":"BitValve: Crypto Marketplace Frontend | OFFLINE","yoast_metadesc":"Frontend work on a crypto P2P marketplace inspired by BitValve, with dense offer listings, multi-dimensional filtering and trading flows.","yoast_focuskw":"BitValve crypto marketplace frontend","_links":{"self":[{"href":"https:\/\/offline-web.com\/en\/wp-json\/wp\/v2\/project\/19405","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/offline-web.com\/en\/wp-json\/wp\/v2\/project"}],"about":[{"href":"https:\/\/offline-web.com\/en\/wp-json\/wp\/v2\/types\/project"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/offline-web.com\/en\/wp-json\/wp\/v2\/media\/20594"}],"wp:attachment":[{"href":"https:\/\/offline-web.com\/en\/wp-json\/wp\/v2\/media?parent=19405"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/offline-web.com\/en\/wp-json\/wp\/v2\/categories?post=19405"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/offline-web.com\/en\/wp-json\/wp\/v2\/tags?post=19405"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}