App Entwicklung mit Replit, Openrouter & Firebase
Zielstellung und Umsetzung
Entwicklung einer mehrsprachigen Progressive Web App (PWA) / E-Commerce Shopping App mit Replit, Openrouter (für Chatbot), WordPress & WooCommerce Rest API sowie Google Firebase für Push Notifications. Via Chatbot, welcher direkt in die App integriert wurde, hat der User (potentieller Käufer) die Möglichkeit, Fragen zu stellen wie zum Beispiel „Ich suche nach Produkt xy in Größe S, der Preisspanne zwischen 50 und 100 Euro“ oder „Wie hoch sind die Versandkosten?“ oder „Wie lang sind die Lieferzeiten?“ etc. Zudem werden Push Notifications automatisch gesendet sobald ein Produkt im Webshop einen Rabatt/ Sonderpreis erhält als auch sobald sich der Bestellstatus einer aus der App getätigten Bestellung ändert. Die Datenbasis für Produkte, Kategorien, Zahlungsarten, den Blog etc. der App bildet der WooCommerce Shop unter https://store.reneki.de. Alle in der App vorhandenen Produkte, Kategorien sowie Blog-Post werden über die REST API’s (WordPress als auch WooCommerce) synchronisiert. Die Mehrsprachigkeit wurde sowohl via Replit direkt (i18n) als auch via KI (Openrouter/ Deep Seek LMM) realisiert. Die App lässt sich sowohl auf iOS als auch Android Geräten installieren und fungiert dabei als PWA, was die Push Notifications ermöglicht.
Reneki Store – PWA E-Commerce Application
A modern, performant Progressive Web App (PWA) built with React, TypeScript, and Tailwind CSS. Features WooCommerce integration with native payment gateways, and full offline support.
Overview
Reneki Store is a Progressive Web App (PWA) e-commerce application integrating with WooCommerce for product management and payment processing. It offers fuzzy search, advanced filtering, cart management, and multilingual support (German/English). The project aims to deliver a robust, mobile-first e-commerce platform focused on user experience and efficient product presentation, with a business vision to provide a modern and accessible e-commerce solution.
Deployment: Comprehensive installation guide for deploying to external Linux servers with Nginx or Apache reverse proxy, SSL/TLS, systemd service, and production configuration.
User Preferences
- Language: User can toggle between German (DE) and English (EN)
- Theme: User can toggle between light/dark mode or use automatic time-based switching (Light: 7:00-19:00 MEZ, Dark: 19:00-7:00 MEZ)
- Recently Viewed: Last 20 products viewed are tracked
- Cart: Persists across sessions via localStorage
System Architecture
UI/UX Decisions
- Mobile-first design: Optimized for mobile devices.
- PWA-ready: Manifest and service worker infrastructure for installability and offline access.
- DSGVO Compliance: Self-hosted fonts (Inter & Outfit) instead of Google Fonts CDN to avoid external tracking.
- Theme: Dark/light theme support.
- User Interface: Uses Tailwind CSS with shadcn/ui for a modern and responsive design.
Technical Implementations
- Frontend: React 18 with Vite, TypeScript, Zustand for client-side state, React Query for server state and caching, i18next for internationalization, Fuse.js for fuzzy search, and Wouter for routing.
- Backend: Express.js (Node.js 20), PostgreSQL (Neon-backed) for specific data persistence, Drizzle ORM for type-safe database operations, and Zod for runtime schema validation.
- Minimal database usage: PostgreSQL is primarily used for FCM token persistence; cart and user preferences are managed client-side using localStorage.
- Server-side API proxy: Implemented to secure WooCommerce and WordPress API credentials.
- Type-safe schema: Shared types between frontend and backend via Drizzle ORM.
- Flexible schema handling: Supports custom WooCommerce product types and varied price formats.
- Category Filtering: Specific Products and categories are excluded from all endpoints.
- Firebase Push Notifications: PostgreSQL-backed token storage with atomic upserts for reliable push notification delivery.
- Dynamic Tax and Shipping Calculation: Real-time calculation based on the customer’s shipping address using WooCommerce API, including automatic order confirmation email delivery.
- WooCommerce Webhook Integration: Processes product updates from WooCommerce, triggering push notifications for price changes (sales, price drops).
- Country Selection Filtering: Restricts country selection in checkout to 30 specific EU/EEA/EFTA countries, matching WooCommerce store configurations.
- WordPress Blog Integration: Server-side WordPress REST API proxy for posts and categories with URL-based state management for filters, sorting, and pagination.
- AI Chatbot Integration: OpenRouter-powered customer support chatbot using DeepSeek V3 model with comprehensive shop knowledge (furniture categories, shipping, payment, returns, interior design advice) in DE/EN.
- Live Product Search: Chatbot automatically detects product queries (e.g., „show me vases under €50“) and performs real-time WooCommerce searches with category, price, and sale filters.
- Interactive Product Cards: Search results display as clickable cards inline with chat responses, showing product images, prices, sale badges, stock status, and deep-links to product detail pages.
- Multi-language Support: Product search works seamlessly in both German and English with automatic keyword detection for categories (Möbel/Furniture, Vasen/Vases, Beleuchtung/Lighting, etc.).
Feature Specifications
- Product listing with categories, filters, and fuzzy search.
- Product detail pages with variant selection.
- Shopping cart with persistence.
- WooCommerce native checkout with payment gateways.
- German/English language support.
- Recently viewed products.
- Wishlist/favorites with persistence.
- Product reviews display with WooCommerce integration.
- Related/Similar products recommendations.
- Pagination system and tags filtering.
- Comprehensive footer with dynamic content.
- Firebase Cloud Messaging (FCM) for push notifications.
- Blog page displaying WordPress posts with category filtering, sorting (newest/oldest/title), and pagination (12 posts/page).
- AI-powered customer support chatbot with floating bubble UI, accessible on all pages, providing instant answers to product inquiries, shipping costs, payment methods, and general shop assistance.
External Dependencies
- WooCommerce REST API: Used for product management, categories, reviews, payment gateways, order creation, and dynamic tax/shipping calculations.
- WordPress REST API: Used for blog posts and categories via /wp-json/wp/v2 endpoints.
- Firebase: Utilized for push notifications through Firebase Cloud Messaging (FCM).
- PostgreSQL (Neon-backed): Cloud-hosted database for persistent storage of FCM tokens.
- OpenRouter AI: Powers the customer support chatbot using DeepSeek V3 model for cost-effective, intelligent responses with comprehensive shop context.
WordPress / WooCommerce Shop
Die Datenbasis der App
Diese PWA / Shopping App wurde von mir im Rahmen meiner Weiterbildung zum KI Consultant konzipiert / entwickelt und wird demnächst hier zum Download verfügbar sein.
Meine Erfahrungen mit Replit
Replit ist ein sehr leistungsstarkes KI-Tool für Entwickler und „No Coder“ und hat in diesem Projekt hervorragende Arbeit geleistet. Das Tool versteht die Aufgabenstellungen extrem schnell, trifft gute Entscheidungen, „denkt“ mit, stellt intelligente Fragen, überprüft stets die eigenen Logiken und Codes und auch der generierte Quellcode ist sauber und wird gut dokumentiert. Die Rollback Funktion ermöglicht es stets, zurück zu gehen und an einer vorangegangenen Aufgabenstellung erneut anzusetzen. Die integrierte Github Anbindung ermöglicht es zudem die Projektstände stets mit dem eigenen Repo aktuell zu halten. Für mich als Software-Entwickler ein absoluter Mehrwert wenn es darum geht, KI- oder Software Projekte effizient zu entwickeln.Eine derartige App auf „herkömmlichen“ Wege zu entwickeln hätte weitaus mehr Zeit in Anspruch genommen – schätzungsweise das 10 fache.
Beeindruckt hat mich die Intelligenz von Replit, vor allem bei der Erkennung und Implementierung von externen APIs wie z.B. die WooCommerce Rest API oder auch Firebase und Openrouter. Die Rest Endpunkte waren allen korrekt, die JSON Calls exakt – ein manuelles Eingreifen oder Korrekturen waren nicht notwendig. Die permantente „Selbstkontrolle“ der von Replit erzeugten Codes sorgte zudem für ein automatisiertes „Debugging“ und wurde sehr gut umgesetzt.
Die einzige „Schwäche“, die ich in diesem Projekt erfahren habe war ein mehrstündiger Ausfall der kompletten Replit Plattform. Dennoch gingen keine Daten verloren, nach dem Ausfall war alles wieder hergestellt. An manchen Stellen bzw. bei manchen Aufgabenstellungen benötigt Replit mehr Zeit zur „Lösungsfindung“ als wenn man diese manuell eingebaut hätte (man muss also hier und da ein wenig Geduld aufbringen) – aber unter dem Strich ist das mehr als verkraftbar wenn bedenkt in welcher Zeit die gesamte App entstanden ist. Auch für „No Coder“ – also Anwender, die keinerlei Programmierkenntnisse haben – ist Replit eine sehr gute Wahl denn die Plattform hilft bei kniffligen Sachen und gibt Step-By-Step Anleitungen.
Fazit: empfehlenswert!
Ein herzliches Dankeschön an A-Leecon und allen Dozenten
… vor allem Karima Charles – die ihr mir im Laufe der Weiterbildung so viel Neues und Spannendes mit auf den Weg gegeben habt!
A-Leecon als Bildungsträger kann ich nur jedem empfehlen, der ernsthaft sein Wissen erweitern möchte. Die Lernplattform ist sehr intelligent und auf jeden Teilnehmer abgestimmt. Die Dozenten waren immer „Up to date“, erreichbar wenn es Fragen gab, sehr angenehm, herzlich und immer offen für Problemlösungen, Vorschläge oder auch eigene Lernthemen. Auch der Austausch mit anderen Kursteilnehmern war dauerhaft gewährleistet wobei hierdurch noch zusätzliche Lerneffekte erzielt werden konnten.
Als Kursteilnehmer bekommt man genügend Zeit eingeräumt, um das Erlernte umzusetzen, Tools und Werkzeuge zu testen, eigene Erfahrungen zu sammeln und diese wiederum mit den Dozenten und Kursteilnehmern auszutauschen. Unter dem Strich ein sehr gelungenes Konzept – vor allem für Autodidakten wie mich 🙂
Vielen Dank für die schöne Zeit – jederzeit wieder mit Euch!
n8n Workflow – ChatBot WordPress
Zielstellung
Ein n8n Workflow, der einen ChatBot auf einer WordPress Seite mit WooCommerce Plugin (Webshop) ermöglicht. Hierbei soll der User (potentieller Käufer) die Möglichkeit haben, den Kunden ChatBot Fragen zu stellen wie zum Beispiel „Ich suche nach Produkt xy in Größe S in der Preisspanne zwischen 50 und 100 Euro“ oder „Wie hoch sind die Versandkosten?“ oder „Wie lang sind die Lieferzeiten?“ etc.
Dieses Pilotprojekt wurde von mir im Rahmen meiner Weiterbildung zum KI Consultant realisiert.