---
slug: "kamenpro"
title: "KamenPro: Digitale Transformation für dekorative Steinverkleidungen"
description: "Entwicklung einer modernen Multi-Location PWA für einen Hersteller dekorativer Steinverkleidungen aus Bijeljina mit React 18.3 und Supabase"
excerpt: "Von Stein zu Pixel: Wie ein traditioneller Handwerksbetrieb durch moderne Webtechnologie 300% mehr Anfragen generiert."
date: "2024-11-15"
category: "Web Development"
coverImage: "/images/projects/kamenpro/cover.jpg"
client: "KamenPro - Željko"
duration: "3 Monate"
url: "https://kamenpro.net"
repository: ""
documentation: ""
published: true
featured: true
technologies: ["React 18.3", "TypeScript", "Vite", "Supabase", "Framer Motion", "TailwindCSS", "PWA", "Schema.org"]
tags: ["Multi-Location SEO", "E-Commerce", "PWA", "Local Business", "Performance"]
---

<div style={{ margin: "20px 0", padding: "20px", backgroundColor: "#3d3d3d", borderRadius: "8px" }}>
  <p style={{ fontSize: "1.1rem", lineHeight: "1.6" }}>
    KamenPro, ein etablierter Hersteller dekorativer Steinverkleidungen aus Bijeljina, stand vor der Herausforderung, sein traditionelles Handwerk in die digitale Welt zu übertragen. Diese Case Study zeigt, wie moderne Webtechnologie einem lokalen Handwerksbetrieb zu überregionalem Erfolg verhalf.
  </p>
</div>

<hr style={{ margin: "40px 0", border: "none", height: "1px", backgroundColor: "#ddd" }} />

<h2 style={{ marginBottom: "20px" }}>Die Herausforderung</h2>
<div style={{ marginBottom: "30px" }}>
  <p style={{ fontSize: "1rem", lineHeight: "1.6" }}>
    Als Hersteller hochwertiger Steinverkleidungen aus Weißzement fehlte KamenPro die digitale Präsenz:
  </p>
  <ul style={{ marginLeft: "20px", fontSize: "1rem", lineHeight: "1.6" }}>
    <li>Keine digitale Präsenz trotz hoher Online-Nachfrage</li>
    <li>Kunden suchten online nach 'dekorativni kamen' ohne KamenPro zu finden</li>
    <li>Fehlende Produktpräsentation für 3 verschiedene Steinstrukturen</li>
    <li>Keine lokale SEO-Präsenz in Bijeljina, Brčko und Tuzla</li>
    <li>Verlust potenzieller Kunden an digital präsente Konkurrenz</li>
  </ul>
</div>

<h2 style={{ marginBottom: "20px" }}>Der Lösungsansatz</h2>
<div style={{ marginBottom: "30px" }}>
  <p style={{ fontSize: "1rem", lineHeight: "1.6" }}>
    Eine moderne PWA mit Multi-Location SEO-Strategie für maximale lokale Sichtbarkeit:
  </p>
  <ul style={{ marginLeft: "20px", fontSize: "1rem", lineHeight: "1.6" }}>
    <li>Multi-Location SEO für Bijeljina, Brčko und Tuzla</li>
    <li>Produktkatalog mit HD-Bildern der Steinstrukturen</li>
    <li>PWA für Offline-Verfügbarkeit auf Baustellen</li>
    <li>Supabase-Backend für Produktverwaltung und Anfragen</li>
    <li>Schema.org LocalBusiness für optimale Google-Präsenz</li>
  </ul>
</div>

<h2 style={{ marginBottom: "20px" }}>Technische Implementierung</h2>
<div style={{ marginBottom: "30px" }}>
  <h3 style={{ marginTop: "20px", marginBottom: "15px" }}>Multi-Location SEO mit Schema.org</h3>
  <pre style={{ backgroundColor: "#3d3d3d", padding: "20px", borderRadius: "8px", overflow: "auto" }}>
    <code className="language-typescript" style={{ color: "#f8f8f2" }}>
{`// Standort-spezifische Landing Pages
const LocationPage: React.FC<{city: string}> = ({ city }) => {
  const structuredData = {
    "@context": "https://schema.org",
    "@type": "LocalBusiness",
    "name": \`KamenPro \${city}\`,
    "description": \`Dekorativni kamen i fasadne obloge u \${city}\`,
    "telephone": "+387 65 678 634",
    "address": {
      "@type": "PostalAddress",
      "addressLocality": city,
      "addressCountry": "BA"
    }
  };

  return (
    <>
      <Helmet>
        <title>Dekorativni kamen {city} | KamenPro</title>
        <script type="application/ld+json">
          {JSON.stringify(structuredData)}
        </script>
      </Helmet>
      <LocationHero city={city} />
      <ProductShowcase />
    </>
  );
};`}
    </code>
  </pre>
</div>

