naiemofficial/laravel-realtime-chat

1. Application shape

- This is a Laravel monolith for a realtime chat app. The backend is PHP/Laravel; the frontend is server-rendered Blade plus Livewire components, with Vite-built JavaScript and CSS.

2. Primary user-facing surfaces

- The main UI is the chat workspace (resources/views/chat/index.blade.php) and standard auth/profile pages.

- Layout composition is split between guest/auth layouts and reusable Blade components, so the diagram should show a shared presentation layer rather than separate SPA frontends.

3. Chat feature boundary

- The chat domain is concentrated in app/Livewire/Chat/*, app/Http/Controllers/ChatController.php, ConversationController.php, MessageController.php, ParticipantController.php, and the models Conversation, Message, Participant, and Call.

- This is the core subsystem for listing conversations, opening message threads, sending messages, and managing participants.

4. Realtime messaging flow

- Message actions originate in Livewire components such as SendMessage, Messages, Conversations, and related alert/not-available components.

- Those components interact with the Laravel domain models and then broadcast updates so other connected clients receive new messages without a page reload.

- The presence of app/Events/ConversationConnection.php, BroadcastServiceProvider, routes/channels.php, and resources/js/echo.js indicates a classic Laravel broadcasting pipeline.

5. WebSocket/broadcasting boundary

- Realtime delivery is abstracted behind Laravel broadcasting, with the app configured to work with Pusher or Reverb per the README and config/broadcasting.php, config/reverb.php.

- Private channel authorization is part of the architecture, so chat data is not pushed through public channels.

6. Call subsystem

- Audio/video calling is a separate but related feature, implemented through app/Livewire/Chat/Call.php, SendCall.php, and app/Models/Call.php.

- The frontend includes call-specific JavaScript (resources/js/custom/call.js, resources/js/Socket.js) and incoming/outgoing call audio assets in public/audio/.

- The README’s WebRTC mention suggests call setup/signaling is handled in-browser, with Laravel used to coordinate session state and realtime events.

7. Authentication and user management

- Auth is handled with standard Laravel auth controllers under app/Http/Controllers/Auth/*, plus request objects such as LoginRequest.

- User profile editing, password change, email verification, registration, and session management are separate bounded areas from chat.

- app/Http/Middleware/UserAuth.php and Sanctum config indicate additional auth protection for API/session access.

8. Persistence layer

- Data is stored in MySQL via Eloquent models and migrations.

- The schema centers on users, conversations, participants, messages, and calls, with additional Laravel tables for cache, jobs, and personal access tokens.

- database/seeders and factories support bootstrapping and test data.

9. Request handling and controller responsibilities

- Controllers are used for page-level and action-level endpoints, while Livewire handles the interactive parts of the chat UI.

- This creates a split where traditional controllers serve initial pages and account/profile workflows, and Livewire handles in-page chat state transitions.

10. Frontend composition and asset pipeline

- Styling uses Tailwind CSS plus custom CSS, and the build pipeline uses Vite.

- JavaScript is organized into app bootstrap files and feature scripts under resources/js/custom, with Echo/socket wiring for realtime behavior.

- Blade components are heavily used for buttons, form controls, modals, nav, alerts, and message templates.

11. Message rendering and UX states

- There is a dedicated message rendering subsystem under resources/views/message/* with templates for default and text-only variants and states like success, warning, pending, error, and unknown.

- This suggests the app presents structured message/status feedback separate from the core chat data flow.

12. External services and operational dependencies

- Realtime messaging depends on a WebSocket provider (Pusher or Reverb).

- Email verification and password reset imply mail service integration through Laravel’s mail stack.

- Session, cache, queue, and logging configs are standard Laravel support services, but broadcasting and WebRTC are the key architecture drivers here.