Are you ready to take your mobile marketing strategy to the next level? Building a marketplace app that connects vendors and customers can be a game-changer for your business. In this article, we'll show you how to build a cross-platform app using Expo, Swell, and MarketLaunch.

What is MarketLaunch?

MarketLaunch is an open-source development kit that enables businesses to launch their own e-commerce marketplaces in days rather than months. It provides the scaffolding around the "back-office" parts of a platform, such as sign-up, order management, product management, etc. To achieve this, it uses Swell's headless e-commerce platform.

Getting Started

To get started with MarketLaunch, you'll need to create a Swell account and a Stripe account. Then, clone the MarketLaunch project from GitHub using git clone git@github.com:morrowdigital/MarketLaunch.git. Once cloned, copy the .env.local.example file over to .env.local, and fill out the values for SWELL_SECRET_KEY, NEXT_PUBLIC_SWELL_STORE_ID, NEXT_PUBLIC_SWELL_PUBLIC_KEY, STRIPE_API_KEY, and STRIPE_API_VERSION.

Setting Up Your Environment

Next, run through the setup instructions:

  1. Run corepack enable to make Yarn available.
  2. Run yarn install to fetch and install all dependencies.
  3. Run yarn marketlaunch:setup and follow the instructions to set up Swell.
  4. Run yarn dev to start the Next.js development mode.

Building Out Your App

Assuming everything goes as expected, you should now have a basic MarketLaunch project up and running on your local machine. The project should be running at http://localhost:3000 - this is the back-office panel. Let's register a vendor account and create a product in our catalogue.

Using Expo to Build Your Customer-Facing Experience

We'll use the default Expo template to build out our customer-facing experience. Start by initializing an Expo project using npx create-expo-app@latest. Once you've followed the prompts, open the project in your code editor and run yarn start from the project directory.

Integrating Swell-JS

To integrate Swell-JS, create a .env file in your project root and add the following:

  • EXPO_PUBLIC_SWELL_STORE_ID: Your Swell store ID
  • EXPO_PUBLIC_SWELL_PUBLIC_KEY: Your Swell public key

Stop the Expo bundler, run npm i swell-js, and then initialize the client by importing Swell-JS in your _layout.tsx file. Restart the bundler and verify that you can talk with your Swell store backend.

Creating Pages for Your App

Let's create a few pages for our app. For simplicity, we'll keep the tabs layout. Add the following files:

  • app/(tabs)/product/index.tsx
  • app/(tabs)/product/[id].tsx

The first item in that list is going to be our product listing, and the second one is going to be our product information page.

Conclusion

Building a mobile marketing app like a pro requires careful planning and execution. By following these steps and using Expo, Swell, and MarketLaunch, you can create a cross-platform app that connects vendors and customers like never before. Remember to optimize your app for mobile marketing and don't forget to test it thoroughly before launching. Happy building!