Technology
RoadPhone Pro combines cutting-edge web technologies with Lua scripting to create a seamless smartphone experience in FiveM.
Architecture Overview
A modern tech stack designed for performance and developer experience.
Frontend
Vue.js 3, Vite, Pinia, Motion-V
Real-time Communication
Seamless data flow between the UI, game client, and server.
Backend
Lua 5.4, MySQL, Bridge System
// PhoneAPI.js
fetch(`https://${GetParentResourceName()}/eventName`, {
method: 'POST',
body: JSON.stringify(data)
})-- client.lua
SendNUIMessage({
action = 'eventName',
data = payload
})Modern Web Technologies
Built with the latest frontend frameworks for a native app-like experience.
Vue.js 3
The UI is built on Vue.js 3 with the Composition API. Vue enables reactive user interfaces with component-based architecture. Each app is a standalone Vue component.
Vite (Rolldown)
We use Vite with the experimental Rolldown bundler. Rolldown is a Rust-based bundler that works significantly faster than traditional JavaScript bundlers. The entire build takes under 2 seconds.
Pinia
Pinia is our state management system. Each app has its own store that manages state. The central phoneStore coordinates global settings like language, theme, and phone number.
Motion-V
For animations, we use motion-v, a Vue wrapper for Motion One. This enables smooth 60fps animations for transitions, gesture controls, and UI feedback - inspired by iOS design.
Robust Server Infrastructure
Reliable backend systems ensuring data persistence and cross-framework compatibility.
Lua 5.4
FiveM integration is done via Lua 5.4. Client scripts control animations, camera, and local events. Server scripts process database operations and cross-player logic.
MySQL
Persistent data is stored in MySQL/MariaDB. We use the mysql-async library for asynchronous database queries to avoid blocking the server.
Bridge System
A custom-developed Bridge System abstracts framework-specific code. This enables compatibility with ESX, QBCore, Qbox, and Standalone servers without code changes.
Real-time Communication
Seamless data flow between the UI, game client, and server.
NUI (Chromium)
FiveM embeds a Chromium browser (NUI) that renders the Vue frontend. Communication between Vue and Lua happens via NUI messages.
LiveKit (WebRTC)
For video and voice calls, we integrate LiveKit, a WebRTC-based solution. LiveKit enables peer-to-peer connections with low latency.
Mitt Event Bus
Internally, Vue uses Mitt as an event bus for component communication. Lua uses native FiveM events for client-server communication.
Rich Media Experience
Professional audio handling for an immersive experience.
Howler.js
Howler.js manages all audio playback - ringtones, notification sounds, UI sounds. The library offers sprite support and automatic format fallback.
WaveSurfer.js
For voice messages, we use WaveSurfer.js to visualize audio waveforms. Users see progress as an animated waveform.
LameJS
Voice recordings are encoded to MP3 client-side using LameJS. This significantly reduces file size before upload.
10 Languages Supported
Translations are stored as separate JSON files per language. The system only loads the active language at startup - additional languages are loaded on demand.
IntlString('GREETING', 'Hello', { name: 'Max' })
// โ "Hallo {name}" โ "Hallo Max"Optimized for Speed
Every aspect is optimized for minimal resource usage and maximum performance.
Lazy Loading
Apps are only loaded when opened. Vue Router uses dynamic imports for optimal performance.
Optimized Assets
Images as WebP, compressed fonts, and SVG icons instead of raster graphics.
Minimal Bundle
Tree-shaking and code-splitting keep the initial bundle small. Large libraries load on demand.
Under 2s Build
Rust-based Rolldown bundler enables lightning-fast production builds.
Developer Experience
Modern tooling for efficient development and code quality.
OxLint
Fast Rust-based linter for catching errors and maintaining code quality.
Prettier
Automatic code formatting for consistent style across the codebase.
Vue DevTools
Debugging components, state, and performance with Vue DevTools.
Experience the Technology
Get RoadPhone Pro and see the difference modern technology makes.
RoadPhone Pro v2.0.0 - Developed by RoadShop