<?xml version="1.0" encoding="UTF-8"?><rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:atom="http://www.w3.org/2005/Atom" version="2.0"><channel><title><![CDATA[Webshark Engineering]]></title><description><![CDATA[Engineering notes from Webshark Web Services, an ISO 27001 and CMMI Level 3 software company. Real lessons on mobile apps, SaaS, AI and eCommerce from 580+ projects.]]></description><link>https://webshark.hashnode.dev</link><generator>RSS for Node</generator><lastBuildDate>Thu, 29 Oct 2026 07:39:34 GMT</lastBuildDate><atom:link href="https://webshark.hashnode.dev/rss.xml" rel="self" type="application/rss+xml"/><language><![CDATA[en]]></language><ttl>60</ttl><item><title><![CDATA[Building a React Native App on Top of an Existing WooCommerce Store]]></title><description><![CDATA[Architecture notes from an 8-week build, from kickoff to App Store]]></description><link>https://webshark.hashnode.dev/building-a-react-native-app-on-top-of-an-existing-woocommerce-store</link><guid isPermaLink="true">https://webshark.hashnode.dev/building-a-react-native-app-on-top-of-an-existing-woocommerce-store</guid><category><![CDATA[React Native]]></category><category><![CDATA[woocommerce]]></category><category><![CDATA[mobile app development]]></category><category><![CDATA[TypeScript]]></category><category><![CDATA[ecommerce]]></category><dc:creator><![CDATA[Siddhant Singh]]></dc:creator><pubDate>Mon, 26 Oct 2026 13:14:05 GMT</pubDate><content:encoded><![CDATA[<p>A lot of businesses in the US and Canada run their online store on WooCommerce. At some point, many of them ask the same question: <em>"Can we get a proper mobile app without rebuilding everything?"</em></p>
<p>The short answer is yes. My team recently shipped a React Native app for iOS and Android on top of an existing WooCommerce store for a natural wellness brand, from kickoff to App Store submission in 8 weeks. Both apps are now live.</p>
<p>This post covers the architecture decisions that made that timeline possible, and the trade-offs worth knowing if you're planning something similar.</p>
<h2>The core decision: keep WooCommerce as the backend</h2>
<p>The tempting option is to migrate to a headless commerce platform and build fresh. Sometimes that's right. But when a store already has products, orders, customers, inventory rules and an operations team that knows WordPress, throwing that away adds months and risk.</p>
<p>So the principle was simple: <strong>the website and the app share one backend.</strong> Products, prices, stock, orders and customers live in WooCommerce. The app is a new, fast front end on top of it.</p>
<p>That means:</p>
<ul>
<li>One product catalog, managed in the admin the team already uses</li>
<li>Orders from web and app land in the same place</li>
<li>No data sync jobs to maintain between two systems</li>
</ul>
<h2>The stack</h2>
<table>
<thead>
<tr>
<th>Layer</th>
<th>Choice</th>
</tr>
</thead>
<tbody><tr>
<td>App framework</td>
<td>React Native with TypeScript</td>
</tr>
<tr>
<td>Navigation</td>
<td>React Navigation</td>
</tr>
<tr>
<td>State and data fetching</td>
<td>Redux Toolkit + RTK Query</td>
</tr>
<tr>
<td>Local storage</td>
<td>Async Storage</td>
</tr>
<tr>
<td>Commerce backend</td>
<td>WooCommerce REST API v3</td>
</tr>
<tr>
<td>Content</td>
<td>WordPress REST API</td>
</tr>
<tr>
<td>Auth</td>
<td>JWT, plus social login, OTP and biometric unlock</td>
</tr>
<tr>
<td>Payments</td>
<td>Razorpay (cards, UPI, wallets, EMI, COD)</td>
</tr>
<tr>
<td>Notifications and monitoring</td>
<td>Firebase Cloud Messaging, Analytics, Crashlytics</td>
</tr>
</tbody></table>
<p>Nothing exotic. That's deliberate. Boring, well-supported choices are what let a small team move fast without surprises late in the project.</p>
<h2>Data layer: why RTK Query earned its place</h2>
<p>A commerce app makes a lot of read requests (categories, product lists, filters, product details) and fewer, more important writes (cart, checkout, profile).</p>
<p>RTK Query handles the read side well:</p>
<ul>
<li><strong>Caching</strong> so moving between categories and product pages feels instant</li>
<li><strong>Request de-duplication</strong> when several screens need the same data</li>
<li><strong>Tag-based invalidation</strong>, so when a user places an order, their order history refreshes automatically</li>
</ul>
<p>A simplified version of the pattern:</p>
<pre><code class="language-ts">export const storeApi = createApi({
  reducerPath: 'storeApi',
  baseQuery: fetchBaseQuery({ baseUrl: API_BASE, prepareHeaders: withAuth }),
  tagTypes: ['Product', 'Order'],
  endpoints: (build) =&gt; ({
    getProducts: build.query&lt;Product[], ProductFilters&gt;({
      query: (filters) =&gt; ({ url: 'products', params: filters }),
      providesTags: ['Product'],
    }),
    createOrder: build.mutation&lt;Order, NewOrder&gt;({
      query: (body) =&gt; ({ url: 'orders', method: 'POST', body }),
      invalidatesTags: ['Order'],
    }),
  }),
});
</code></pre>
<p>One practical note: <strong>never ship WooCommerce consumer keys inside a mobile app.</strong> Anything bundled in the app can be extracted. Requests that need admin-level keys should go through a thin server-side layer you control, while the app authenticates the user with a token.</p>
<h2>Authentication: meeting users where they are</h2>
<p>Mobile users don't want to type passwords on a phone. The app supports several sign-in paths that all resolve to the same customer account in WooCommerce:</p>
<ul>
<li><strong>Social login</strong> for the fastest sign-up</li>
<li><strong>OTP</strong> for users who prefer their phone number</li>
<li><strong>JWT</strong> sessions for API calls</li>
<li><strong>Biometric unlock</strong> (Face ID / fingerprint) as a convenience layer on top of a stored session, not as a replacement for real authentication</li>
</ul>
<p>The key design point is that every method maps to a single customer record. If a user signs up with Google on the app and later logs in on the website, they should see the same orders and addresses.</p>
<h2>Product discovery: filters and a barcode scanner</h2>
<p>Two features made the catalog feel native rather than "a website in an app":</p>
<ol>
<li><strong>Advanced filters</strong> mapped to WooCommerce categories and attributes, so the store team controls filtering from the admin without app updates.</li>
<li><strong>A barcode scanner</strong> that looks up products by SKU, so a customer holding a product can find it and reorder it in seconds.</li>
</ol>
<p>The scanner is a good example of a feature that only makes sense on mobile, and is cheap to build when your SKUs are already clean in the backend.</p>
<h2>Checkout and payments</h2>
<p>Checkout is where an app either earns trust or loses the sale. A few principles:</p>
<ul>
<li><strong>Create the order server-side</strong> and treat the payment gateway's confirmation (via webhook) as the source of truth, not the app's "success" screen.</li>
<li><strong>Support the payment methods your customers actually use.</strong> For this client in India that meant cards, UPI, wallets, EMI and cash on delivery through Razorpay. For a US or Canadian store, the same architecture works with Stripe, PayPal or Apple Pay / Google Pay.</li>
<li><strong>Handle the unhappy paths:</strong> app closed mid-payment, network drop, duplicate taps. Idempotent order creation saves a lot of support tickets.</li>
</ul>
<h2>Push notifications and monitoring from day one</h2>
<p>Firebase Cloud Messaging handles order updates and promotions. Firebase Analytics and Crashlytics went in from the first build, not after launch. When you're shipping in 8 weeks, crash reports from internal testers are how you find the issues that would otherwise appear in one-star reviews.</p>
<h2>What makes a timeline like 8 weeks realistic</h2>
<p>A timeline like this comes down to a few decisions, not heroics:</p>
<ol>
<li><strong>Reusing the existing backend</strong> instead of migrating</li>
<li><strong>A fixed, written scope</strong> agreed before development starts</li>
<li><strong>Boring, proven libraries</strong> rather than experimenting mid-project</li>
<li><strong>Frequent builds</strong> in the client's hands, so feedback comes early</li>
<li><strong>App Store and Play Store requirements</strong> (privacy labels, account deletion, review guidelines) planned in from the start, not discovered at submission</li>
</ol>
<h2>When this approach is <em>not</em> the right fit</h2>
<p>To be fair, keeping WooCommerce as the backend isn't always the answer. Consider a different architecture if:</p>
<ul>
<li>The store has very large catalogs or traffic that WordPress hosting already struggles with</li>
<li>You need complex real-time features (live inventory across many warehouses, marketplaces with many sellers)</li>
<li>The business is planning to move off WordPress anyway in the next year</li>
</ul>
<p>In those cases, it's usually worth investing in a headless commerce backend first, then building the app on top.</p>
<h2>Wrapping up</h2>
<p>If your business already runs on WooCommerce, a native-feeling mobile app doesn't require starting over. With a clear scope, a solid data layer, and careful handling of auth and payments, it can be a matter of weeks, not quarters.</p>
<hr />
<p><em>I'm Siddhant, Founder &amp; CEO of</em> <a href="https://www.webshark.tech/"><em>Webshark Web Services</em></a><em>, an ISO 27001 and CMMI Level 3 certified software development company. We build mobile apps, SaaS platforms and eCommerce products for businesses in the US, Canada, the Middle East and India.</em></p>
]]></content:encoded></item></channel></rss>