https://github.com/vpnclient/vpnclient-react-native-app
https://github.com/vpnclient/vpnclient-react-native-app
Last synced: 5 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/vpnclient/vpnclient-react-native-app
- Owner: VPNclient
- Created: 2025-05-12T03:35:01.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-05-12T07:53:21.000Z (about 1 year ago)
- Last Synced: 2025-06-11T17:57:05.830Z (about 1 year ago)
- Language: TypeScript
- Size: 353 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# VPNclient App (React-Native Implementation)
A cross-platform, open-source VPN client with support for multiple protocols (Xray, WireGuard, OpenVPN) and advanced routing capabilities.
## π Key Features
### Core Functionality
- **Multi-Protocol Support**: VMess, VLESS, Reality (Xray), WireGuard, OpenVPN
- **Cross-Platform**: iOS, Android
- **Subscription Management**: Import server lists via URL
- **Advanced Routing**: Split tunneling, domain rules, app-level routing
### Security
- Kill Switch protection
- Auto-connect on startup
- No root/jailbreak required
### Performance
- Real-time connection stats
- Server latency testing
- Optimized native engine
## π¦ Architecture Overview
```mermaid
flowchart LR
subgraph subGraph0["ReactNative Application"]
UI@{ label: "VPNclient App (ReactNative UI)" }
end
subgraph subGraph1["ReactNative Plugin"]
Plugin["VPNclient Engine ReactNative"]
end
subgraph subGraph2["Native Core"]
Core["VPNclient Engine Library"]
end
UI --> Plugin
Plugin --> Core
Core --> iOS["iOS"] & Android["Android"]
UI@{ shape: rect}
```
**Technology Stack**:
- **Frontend**: React Native, TypeScript
- **State**: Zustand/Redux Toolkit
- **Styling**: Restyle/NativeWind
- **Testing**: Jest, Detox
- **CI/CD**: GitHub Actions, Fastlane
---
## 𧱠ΠΡΡ
ΠΈΡΠ΅ΠΊΡΡΡΠ° React Native ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ
### 1. **ΠΡΡ
ΠΈΡΠ΅ΠΊΡΡΡΠ½ΡΠΉ ΡΡΠΈΠ»Ρ**
* **Modular Monorepo** (Π΅ΡΠ»ΠΈ Web ΠΈ Mobile): ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ **Turborepo** ΠΈΠ»ΠΈ **Nx** β Π»Π΅Π³ΠΊΠΎ ΠΏΠ΅ΡΠ΅ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π»ΠΎΠ³ΠΈΠΊΡ ΠΈ UI ΠΌΠ΅ΠΆΠ΄Ρ web/mobile.
* **Clean Architecture**: Π΄Π΅Π»ΠΈΡΠ΅ ΠΊΠΎΠ΄ Π½Π° ΡΠ»ΠΎΠΈ `presentation` / `application` / `domain` / `infrastructure`.
### 2. **ΠΠ°Π²ΠΈΠ³Π°ΡΠΈΡ**
* `@react-navigation/native` Ρ **bottom-tabs + stack-nesting** (ΡΠΈΠΏΠΈΡΠ½ΠΎ Π΄Π»Ρ e-commerce).
* Deep Linking + Universal Links (Π²Π°ΠΆΠ½ΠΎ Π΄Π»Ρ ΠΌΠ°ΡΠΊΠ΅ΡΠΈΠ½Π³Π° ΠΈ ΠΏΡΡΠ΅ΠΉ).
### 3. **Π‘ΠΎΡΡΠΎΡΠ½ΠΈΠ΅**
* `Zustand` ΠΈΠ»ΠΈ `Redux Toolkit` Ρ RTK Query (ΡΠ΄ΠΎΠ±Π½ΠΎ Π΄Π»Ρ ΠΊΠ΅ΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ API).
* ΠΠ΅ Π·Π°Π±ΡΠ²Π°ΠΉΡΠ΅ ΠΏΡΠΎ **react-query** / `TanStack Query`, Π΅ΡΠ»ΠΈ Π΄Π΅Π»Π°Π΅ΡΠ΅ Π°ΠΊΡΠ΅Π½Ρ Π½Π° data fetching.
### 4. **UI-ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ**
* **Atomic Design** ΠΏΠΎΠ΄Ρ
ΠΎΠ΄ β Π΄Π΅Π»ΠΈΡΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ Π½Π° `Atoms`, `Molecules`, `Organisms`.
* ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ `Restyle` ΠΈΠ»ΠΈ `NativeWind` Π΄Π»Ρ ΡΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΠΈ.
### 5. **Π Π°Π±ΠΎΡΠ° Ρ API**
* REST-first, GraphQL ΡΠΎΠ»ΡΠΊΠΎ Π΅ΡΠ»ΠΈ Π±ΡΠΊΠ΅Π½Π΄ Π³ΠΎΡΠΎΠ² Π΅Π³ΠΎ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ.
* ΠΠ²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠ°Ρ Π³Π΅Π½Π΅ΡΠ°ΡΠΈΡ ΡΠΈΠΏΠΎΠ² ΡΠ΅ΡΠ΅Π· Swagger / OpenAPI.
---
## π§ͺ ΠΡΠΎΡΠ΅ΡΡΡ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ
### 1. **CI/CD**
* GitHub Actions ΠΈΠ»ΠΈ GitLab CI.
* ΠΠ²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠ°Ρ ΡΠ±ΠΎΡΠΊΠ° Π½Π° TestFlight ΠΈ Google Play Internal (ΡΠ΅ΡΠ΅Π· EAS ΠΎΡ Expo ΠΈΠ»ΠΈ fastlane).
### 2. **Code Quality**
* ESLint + Prettier + Husky + Lint-Staged.
* Π‘ΡΡΠΎΠ³Π°Ρ ΡΠΈΠΏΠΈΠ·Π°ΡΠΈΡ (TypeScript).
* Codegen ΡΠΈΠΏΠΎΠ² ΠΈΠ· API (Swagger / GraphQL).
### 3. **Π’Π΅ΡΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅**
* **Unit**: `Jest`, `Testing Library`.
* **E2E**: `Detox` (Π΄Π»Ρ React Native).
* ΠΠ²ΠΎΠ΄ΠΈΡΠ΅ ΠΏΠΎΠΊΡΡΡΠΈΠ΅ ΠΊΡΠΈΡΠΈΡΠ΅ΡΠΊΠΎΠ³ΠΎ UI ΠΈ flows (Π»ΠΎΠ³ΠΈΠ½, ΠΊΠΎΡΠ·ΠΈΠ½Π°, checkout).
### 4. **ΠΡΠΎΡΠ΅ΡΡΡ**
* Kanban/Agile + weekly sprint planning.
* ΠΠ½Π΅Π΄ΡΠΈΡΠ΅ CI/CD ΠΈ Feature Flags (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Ρ `LaunchDarkly` ΠΈΠ»ΠΈ `ConfigCat`) Π΄Π»Ρ Π³ΠΈΠ±ΠΊΠΈΡ
ΡΠ΅Π»ΠΈΠ·ΠΎΠ².
---
## π Getting Started
### For End Users
Download from official stores:
- [Google Play](https://play.google.com/store/apps/details?id=click.vpnclient)
- [App Store (TestFlight)](https://testflight.apple.com/join/KQr4SeS7)
### For Developers
```bash
# Clone repository
git clone https://github.com/VPNclient/VPNclient-react-native-app.git
cd VPNclient-react-native-app
# Install dependencies
yarn install
# Run on iOS/Android
yarn ios
yarn android
```
**Platform Requirements**:
- Android 6.0+
- iOS 15.6+
- Node.js 18+
## π¬ Support
- [GitHub Issues](https://github.com/VPNclient/VPNclient-app/issues)
- [Telegram Group](https://t.me/vpnclient_chat)
- Email: support@vpnclient.click
---
> Part of the **VPNclient Ecosystem**:
> - [Engine Core](https://github.com/VPNclient/VPNclient-engine)
> - [React Native Plugin](https://github.com/VPNclient/VPNclient-engine-react-native)