Don Nguyen - Code & Life

From Web App to Mobile: Wrapping a Next.js Property Finder with Capacitor

After building a school catchment property finder in a weekend, turning it into mobile apps for both iOS and Android took just hours—thanks to Capacitor's pragmatic approach to wrapping web apps.

  ·   3 min read

Within days of launching School Zone Homes VIC, the question came up: “Is there a mobile app?” It’s the natural next ask for a tool designed around maps and property searches—things people actually do while driving through neighborhoods, standing in front of homes, or sitting in a café during their lunch break planning weekend inspections. The web version worked fine on mobile browsers, but there’s something about having a dedicated app icon, native behaviors, and presence in the app stores that makes a tool feel more real and accessible. So I built the mobile apps. Or more accurately, I wrapped the existing Next.js web app and shipped it to both the App Store and Google Play.

The decision came down to two paths: Capacitor or building a React Native version with Solito. Solito is elegant—it lets you share routing and navigation logic between Next.js and React Native while building genuinely native UIs. If you’re committed to native experiences with platform-specific components and interactions, that’s your answer. But here’s the thing: I already had a working, responsive web app built in Next.js that handled every user flow, displayed cleanly on mobile devices, and didn’t particularly benefit from native UI elements. Starting a React Native codebase meant maintaining two UI implementations, even if the logic layer stayed shared. That might be worth it for a product where native feel drives user engagement—fitness trackers, photo editors, games. For a property search tool that’s primarily a map with filters? The web UI was already good enough.

Capacitor’s pitch is refreshingly simple: wrap your web app in a native shell, bridge the APIs you need, and ship it. The experience lived up to that promise. I installed Capacitor, ran a few config commands, and suddenly had Xcode and Android Studio projects that bundled the Next.js app. The only real work was handling safe areas—the notch on iPhones, the navigation bars on Android—so the UI didn’t get clipped by device chrome. Enter tailwindcss-safe-area, a plugin that adds safe area utilities to Tailwind. A few padding classes later, the interface respected device boundaries without any custom platform detection code. Capacitor even includes tooling to generate splash screens and app icons from a single source image, which removed another chunk of the tedious asset prep work that traditionally makes mobile publishing feel like a slog.

What this reinforced for me is that the right technical choice isn’t always the most sophisticated one—it’s the one that fits your constraints. If this were a product with a team, a roadmap for platform-specific features, and user research suggesting native UI patterns drive conversion, maybe Solito or full React Native makes sense. But for a side project built in a weekend, maintained by one person with limited time and a working web app? Wrapping it with Capacitor was the obvious move. The apps are live, they work well, and I didn’t burn weeks maintaining parallel codebases. Sometimes the pragmatic path and the right path are the same thing.

You can try the apps yourself:

Or read about how I built the web version in the first place.