📱 Chat App - Laravel Backend + Flutter Mobile App

A full-stack real-time chat application with Laravel backend and Flutter mobile app. Features include real-time messaging, image sharing, user authentication, and WebSocket support.

---

📋 Table of Contents

• Features
• Tech Stack
• Laravel Backend Setup
• Flutter App Setup
• API Endpoints
• Testing
• Troubleshooting

---

✨ Features

Backend (Laravel)

• ✅ User authentication with Sanctum (API tokens)
• ✅ Real-time messaging with Laravel Reverb (WebSocket)
• ✅ Direct & group conversations
• ✅ Image uploads with captions
• ✅ Contact management
• ✅ Role-based access control (Spatie)
• ✅ Web interface (Blade templates)

Mobile (Flutter)

• ✅ Cross-platform (iOS & Android)
• ✅ Real-time message updates
• ✅ Image picker & upload
• ✅ Secure token storage
• ✅ Cached images
• ✅ Pull-to-refresh
• ✅ Material Design 3

---

🛠 Tech Stack

Backend

• Laravel 11 - PHP framework
• Laravel Reverb - WebSocket server
• Laravel Sanctum - API authentication
• MySQL - Database
• Spatie Permission - Role management
• Pusher Protocol - Broadcasting

Frontend

• Flutter 3.x - Mobile framework
• Provider - State management
• Pusher Channels Flutter - WebSocket client
• Dio/HTTP - API requests
• Cached Network Image - Image caching
• Flutter Secure Storage - Token storage

---

🚀 Laravel Backend Setup

Prerequisites

• PHP 8.2+
• Composer
• MySQL 8.0+
• Node.js & npm (for Vite)

Installation Steps

1. Install Dependencies

composer install
npm install

2. Environment Setup

cp .env.example .env
php artisan key:generate

3. Configure .env

APP_NAME="Chat App"
APP_URL=http://localhost:8000

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=chat_app
DB_USERNAME=root
DB_PASSWORD=your_password

# Broadcasting
BROADCAST_CONNECTION=reverb

# Reverb (WebSocket Server)
REVERB_APP_ID=675998
REVERB_APP_KEY=dzipltzgyda8iewsqt4o
REVERB_APP_SECRET=60dyhxkwdmh3yzh5wmuw
REVERB_HOST="localhost"
REVERB_PORT=8080
REVERB_SCHEME=http

# Frontend (Vite)
VITE_REVERB_APP_KEY="${REVERB_APP_KEY}"
VITE_REVERB_HOST="${REVERB_HOST}"
VITE_REVERB_PORT="${REVERB_PORT}"
VITE_REVERB_SCHEME="${REVERB_SCHEME}"

4. Database Setup

php artisan migrate
php artisan db:seed  # Optional: Creates admin user

5. Storage Link

php artisan storage:link

6. Start Services

Terminal 1 - Laravel Server:

php artisan serve

Terminal 2 - Reverb (WebSocket):

php artisan reverb:start

Terminal 3 - Vite (Frontend Assets):

npm run dev

Terminal 4 - Queue Worker (Optional):

php artisan queue:work

Testing the Web Interface

Open browser: http://localhost:8000

Default Admin Credentials:

• Email: admin@example.com
• Password: password

---

📱 Flutter App Setup

Prerequisites

• Flutter SDK 3.x
• Android Studio / VS Code
• Android Emulator or iOS Simulator

Installation Steps

1. Create Flutter Project

flutter create chat_app
cd chat_app

2. Update pubspec.yaml

Copy dependencies from FLUTTER_IMPLEMENTATION.md Part 1.

3. Install Dependencies

flutter pub get

4. Create Project Structure

Create all files from the implementation documents:

• FLUTTER_IMPLEMENTATION.md (Part 1) - Models & Config
• FLUTTER_IMPLEMENTATION_PART2.md - Services & Providers
• FLUTTER_IMPLEMENTATION_PART3.md - Auth Screens
• FLUTTER_IMPLEMENTATION_PART4_FINAL.md - Chat UI

Important: Add missing imports from FLUTTER_FIXES.md

5. Configure API Connection

Edit lib/config/app_config.dart:

For Android Emulator:

static const String baseUrl = 'http://10.0.2.2:8000';
static const String pusherHost = '10.0.2.2';

For iOS Simulator:

static const String baseUrl = 'http://localhost:8000';
static const String pusherHost = 'localhost';

For Physical Device:

static const String baseUrl = 'http://YOUR_COMPUTER_IP:8000';
static const String pusherHost = 'YOUR_COMPUTER_IP';

Find your IP:

# Windows
ipconfig

# Mac/Linux
ifconfig | grep inet

6. Run the App

flutter run

---

📡 API Endpoints

Authentication

POST   /api/auth/register       - Register new user
POST   /api/auth/login          - Login
POST   /api/auth/logout         - Logout (requires auth)
GET    /api/user                - Get current user

Conversations

GET    /api/conversations                        - List all conversations
POST   /api/conversations                        - Create conversation
GET    /api/conversations/{id}                   - Get conversation details
GET    /api/conversations/{id}/messages          - Get messages (paginated)
POST   /api/conversations/{id}/messages          - Send message

Contacts

GET    /api/contacts             - List contacts
GET    /api/contacts/search      - Search users
POST   /api/contacts             - Add contact
PUT    /api/contacts/{id}        - Update contact status

Profile

GET    /api/profile              - Get profile
PUT    /api/profile              - Update profile
POST   /api/profile/avatar       - Upload avatar
PUT    /api/profile/password     - Change password

---

🧪 Testing

Test WebSocket Connection

1. Open browser console on http://localhost:8000
2. Navigate to a conversation
3. Check console logs for successful subscription
4. Send messages from different users/devices
5. Verify real-time updates work

---

🐛 Troubleshooting

Laravel Issues

Images not loading:

php artisan storage:link
php artisan config:clear

WebSocket not connecting:

• Check Reverb is running
• Verify .env broadcasting configuration
• Check firewall allows port 8080

Flutter Issues

Cannot connect to API:

• Verify correct IP in app_config.dart
• Check Laravel serves on all interfaces
• Disable firewall temporarily

Build fails:

• Run flutter clean && flutter pub get
• Check all imports (see FLUTTER_FIXES.md)

---

📚 Documentation Files

1. FLUTTER_IMPLEMENTATION.md - Models, Config, Storage
2. FLUTTER_IMPLEMENTATION_PART2.md - Services (API, WebSocket, Auth)
3. FLUTTER_IMPLEMENTATION_PART3.md - Auth & Conversation Screens
4. FLUTTER_IMPLEMENTATION_PART4_FINAL.md - Chat UI, Message Bubbles
5. FLUTTER_FIXES.md - Import fixes for compilation errors

---

Happy Coding! 🚀