Sure Phone

A modern, high-performance smartphone UI for FiveM built with React, Vite, and Tailwind CSS.

Overview

Sure Phone is a feature-rich smartphone resource for FiveM, designed with a focus on performance and a clean user experience. It provides a modular application system that allows for easy expansion and customization.

Features

• Home Screen: Customizable layout with drag-and-drop support for app icons and groups.
• Messaging: Send and receive messages with support for media.
• Calls: Integrated calling system.
• Contacts: Manage personal and business contacts.
• Camera: Take and view photos with a gallery application.
• Banking: Access accounts and perform transfers.
• Social Media: Functional clones of popular social platforms (Instagram, X).
• Utilities: Calculator, Settings, and Developer Tools.
• Animations: Smooth transitions and interactive elements powered by Framer Motion.

Tech Stack

• Framework: React 19
• Build Tool: Vite
• Routing: TanStack Router
• State Management: Zustand
• Styling: Tailwind CSS
• Icons: Lucide React
• Animations: Framer Motion
• Drag and Drop: React DnD
• Type Safety: TypeScript

Development

Prerequisites

• Node.js (Latest LTS recommended)
• Bun or NPM

Setup

1. Navigate to the web directory:

   cd web

2. Install dependencies:

   bun install
   # or
   npm install

3. Run the development server:

   bun run dev
   # or
   npm run dev

The development server includes mock data support, allowing you to preview the UI in a browser outside of FiveM.

Building for Production

To build the UI for use in FiveM:

1. Run the build command:

   bun run build
   # or
   npm run build

The output will be located in the web/dist directory. Ensure your FiveM resource manifest points to the correct files.

Project Structure

• web/src/apps: Individual application logic and UI.
• web/src/components: Shared UI components.
• web/src/store: Global state management using Zustand.
• web/src/utils: Utility functions and NUI interaction logic.
• web/src/consts: Constants and mock data.

FiveM Integration

The UI communicates with the FiveM client via the fetchNui utility, which handles POST requests to the game engine. Ensure your Lua client scripts are set up to receive and respond to these callbacks.

Project Status

• NUI Development: Currently building out the React-based user interface and core applications.
• Lua Development: Implementing server and client-side logic for game integration.
• Testing: Comprehensive testing and bug fixing.
• Production: Final release and deployment.