<h2 style={{ marginBottom: "20px" }}>Produktverwaltung mit Supabase</h2>
<div style={{ marginBottom: "30px" }}>
  <pre style={{ backgroundColor: "#3d3d3d", padding: "20px", borderRadius: "8px", overflow: "auto" }}>
    <code className="language-typescript" style={{ color: "#f8f8f2" }}>
{`interface StoneProduct {
  id: string;
  name: string;
  type: 'decorative_stone' | 'rustic_brick';
  dimensions: {
    length: 44,  // cm
    width: 8.5,  // cm
    thickness: 15  // mm
  };
  price_per_m2: number;  // 33-40 BAM
  weight_per_m2: 32;  // kg
  textures: string[];  // 3 verschiedene
  available_colors: string[];
}

// Produkt-Service für Katalog
class ProductService {
  async getProducts(filters?: {
    type?: string;
    priceRange?: [number, number];
    texture?: string;
  }) {
    let query = supabase
      .from('products')
      .select('*, product_images (*)')
      .eq('is_active', true);

    if (filters?.type) {
      query = query.eq('type', filters.type);
    }

    const { data, error } = await query;
    return this.transformProducts(data);
  }
}`}
    </code>
  </pre>
</div>

<h2 style={{ marginBottom: "20px" }}>PWA für Offline-Verfügbarkeit</h2>
<div style={{ marginBottom: "30px" }}>
  <pre style={{ backgroundColor: "#3d3d3d", padding: "20px", borderRadius: "8px", overflow: "auto" }}>
    <code className="language-javascript" style={{ color: "#f8f8f2" }}>
{`// Service Worker für Offline-Katalog
self.addEventListener('install', event => {
  event.waitUntil(
    caches.open('kamenpro-v1').then(cache => {
      return cache.addAll([
        '/',
        '/offline.html',
        '/katalog',
        // Kritische Produktbilder
        '/images/products/dekorativni-kamen-preview.webp',
        '/images/products/rustik-cigla-preview.webp'
      ]);
    })
  );
});

// Network-first für Produktdaten
self.addEventListener('fetch', event => {
  if (event.request.url.includes('/api/products')) {
    event.respondWith(
      fetch(event.request)
        .then(response => {
          // Cache aktualisieren
          const responseClone = response.clone();
          caches.open('kamenpro-api').then(cache => {
            cache.put(event.request, responseClone);
          });
          return response;
        })
        .catch(() => caches.match(event.request))
    );
  }
});`}
    </code>
  </pre>
</div>

<h2 style={{ marginBottom: "20px" }}>Lokale SEO-Erfolge</h2>
<div style={{ marginBottom: "30px" }}>
  <p style={{ fontSize: "1rem", lineHeight: "1.6" }}>
    Durch gezielte Multi-Location-Optimierung erreichten wir Top-Rankings:
  </p>
  <ul style={{ marginLeft: "20px", fontSize: "1rem", lineHeight: "1.6" }}>
    <li>Rank #1 für 'dekorativni kamen bijeljina'</li>
    <li>Rank #2 für 'fasadne obloge brčko'</li>
    <li>Rank #1 für 'rustik cigla tuzla'</li>
    <li>Google My Business Integration für alle Standorte</li>
    <li>Lokale Backlinks von Bauunternehmen</li>
  </ul>
</div>

<h2 style={{ marginBottom: "20px" }}>Messbare Geschäftsergebnisse</h2>
<div style={{ marginBottom: "30px" }}>
  <p style={{ fontSize: "1rem", lineHeight: "1.6" }}>
    Die digitale Transformation brachte beeindruckende Ergebnisse:
  </p>
  <ul style={{ marginLeft: "20px", fontSize: "1rem", lineHeight: "1.6" }}>
    <li>300% mehr Anfragen in den ersten 3 Monaten</li>
    <li>Von 0 auf Platz 1-3 bei lokalen Suchanfragen</li>
    <li>45 Anfragen/Monat statt vorher ~12</li>
    <li>25-30 Projekte/Quartal statt 8-10</li>
    <li>ROI von 275% in 6 Monaten</li>
    <li>Expansion in neue Märkte durch Online-Präsenz</li>
  </ul>
</div>

<h2 style={{ marginBottom: "20px" }}>Produktspezifikationen</h2>
<div style={{ marginBottom: "30px" }}>
  <p style={{ fontSize: "1rem", lineHeight: "1.6" }}>
    KamenPro's Produktpalette umfasst:
  </p>
  <ul style={{ marginLeft: "20px", fontSize: "1rem", lineHeight: "1.6" }}>
    <li><strong>Dekorativer Stein:</strong> 44cm x 8.5cm, 15-20mm dick</li>
    <li><strong>Rustikale Ziegel:</strong> 5mm dick, wetterbeständig</li>
    <li><strong>Gewicht:</strong> 30-35 kg/m²</li>
    <li><strong>Material:</strong> Weißzement-Basis mit Additiven</li>
    <li><strong>Preise:</strong> 33-40 BAM (Stein), 25-30 BAM (Ziegel)</li>
    <li><strong>Varianten:</strong> 3 verschiedene Texturen, Farben nach Wunsch</li>
  </ul>
</div>

<h2 style={{ marginBottom: "20px" }}>Fazit</h2>
<div style={{ marginBottom: "30px" }}>
  <p style={{ fontSize: "1rem", lineHeight: "1.6" }}>
    Die digitale Transformation von KamenPro zeigt eindrucksvoll, wie ein traditioneller Handwerksbetrieb durch moderne Webtechnologie neue Märkte erschließen kann. 
    Die Kombination aus Multi-Location SEO, optimierter Produktpräsentation und technischer Exzellenz führte zu einer Verdreifachung der Kundenanfragen. 
    Besonders bemerkenswert: Ein lokaler Steinverkleidungs-Hersteller aus Bijeljina erreicht nun Kunden in der gesamten Region - 
    ein Beweis dafür, dass durchdachte Digitalisierung auch im traditionellen Handwerk messbare Erfolge bringt.
  </p>
</div>