Trebes + Henning: My T+H App and eCommerce Integration

Client Requirement

Trebes + Henning is a specialized provider of work safety and protective gear, offering high-quality products for professionals. Their business model focuses on providing a seamless shopping experience for users to purchase safety equipment using a predetermined budget, either online through their My T+H Mobile App or the official website.

Project Objective

The primary objective of this project was to develop and integrate a React Native mobile app and a WooCommercebased website for Trebes + Henning. The goal was to create a seamless user experience across platforms that allowed
company employees to shop for protective gear, manage
their budgets, and process payments efficiently. The
integration between the mobile app and website would
enable both to operate as part of a unified system, providing users with a streamlined shopping experience

Key Requirements

1. Mobile App (React Native)

The mobile app was built using React Native to ensure cross-platform compatibility (iOS and Android). The app was designed to provide users with an easy and efficient way to shop for protective work gear
while managing their predefined annual budgets.

Key Features of the Mobile App:

Cross-Platform Support: The app needed to be compatible with both iOS and Android, allowing the business to reach a wider audience.
User Authentication: Integration with WooCommerce’s user account management system was necessary. This allowed users to log in, manage their accounts, and keep track of their budgets,
purchases, and order history.
Product Management: The app needed to list products that could be browsed, filtered, and added to the cart. Products are synced with the WooCommerce database in real-time, ensuring users see the most up-to-date inventory.
Payment Gateway Integration: The app had to integrate with PayPal, enabling users to securely process payments for their orders.
Push Notifications: The app needed push notification support to send updates on order status, promotions, and important information to users.
Order Management: Users should be able to place orders, track them, and receive order confirmation and invoice details. The invoice generation logic was handled via a dynamically generated UUID.
Return Management: Users should be able to initiate and track returns for items purchased through the app

2. Website (WooCommerce)

The WooCommerce-based website was developed using WordPress to manage product listings, customer accounts, and transactions. The website acted as the backend platform for the mobile app, with
both systems working in tandem

Key Features of the Website:

Product Listings: Similar to the mobile app, the website needed to list products, allowing customers to browse, filter, and add them to the shopping cart.
User Accounts: Users could register, login, and manage their orders and profile details via WooCommerce. User authentication was synchronized with the mobile app.
Cart and Checkout: A seamless cart and checkout experience needed to be implemented, ensuring users could select multiple products, apply discounts or offers, and process payments securely.
Payment Gateway: Integrated with WooCommerce-supported payment gateways like PayPal, Stripe, and others for secure payment processing.
Admin Dashboard: The website’s admin panel was built using the WooCommerce dashboard to manage products, orders, customers, and payments.
Order Management: Orders placed through both the mobile app and website were synchronized, with users receiving order confirmations and tracking details

Key Requirements

Integration Between Mobile App K and Website

The most critical feature of this project was the integration between the React Native mobile app and the WooCommerce website. The goal was to ensure that product data, order details, and user accounts remained consistent
across both platforms.

Key Integration Features:

Product Sync: The mobile app fetched real-time product data from
the WooCommerce website using its API. This ensured the app
displayed the same products available on the website.
Order Tracking: Orders made through the app were processed on the WooCommerce backend, ensuring that users could manage and
track their purchases regardless of the platform they used.
User Synchronization: Customer accounts were synced between the
website and mobile app, allowing for a unified shopping experience
where users could seamlessly switch between devices.
Payment and Invoice Sync: Orders placed through the app were
processed via PayPal, with the invoice number being generated
dynamically and passed to the WooCommerce system for recordkeeping

Challenges and Solutions

During the development and implementation phases, several
challenges arose:

1. Invoice Number Generation:

Challenge

WooCommerce required an invoice number for each transaction,
but the invoice number could not be generated in advance in the
system, as it was linked to order creation.

Solution

A random UUID was generated during the order creation process. Once the order was confirmed, the invoice number was associated
with the order.

2. Order Confirmation and Payment Handling:

Challenge

Initially, when users paid through the mobile app, the system did not redirect them to the confirmation page, causing confusion

Solution

The issue was resolved by ensuring that after a successful payment, users were redirected to the order confirmation page with clear order status messages.

3. Email Notifications:

Challenge

Order confirmation emails were initially being sent multiple times.

Solution

The email system was updated to ensure that only a single order
confirmation email was sent per transaction, improving the user
experience.

4. Platform-Specific Issues:

Challenge

The integration of PayPal and handling payments across different platforms (iOS vs Android) caused discrepancies

Solution

Testing on both platforms ensured proper integration, and the app
was deployed to both TestFlight (iOS) and the Google Play Store for validation.

Outcome and Impact

After the mobile app and website were launched, Trebes +
Henning successfully achieved their goals of creating a
seamless shopping experience for their customers. Key results
included:

Increased User Engagement: With the launch of the mobile app, customers could shop on the go, improving the business’s accessibility.
Streamlined Order Management: The integration between the mobile app and WooCommerce website allowed Trebes + Henning to manage orders efficiently across both platforms.
Improved Customer Satisfaction: Customers now had a unified shopping experience with real-time order tracking, invoice generation, and easy payment options.
App Store Presence: The app was successfully published on both the App Store and Google Play Store, ensuring it was available to a broad user base.