E-Commerce — Naturpräparate

NATSUP

Umfassender Leitfaden und Shop für Naturpräparate mit Produktinformationen, Preisen und offiziellen Kauflinks in mehreren Sprachen.

Live-Website besuchen

Über das Projekt

NATSUP ist ein digitaler Ratgeber und Shop für natürliche Nahrungsergänzung, gebaut für Gesundheits- und Fitnessinteressierte: klare, vereinfachte Supplement-Bewertungen — Inhaltsstoffe, Vorteile und Preise — mit vertrauenswürdigen offiziellen Kauflinks für jedes Produkt. Die Oberfläche ist mehrsprachig und deckt weltweit bekannte Produkte ab; Ziel ist es, die Kaufentscheidung informiert, sicher und durchdacht zu machen.

Mehrwert

NATSUP ist nicht nur eine Produktseite, sondern ein Entscheidungswerkzeug vor dem Kauf:

Klare Infos vor dem Kauf

Vereinfachte Supplement-Bewertungen: Inhaltsstoffe, Vorteile und Preise an einem Ort, ohne Verwirrung.

Sechs Sprachen, eine Oberfläche

Inhalte auf Englisch, Arabisch, Französisch, Spanisch, Italienisch und Deutsch — echte globale Reichweite.

Offizielle Kauf-Links

Jedes Produkt verweist auf eine vertrauenswürdige offizielle Quelle und schützt Besucher vor dubiosen Links.

Eine Struktur, die wachsen kann

Ein Katalog auf Basis strukturierter JSON-Daten, erweiterbar auf Hunderte Produkte ohne Neubau.

Der Aufwand beim Aufbau

Das Projekt entstand in Etappen: Produktdaten organisieren und in sechs Sprachen übersetzen, die Übersetzungs-Engine bauen, eine mobilfreundliche Oberfläche gestalten, dann Suchmaschinenoptimierung. Jede Seite wurde vor der Veröffentlichung inhaltlich und sprachlich geprüft; die Arbeit zog sich über Wochen, parallel zu meinem täglichen Lernen.

Oberflächensprachen: 6
Baubasis: Strukturierte JSON-Daten
Optimierung: Vollständiges SEO

Verwendete Technologien

Zum Aufbau

HTML5
CSS3
JavaScript
Mehrsprachiges Übersetzungsmodul
Strukturierte JSON-Datenschicht
SEO-Optimierung
Cloudflare Pages

Für den Betrieb

Cloudflare Pages (kostenloses Hosting)
Globales CDN
Automatisches SSL
Deployment über Wrangler
Kostenlose pages.dev-Domain

Werkzeuge und Fähigkeiten — einfach erklärt

Jedes Werkzeug, jede Bibliothek und jede Fähigkeit, die ich in diesem Projekt eingesetzt habe, in einfacher Sprache erklärt: was es ist und was es hier konkret beigetragen hat — ohne kryptische Symbole.

HTML5

Die Grundsprache der Webseiten: Sie definiert die Struktur jeder Seite — Überschriften, Bilder, Links und Schaltflächen. Sie ist das Gerüst, auf dem alles andere steht, wie das Fachwerk eines Gebäudes vor dem Anstrich.

CSS3

Die Gestaltungssprache, die den Seiten ihr endgültiges Aussehen gibt: Farben, Schriften, Abstände und Handy-Anpassung. Sie ist der Unterschied zwischen einer grauen, seelenlosen Seite und einer Oberfläche, die das Auge entlastet.

JavaScript

Die Sprache der Interaktion im Browser: Sie verwandelt die Seite von einer statischen Anzeige in ein lebendiges Erlebnis — Sofortsuche, Produktsortierung und Sprachwechsel ohne Neuladen.

Mehrsprachige Übersetzungsengine

Ein selbst geschriebener Code, der die Texte der Seite in sechs Sprachen speichert und sie sofort nach der Wahl des Besuchers wechselt — statt sechs getrennte Websites baut eine einzige Seite für alle.

JSON-Datenschicht

Übersichtlich strukturierte Dateien, die Produkte, Preise und Inhaltsstoffe sauber und lesbar halten; ein neues Produkt hinzuzufügen bedeutet nur, die Datei zu bearbeiten — ohne das Seitendesign anzufassen.

Suchmaschinenoptimierung (SEO)

Präzise Titel und Beschreibungen für jede Seite, damit eine Google-Suche sie beim ersten Versuch findet — ein Gratis-Besucher, den Werbung nicht kaufen kann.

Verwaltung der Partner-Links

Eine einzige Datei, die die offiziellen Kauf-Links bündelt: vertrauenswürdig, aktuell und vom Inhalt getrennt — sie schützt den Besucher vor verdächtigen Links und erleichtert Aktualisierungen.

Cloudflare Pages

Das Hosting: ein globales Netz, das die Seite gratis über hunderte Server weltweit verteilt — sie öffnet sich aus jedem Land schnell und mit automatischem SSL-Sicherheitszertifikat.

Wichtigste Funktionen

Produktkatalog mit Bildern, Zutaten und Preisen
Vertrauenswürdige offizielle Kauflinks
Mehrsprachige Oberfläche
Organisierte Bildungsinhalte
Mobilfreundliches Design

Geschätzte Kosten

Ein ähnliches Projekt erstellen

Eigenbau-Weg (was ich tatsächlich getan habe)0 MAD — kostenloses Hosting und Subdomain; die eigentliche Investition waren meine Zeit und mein Lernen.

Über Freelancer/Agentur in Marokko (Schätzung)Ca. 4.000 – 12.000 MAD für eine mehrsprachige Katalogseite dieser Größe.

Betrieb & Wartung

Aktueller Stand0 MAD pro Monat — läuft auf dem kostenlosen Cloudflare-Pages-Tarif.

Beim Ausbau (Schätzung)Eigene Domain: ca. 100 – 150 MAD/Jahr, dazu optionale kostenpflichtige Dienste (ca. 50 MAD/Monat).

Richtwerte in Marokkanischem Dirham (MAD); die tatsächlichen Kosten variieren je nach Umfang, genauen Anforderungen und Dienstleistungsmarkt. Meine aktuellen Projekte laufen komplett auf kostenlosen Tarifen.

Was ich daraus gelernt habe

Dieses Projekt hat mir gezeigt, wie ein großes, organisiertes Content-System entsteht — Daten, Übersetzung und Darstellung —, wie Kauf- und Tracking-Links sauber verwaltet werden und wie Klarheit und Ehrlichkeit das Vertrauen der Besucher aufbauen.