Payhip boosts seller experience with Expo-powered mobile app

This is a guest post from Kornel Kwiatkowski - he is a React Native developer at Pagepro where he has become a pivotal figure in the realm of mobile app development, particularly in enhancing app performance and crafting aesthetically pleasing user interfaces.

...

In this mobile-first world, businesses without seamless access to their platform, user data, or notifications often fall behind competitors who have embraced these features. This was the case for Payhip.

Their web-only approach delayed crucial real-time information for both customers and merchants, affecting their competitiveness. When Payhip recognized this gap, they acted quickly to address the issue. With most of their competitors already offering mobile app access, Payhip didn’t want to risk losing customers, so they partnered with us at PagePro to develop and ship a cross-platform mobile app in 5 weeks.

Payhip is an eCommerce platform that allows users to sell digital products or courses directly to their audience, with easy website integration and a built-in storefront option for sellers. The platform is an all-in-one solution where users can set up a storefront, integrate sales options into existing websites, and manage their business operations seamlessly.

As the platform grew in popularity, so did the expectations of its users. They wanted easier and quicker access to revenue data and a more accessible way to monitor sales performance. To meet these demands and improve the overall user experience, Payhip decided to build a mobile app that would keep users informed and provide a convenient way to manage their businesses on the go.

The primary goal for the MVP was to launch a mobile app that delivered real-time transaction insights. This is the tech stack we put together with speed, scalability, and maintainability as our guiding development principles:

Its ability to create cross-platform apps and component-based architecture was just what Payhip needed to satisfy their user’s needs without sacrificing the potential for future growth. Reusing the code across two primary platforms drastically shortened the project’s timeline and made the MVP’s visuals and behavior consistent on all the devices. It was the ideal choice for building an MVP quickly while keeping future growth in mind.

Expo simplified the development process, providing a managed workflow that removed the complexities of native development. Its pre-configured components helped streamline the build process. Additionally, Expo's OTA (Over-The-Air) updates allowed Payhip to push fixes and updates directly to users, eliminating the delays of app store approvals which improved the app’s iteration speed.

Integrating TypeScript reduced potential runtime errors by enabling type checking at compile time and introduced strong typing, which greatly influenced code quality and efficiency.

To take full advantage of NativeWind, the developers behind the MVP used TailwindCSS's utility-first styling approach within the React Native environment. As a result, the UI development was considerably faster, with consistent styling across the app, which was in tune with the project's need for a polished and user-friendly interface.

When developing Payhip’s mobile app, using Expo was a natural choice from the start, as it is officially recommended by React Native as the best way to work on mobile projects. Thanks to Expo’s set of pre-configured tools, our development team could focus on building core features of the MVP without spending time on infrastructure or native development complexities. The bug fixes and further iterations were dealt with without any issues, as Expo’s managed workflow and ability to push over-the-air updates removed any possible hurdles on the team’s way to deliver the app and scale it for future growth.

Expo made a significant impact in three key ways:

• Accelerated Development: Expo’s pre-configured tools allowed us to build quickly, skipping many of the usual hurdles of React Native development, like manual native module integration for push notifications, managing platform-specific UI theming, or handling app signing and store distribution
• Real-Time Updates: With Expo's ability to push over-the-air (OTA) updates, EAS Update service, bug fixes, and new features were instantly deployed, allowing developers to add improvements and changes, which could be quickly sent to QA for testing.
• Cross-Platform Efficiency: Expo ensured seamless development across both iOS and Android with a single codebase, perfectly aligned with Payhip’s need for a rapid launch and future scalability. With Payhip’s users spread across both platforms, delivering the app simultaneously to all users was essential, ensuring a consistent experience from day one.

To take full advantage of Expo and its capabilities, our development team uses a variety of tools to support it. Here are a few of the highlights:

