How Was letelem.hu Built? – Organic E-Commerce and Intelligent Crawler Architecture

Where We Started – The Challenges of Wellness E-Commerce

The market for health and wellness products — including vitamins, organic cleaners, supplements, and pet foods — is growing rapidly. Consumers are increasingly conscious, seeking clean, trusted origins for their purchases. When building the LétElem Webshop (letelem.eu), the primary business and technical bottleneck was managing diverse product catalogs from multiple vendors. Manual entry, stock adjustments, and copying descriptions represented a non-scalable approach for a catalog comprising thousands of unique items.

Traditional e-commerce frameworks like WordPress combined with WooCommerce often struggle when tasked with importing and updating products from external APIs or unstructured partner web interfaces in real time. Handling large amounts of dynamic, nested data slows down the page load speed, directly leading to lower conversion rates and higher bounce rates. Because of these critical limitations, the founders of LétElem decided to bypass templates and build a robust, custom-tailored e-commerce platform that fully automates the product lifecycle while delivering a premium user experience.

Our goals were highly focused: eliminate manual catalog administration with an intelligent automated crawler, secure lightning-fast rendering speeds to keep Core Web Vitals in the green zone, implement a secure Barion checkout system, and design a premium, clean visual environment that reflects the brand\'s health-oriented and organic identity.

Visual Design and Accessibility – „LétElem Life Gallery”

To align with the brand\'s natural and premium philosophy, we established a clean, high-contrast visual system. The design relies on pristine white backgrounds, deep carbon black typography, and organic green (#22C55E) accents. This elegant aesthetic emphasizes product quality, establishing immediate trust with visitors looking for certified health products.

In typography, we merged classic elegance with modern readability. Headlines utilize the elegant Noto Serif typeface to convey authority and trust, while body text and interface controls rely on the clean, highly readable Manrope font family. This balanced pairing ensures comfortable reading and effortless navigation across desktop and mobile screens alike.

Accessibility (a11y) was a primary layout concern, not an afterthought. We strictly followed WCAG 2.1 AA standards by utilizing **Radix UI** headless primitives. Custom dropdowns, slide-over shopping carts, modal dialogs, and product filters are fully keyboard-navigable, feature semantic HTML tags, and supply rich ARIA attributes for screen readers. This commitment delivers a seamless shopping experience for all users while providing substantial SEO benefits, as modern search engines prioritize fully accessible structures.

Performance Foundation – Neon Serverless PostgreSQL and Prisma v6 ORM

Powering a platform with thousands of dynamic products and continuous vendor syncs demands an exceptionally stable database layer. We selected **Neon Serverless PostgreSQL** paired with **Prisma v6 ORM**. Neon\'s serverless architecture automatically scales compute resources based on incoming traffic spikes and enters a cost-saving sleep state during idle periods.

A standout feature of Neon is **database branching**, which allowed our development team to create isolated, instant copies of the production database schema and catalog in seconds. This enabled us to safely test Playwright crawler iterations and complex Prisma migrations on real data without risking live transactions or production catalog integrity.

By utilizing the Prisma v6 ORM, we achieved absolute type safety throughout our entire Next.js TypeScript application. Database indexing was strategically placed on product categories, SKU codes, and pricing models to optimize lookup times. Furthermore, we encapsulated checkout flows in transactional blocks, guaranteeing absolute data consistency and preventing race conditions during order placement.

Intelligent Playwright Crawler and Synchronization

The core automation engine of LétElem is our custom-built **Playwright-based crawler**, which completely automates product sourcing from diverse vendor portals. Unlike basic CSV or XML feeds, this module logs into partner websites, navigates dynamic frontends, and extracts updated stock levels, product descriptions, ingredient lists, and high-resolution images.

By leveraging Playwright\'s advanced browser automation capabilities, the crawler interacts with vendor portals exactly like a human user, overcoming frontends heavily reliant on dynamic client-side hydration. Extracted unstructured data undergoes a rigorous cleaning pipeline: the system filters duplicate entries, normalizes units of measurement, and compresses images into the efficient WebP format for fast web rendering.

To maintain database integrity, all catalog writes occur within PostgreSQL transaction blocks. The system uses a deterministic keying model to update existing items or insert new products, ensuring no duplicate catalog records are created. Stock levels and pricing are synchronized in real-time, preventing consumers from purchasing out-of-stock items.

Upstash Redis Security and Rate Limiting

