IonicReactTypeScriptCSSCapacitorElectron

MeetVPN

By Javier Nieto
Picture of the author
Published on
Duration
3 Months
Since
December 2022
Role
Frontend Developer
Disconnected State View
Disconnected State View
Connecting to Server View
Connecting to Server View
Server List View
Server List View
Discover Server View
Discover Server View

MeetVPN is a cross-platform VPN client built on the Shadowsocks protocol, designed to run on Android and desktop from a single codebase. The project required building a complete client interface that could reflect real-time VPN connection state while feeling native on both mobile and desktop platforms.

The Challenge

Building a VPN client is a different kind of frontend challenge. Beyond the visual layer, the app needed to manage and display real-time connection state — disconnected, connecting, connected — and surface server selection in a way that felt fast and intuitive. The team also needed to target both Android and desktop without the overhead of maintaining separate native codebases.

What I Built

The client was developed with Ionic and React using TypeScript, with CSS handling the styling layer. Cross-platform deployment was handled through Capacitor for Android and Electron for desktop:

  • Connection flow UI — built the full connection state machine interface across three views: disconnected, connecting, and connected — each with real-time visual feedback that keeps the user informed at every step
  • Server list & discovery — developed the server browsing and selection screens, allowing users to view available VPN servers, filter by region, and connect with a single tap
  • Ionic + React component architecture — structured reusable UI components across all screens using Ionic's mobile-first kit on top of React, keeping the codebase clean and scalable as features grew
  • Capacitor integration (Android) — configured the Capacitor bridge to package and run the app natively on Android, enabling access to native device APIs where needed alongside the web-based interface
  • Electron (desktop) — set up the Electron wrapper to compile the same React codebase into a native desktop application for Windows and macOS
  • TypeScript throughout — enforced strict typing across the entire client, reducing runtime errors and improving development confidence during rapid iteration

Outcome

A working cross-platform VPN client shipped in three months — running on Android via Capacitor and on desktop via Electron from a single Ionic + React codebase. The project remains active on GitHub, with ongoing contributions from the team.