How we built multi-platform app at Wishup with Expo

Wishup is a multi-platform app that lets entrepreneurs discover right remote assistants, from a pool of vetted, trained and top 0.0001% talents and manage work seamlessly on day to day chores.

Extending UI

Wherever possible extend the UI, margins paddings to exisitng components with responsive code. We used Tamagui to build our app and it was super easy to extend the UI components to web, just by adding sm, lg, gt props to pass in styles responsive to various screen sizes.

Used Platform extensions

For platform specific resolution of certain components and behavior. It is best to colocate the files, give same names and import the code, component and metro will resolve the respective platform files. Layout and access varies distinctly from mobile to web, so writing platform specific module is a great practice we adopt. Creating filename.web.ts, wherever there is a web specific implementation needed for that feature.

Push Notification and Web Push Subscription

Building Push notification feature is straight-forward with Expo push notifications, but to add support for a push notifications on web, that needs a service worker setup to create subscription for that browser. I have created this gist to refer and implement the push notifications on expo-web.

The problem with push notifications on web is it can only be implemented in a service worker.

The IndexedDB and Cache Storage APIs are accessible in service workers. However, Local Storage and Session Storage are not.

So, we wrote every function mapping the utility to our persistent storage solution of mobile, i.e., MMKV storage, which use localstorage on web.

LocalStorage is also not reactive and to handle the variables that need to run callbacks and reactivity, added all the hooks to refer the values and user data in indexedDB.

React Navigation v7 upgrade

To build the sidebar on web, and chat interface as a common component across all tabs, we upgraded the app to v7 of react navigation making use of `tabBarPosition` to render sidebar for web platform, and end up passing the custom UI for sidebar.
We make use of layout prop of the navigators and screen to render shared components across the navigators and screens. It made features like our Chat very easy to implement as most of the heavy lifting is done by the library.
Later, we wrote the aliases against every navigator and screens, for better url structures, while implementing universal linking and deep links in the hybrid app.

Common workarounds

From writing platform based React context for auth, we use Auth0, to writing conditonal Provider wrappers.
Defining and blocking the resolution of certain components that simply does not work on web in Metro and ignoring certain parts of code for one platform and adding extra code for another. Expo 52, tree shakes the codebase and optimising the build anyways. Using Atlas is a great practice to pick and kill unused packages.

Deployment

Deployment configuration installs serve, copies the app’s source code, builds the app for the web, and sets up a service worker. It exposes port 8081 and serves the app from the /dist folder on that port.
We setup a dockerfile to host the frontend for our app on EC2, It is working alright for now. If something occurs, Expo community is always ready to help.

Backend

While building the new clients with expo-web we used the same legacy structured Postgres DB and wrote the type APIs over it.
Our backend stack is apollo server, with Graphql APIs. We are using prisma to write typed queries, mutations and resolvers and managing our database schema effortlessly. Some AI powered features and server driven UI configurations for certain apps. Usage of Graphql-shield to manage admin roles on the app. It is a great product catering 4 types of user with varying accesses, namely, Clients, VAs, Admin roles and Client’s team members.

---

With this, I am really looking forward to learn more about the rich apps built with expo-web. please hit me up with your implementations at X

Thanks for reading!