Securing client sessions and purchase transactions is a critical concern. Authentication is handled by **Auth.js (NextAuth v5)** with bcryptjs password hashing. We implemented **Role-Based Access Control (RBAC)**, protecting admin interfaces behind strict permissions (CUSTOMER, EDITOR, ADMIN).

To shield authentication routes and critical payment endpoints, we deployed **Upstash Redis** rate limiting. Using a Redis-backed token-bucket algorithm, we throttle API requests by IP address and user ID, successfully defending the application from brute force attacks and crawler spam.

In addition to strict rate limiting, Upstash Redis serves as a high-performance distributed caching layer for structured catalog payloads. The Playwright crawler writes fresh product metadata directly into Neon PostgreSQL, which in turn invalidates corresponding Redis cache tags. This dynamic cache invalidation strategy ensures that subsequent client-side product queries are resolved within a single-digit millisecond response window directly from the in-memory Redis store, bypassing expensive database query roundtrips under high concurrent B2C consumer traffic.

This dual-purpose Redis layer guarantees that the system remains highly responsive even during massive promotional campaigns or sudden traffic spikes, keeping server resource utilization remarkably low while preserving a highly interactive shopping experience.

Custom Next.js E-Commerce vs. WordPress / WooCommerce

While template solutions like WordPress and WooCommerce are popular for simple shops, they quickly hit scalability ceilings when faced with complex external synchronizations. The following table highlights why a custom Next.js architecture was the superior choice for LétElem:

Barion Payment and Transaction-Safe Architecture

In modern retail, checkout friction and security directly dictate survival. LétElem integrates the **Barion** e-payment gateway, managed by a secure server-side state machine. Upon checking out, the platform registers a PENDING order record in PostgreSQL and issues a unique transaction ID before redirecting the customer to the secure Barion portal.

A major highlight of this custom integration is the multi-stage payment confirmation system. When a user completes their checkout, the Barion Gateway triggers a secure background asynchronous Server-to-Server (S2S) notification. The Next.js API route validating this notification decodes the cryptographically signed response body using HMAC-SHA256 tokens, comparing the hash signature against local secrets to guarantee that the callback originated directly from Barion\'s verified network block.

To prevent double-capture or duplicate orders due to network timeouts, the platform utilizes strict PostgreSQL database transaction isolations combined with Redis-based locking mechanisms. The moment a notification is received, a unique lock is established for the specific transaction ID. Any subsequent or duplicate requests from the gateway are gracefully set to wait or ignored, ensuring absolute order consistency and eliminating any chance of duplicate billing under heavy load scenarios.

By utilizing Barion\'s modern payment flows, the shopping experience remains fluid, while our backend architecture completely eliminates the possibility of unpaid checkout states or database desynchronization.

DevOps and Automated Cron Backup Pipeline

For an active online store, data integrity is paramount. LétElem incorporates a **fully automated database backup module** executing cron jobs quietly in the background.

Beyond simple SQL exports, the backup orchestration system performs incremental data validations. It verifies database integrity before initiating any backup execution to ensure corrupt data never overwrites healthy historical dumps. Each backup archive is dynamically encrypted using symmetric AES-256 keys derived from secure environment variables, establishing a defense-in-depth layout where physical storage access alone is insufficient to breach customer database confidentiality.

The system implements a classic FIFO rotation policy. In order to conserve SSD storage space, local backups are preserved for exactly seven days, while long-term monthly archives are securely offloaded to dedicated private object storage buckets. This hybrid backup strategy provides immediate recovery points for recent regressions while ensuring robust disaster recovery capabilities in the event of major hardware failures.

The automated backup module handles the following pipelines:

• Daily SQL Dumps – Every day at 2:00 AM, a scheduler executes database backups, saving the complete schema and catalog entries into a compressed SQL dump.
• Gzip Compression – Exported dumps are automatically compressed to minimize network and disk overhead.

Summary and Future Vision

Building the LétElem Webshop (letelem.eu) on Next.js 15 and Neon Serverless PostgreSQL proved that a tailor-made, clean-architecture platform delivers unparalleled benefits compared to rigid WordPress templates. The automated Playwright crawler freed administrators from manual product mapping, while our robust transactional layer provides rock-solid reliability.

The high rendering performance and accessible Radix UI structure have unlocked higher conversion rates and superior organic Google Search visibility. This successful launch clears the path for upcoming phases, including personalized machine-learning product recommendations and real-time AI-powered customer service agents.