• `expo-auth-session` facilitated integration with authentication services based on OAuth 2.0. It enables easy management of user sessions and access tokens, offering simple configuration and handling of redirects after authentication. As it’s closely integrated with Expo, it’s easy to use and secure.
• `expo-notifications` is used to manage push notifications in React Native apps built with Expo. It provides a unified API for handling notifications across Android and iOS, making it easy to schedule, receive, and respond to notifications. Pagepro developers appreciate `expo-notifications` for the ease of use and integrate it into all their Expo projects.
• `expo-router` simplified navigation in React Native apps built with Expo by using a file-based routing system. Working on Payhip’s app was the first time developers used this function. While the architecture took some time to get used to, thanks to `expo router` the team was able to develop the app for web and mobile in one repository much easier than ever before. It allows for managing routes through the project's file structure, similar to web frameworks like Next.js, and supports dynamic routes and nested navigation.
• `expo-secure-store` is perfect for securely storing key-value pairs in React Native apps using Expo. It uses native secure storage solutions like iOS Keychain and Android Keystore to protect sensitive data. The library offers a simple API, seamless integration with Expo, and cross-platform consistency, making it easy to securely manage data.
• `expo-updates` enables over-the-air (OTA) updates for React Native apps built with Expo, allowing developers to push hotfixes directly to users without app store delays. It provides instant deployment of bug fixes and new features, ensuring users always have the latest version.

We used Expo Build to create the app and to share builds with the client and the QA team for internal testing. To automate the distribution process and separately-maintained builds, Expo Build was integrated with the CI/CD pipeline using GitHub Actions.

Expo DevClient helped speed up development by allowing us to work with external packages that required custom native code. This wouldn't have been possible with the standard Expo Go app. The DevClient also simplified testing by letting developers test features that relied on external packages without having to rebuild a full production version for each change.

Our MVP development process was carefully structured and optimized for efficient code management, ensuring the app's scalability, and here is how it was coordinated:

1. Storybook, housed in the .storybook directory, was used to develop and test UI components in isolation to make sure the user interface is both reliable and visually consistent.
2. All static resources, such as fonts and images, were organized within the assets directory to make asset management simple and to help the MVP maintain cohesive visuals.
3. The SCR/API directory was dedicated to managing API interactions, letting the MVP app communicate with external services for updates and additional integrations with new APIs.
4. The UI components were organized using the Atomic Design methodology, divided into atoms, molecules, and organisms within the components directory to promote reusability and consistency across the app.
5. The constants directory held configuration files and constants to smooth the process of managing application settings and ensure consistency across different environments.
6. React contexts and custom hooks were used to manage state and enhance functionality and support a clean and efficient codebase.
7. The screens directory was set up to contain all application screens, facilitating straightforward navigation and user interaction design.
8. The setup/i18n directory was dedicated to managing translations and configurations for international versions of the application, with a global reach and user accessibility in mind.
9. TypeScript type definitions and utility functions were organized in the types and utils directories, respectively for good performance.
10. Essential configuration files, such as .env and tsconfig.json, were used to set up the environment, manage dependencies, and ensure code quality through linting and transpiling. The developers used ESLint and Prettier to maintain consistent code style and formatting, improving overall code quality.

The greatest advantage of this applied structure is how simple it will be to expand that app's capabilities when it grows from an MVP into a full-featured application.

Building with Expo provided Payhip (and PagePro) with a strong ROI by allowing them to deploy on both iOS and Android from a single codebase, saving time and reducing costs. Expo's robust ecosystem simplifies development with useful libraries and tools, while features like hot reloading accelerate testing and deployment. The managed workflow also removes the need for deep native expertise, making the build process more efficient.

The expectation is that the application will improve user engagement and retention, and, in the process, these improvements will boost Payhip’s operational efficiency and strengthen the company’s position in the market.

Expo is a great choice for mobile development, but since it’s being actively improved, remember to keep your SDK and tools up to date to use the latest features and security fixes.

Speaking of - pay close attention to app security! It’s especially important if you're storing or processing user data. Also, next time you’re developing something with Expo, think about integrating CI/CD tools to automate build and deployment processes. It helped us save a lot of time and avoid some serious errors!

The organized development and solid tech stack enabled the MVP to be built in just five weeks and it’s now available on both Android and iOS app stores. Initial feedback has already provided insights into user expectations and potential improvements, such as adding blogging functionality and enhancing buyer information display.

Payhip doesn’t plan to stop at the MVP. The company aims to expand the app’s features based on user feedback, focusing on improving performance, reducing app size, and ensuring stability through thorough testing. Ultimately, Payhip plans to transition the entire marketplace to the mobile app, making it fully accessible on both desktop and mobile. These enhancements support Payhip's goal of becoming a leading platform for selling digital products, providing creators with an efficient tool to grow their businesses.