📬 Real‑Time Chat App

A comprehensive, responsive, secure, and efficient real-time chat application built with Laravel 11, featuring Google OAuth authentication, Pusher WebSocket integration, and a modern Blade UI with Tailwind CSS, and message editing/deletion, and a modern code architecture.

🚀 Key Features

API Features

• Secure Authentication with Google OAuth 2.0 + Laravel Breeze +Laravel Sanctum
• Real-time Chat using Pusher WebSockets
• Message Management with edit and delete capabilities
• Pagination (10 messages per page)
• Filtering (filter messages by users)
• Clean architecture with Design patterns (Service Layer, Broadcast, Dependency Injection)
• Comprehensive Security with Middleware and Policies
• Extensive Testing with 80%+ coverage

User Interface

• Modern Design with Tailwind CSS
• Interactive Chat Interface with real-time updates
• Responsive Design for all devices
• Integrated User Profile with statistics

🛠️ Tech Used

🖥️ System Requirements

• Operating System: Windows 10+, macOS Monterey+, or any Linux distro
• Web Browser: Chrome / Firefox / Edge (latest versions)
• 📋Runtime & Tools:
  • PHP 8.1+ or higher
  • Composer
  • Node.js & NPM (for Vite)
  • PostgreSQL 14+ or higher
  • Pusher account for WebSocket (real-time chat)
  • Google Developer Account (for OAuth)

🔐 Implemented Protections

• CSRF Protection: Protection against Cross-Site Request Forgery attacks
• OAuth Validation: Validation of Google OAuth data
• Rate Limiting: Request rate limiting to prevent abuse
• Input Validation: Validation of all inputs
• Authorization Policies: Authorization policies to control access
• Soft Deletes: Safe deletion of messages with recovery capability

📸 Screenshots

⚡ Quick Installation

1. Clone the Repository

git clone <repository-url>
cd chat-api

2. Install Dependencies

composer install
npm install

3. Environment Setup

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

4. Database Setup

# Create database
sudo -u postgres createdb laravel_db
sudo -u postgres createuser postgres

# Update .env file
DB_CONNECTION=pgsql
DB_HOST=127.0.0.1
DB_PORT=5432
DB_DATABASE=laravel_db
DB_USERNAME=postgres
DB_PASSWORD=123456

5. Google OAuth Setup

1. Go to Google Cloud Console
2. Create a new project or select existing one
3. Enable Google+ API
4. Create OAuth 2.0 credentials
5. Add credentials to .env:

GOOGLE_CLIENT_ID=your_google_client_id
GOOGLE_CLIENT_SECRET=your_google_client_secret
GOOGLE_REDIRECT_URL=/auth/google/callback

6. Pusher Setup

1. Go to Pusher Dashboard
2. Create a new app
3. Add credentials to .env:

BROADCAST_DRIVER=pusher
PUSHER_APP_ID=your_app_id
PUSHER_APP_KEY=your_app_key
PUSHER_APP_SECRET=your_app_secret
PUSHER_APP_CLUSTER=your_app_cluster


### 7. Run Migrations and Seeders
```bash
php artisan migrate --seed

8. Build Assets

# for development
npm run dev

# for production
npm run build

🚀 Running the Application

Start the Main Server

php artisan serve --host=0.0.0.0 --port=8000

Run Vite (for development)

npm run dev

Access the Application

• Frontend: http://localhost:8000
• API: http://localhost:8000/api
• Pusher: Works via cloud service or local server

📱 Using the Interface

1. Landing Page

• Go to http://localhost:8000
• Click "Get Started" "Login" or "Sign up"

2. Login

• Go to http://localhost:8000/login
• Click "Login with Google"
• Complete the authentication process

2. Chat

• You'll be automatically redirected to the chat page
• Type your message and press Enter to send
• Watch messages appear in real-time

3. Profile

• Click on your email in the top bar
• Select "Profile"
• Manage your profile details

🏗️ Project Structure

📁 chat-api/
├── 📁 app/
│   ├── 📁 Events/
│   │   └── MessageSent.php                      # Message sent event
│   │   └── MessageUpdated.php                   # Message updated event
│   │   └── MessageDeleted.php                   # Message deleted event
│   ├── 📁 Http/
│   │   ├── 📁 Controllers/
│   │   │   ├── 📁 Api       
│   │   │   │   └── MessageController.php        # Message controller
│   │   │   ├── 📁 Auth                         # Breeze auth controllers 
│   │   │   |   ├── AuthenticatedSessionController.php
│   │   │   |   ├── ConfirmablePasswordController.php
│   │   │   |   ├── EmailVerificationNotificationController.php
│   │   │   |   ├── EmailVerificationPromptController.php
│   │   │   |   ├── NewPasswordController.php
│   │   │   |   ├── PasswordController.php
│   │   │   |   ├── PasswordResetLinkController.php
│   │   │   |   ├── RegisteredUserController.php
│   │   │   |   └── VerifyEmailController.php
│   │   │   ├── Controller.php                  # Base controller
│   │   │   ├── OAuthController.php             # Google OAuthentication controller
│   │   │   └── ProfileController.php           # Profile controller
│   │   └── 📁 Requests/                       # Breeze form requests
│   │       ├── 📁 Auth/LoginRequest.php
│   │       ├── UpdateMessageRequest.php          #Message update validation
│   │       ├── StoreMessageRequest.php           #Message creation validation
│   │       └── ProfileUpdateRequest.php
|   |
│   ├── 📁 Models/
│   │   ├── Message.php                  # Message model
│   │   └── User.php                     # User model
│   ├── 📁 Policies/
│   |   └── MessagePolicy.php            # Message policies
│   ├── 📁 Providers/
│   |   └── AppServiceProvider.php            
│   ├── 📁 Services/
│   |   └── MessageService.php           # Message service
│   └── 📁 Views/Components/
│       ├── AppLayout.php            
│       └── GuestLayout.php           
├── 📁 bootstrap/
├── 📁 config/
├── 📁 database/
│   ├── 📁 factories/
│   │   ├── UserFactory.php              # Uer factory for tests
│   │   └── MessageFactory.php           # Message factory for tests
│   ├── 📁 migrations/                   # DB migrations (messages, users)
│   └── 📁 seeders/                     # Data seed
├── 📁 public/                          # Web server entry point and static assets│
├── 📁 resources/
│   ├── 📁 views/
│   │   ├── 📁 auth/                   # Breeze login/register pages
│   │   ├── 📁 components/                   # Breeze blade components
│   │   ├── 📁 layouts/                   # Laravel Application Layouts 
│   │   ├── 📁 profile/                   # Breeze profile pages 
│   │   ├── chat.blade.php              # Real-time chat UI
│   │   └── home.blade.php               # Landing/home page
│   └── 📁 css/, js/             # Frontend assets (Tailwind, Chat setup js)
│
├── 📁 routes/
│   ├── api.php                     # API routes (messages, etc.)
│   ├── auth.php                    # Breeze authentication routes (loing, register, etc.)
│   ├── web.php                     # Web routes (landing, chat page)
│   └── channels.php                # Broadcast channel definitions
│
├── 📁 storage/                    # Logs, cache, sessions – uploads via `php artisan storage:link`
├── 📁 tests/
│   ├── 📁 Feature/                      # Feature tests
│   └── 📁 Unit/                         # Unit tests
│   │   ├── MessageApiTest.php            # Message API tests 
│   │   ├── MessageTest.php               # Message unit tests
│   │   └── OauthTest.php                # Authentication tests
├── 📄 README.md                         # Comprehensive project guide
├── 📄 QUICK_START_GUIDE.md              # Quick Start Guide
└── 📄 PROJECT_SUMMARY.md                # Project summary

🔌 API Endpoints

Authentication

GET /auth/google                 # Start OAuth
GET /auth/google/callback        # Handle Google response
POST /api/auth/logout           # Logout
GET /api/auth/user              # Get user info

Authentication

Method	Path	Description
GET	/auth/google/redirect	Redirect to Google OAuth
GET	/auth/google/callback	Handle Google OAuth response
POST	/api/logout	Logout API User
GET	/api/user	Get authenticated user data

Messages

Method	Path	Description
GET	/api/messages	Get list of messages (with pagination)
GET	/api/messages?filter_user=1	Get list of messages filtered by user (with pagination)
POST	/api/messages	Send a new message
GET	/api/messages/{id}	Get a specific message
PUT	/api/messages/{id}	Update a message (owner only)
DELETE	/api/messages/{id}	Delete a message (owner only)

Example API Usage

Fetch Messages

curl -H "Authorization: Bearer YOUR_TOKEN" \
     -H "Accept: application/json" \
     http://localhost:8000/api/messages?page=1

Send Message

curl -X POST \
     -H "Authorization: Bearer YOUR_TOKEN" \
     -H "Content-Type: application/json" \
     -H "Accept: application/json" \
     -d '{"content":"Hello World!"}' \
     http://localhost:8000/api/messages

🔄 Pusher Integration

The project has been updated to use Pusher with Vanilla JavaScript instead of jQuery for better performance and smaller bundle size.

New Features

• Direct connection to Pusher cloud servers
• Improved performance with vanilla JavaScript
• Smaller bundle size without jQuery
• Enhanced error handling

Required Configuration

# Pusher Configuration
BROADCAST_DRIVER=pusher
PUSHER_APP_ID=2b4e8601a292cbff3019
PUSHER_APP_KEY=2b4e8601a292cbff3019
PUSHER_APP_SECRET=your_app_secret
PUSHER_APP_CLUSTER=ap2

# Vite Environment Variables
VITE_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
VITE_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"

Supported Events

• new.message - New message received
• updaed.message - Message updated
• deleted.message - Message deleted

For more details, see Pusher Documentation.

🧪 Testing

Run All Tests

php artisan test

Run Specific Test Suite

# Run all tests
php artisan test

# Run specific tests
php artisan test --filter=MessageTest

Test Coverage

php artisan test --coverage

🚀 Deployment

Production Environment Variables

APP_ENV=production
APP_DEBUG=false
APP_URL=https://your-domain.com

# Database
DB_CONNECTION=pgsql
DB_HOST=your-db-host
DB_DATABASE=your-db-name
DB_USERNAME=your-db-user
DB_PASSWORD=your-db-password

# Pusher (Production)
PUSHER_APP_ID=your_production_app_id
PUSHER_APP_KEY=your_production_app_key
PUSHER_APP_SECRET=your_production_app_secret
PUSHER_APP_CLUSTER=your_production_cluster

# Google OAuth (Production)
GOOGLE_CLIENT_ID=your_production_client_id
GOOGLE_CLIENT_SECRET=your_production_client_secret
GOOGLE_REDIRECT_URL=https://your-domain.com/auth/google/callback

Deployment Steps

# Install dependencies
composer install --optimize-autoloader --no-dev

# Build assets
npm run build

# Optimize Laravel
php artisan config:cache
php artisan route:cache
php artisan view:cache

# Run migrations
php artisan migrate --force

🤝 Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Laravel Framework
• Pusher Real-time Service
• Tailwind CSS
• Google OAuth
• PostgreSQL Database

📞 Support and Assistance

Getting Help

• README.md: For basic instructions
• GitHub Issues: Create an issue in the repository

Contact Information

• Developer: Abdulrahman Fadhl
• Email: abdulrahmanfadhl@gmail.com
• Repository: GitHub Repository

---

🎉 Conclusion

The Laravel Chat API project has been successfully completed according to all specified requirements. The project is ready for use in a production environment and includes:

• ✅ Complete Chat API
• ✅ Real-time Message Broadcasting
• ✅ Secure Authentication via Google OAuth
• ✅ Comprehensive Protection against security threats
• ✅ Comprehensive Tests to ensure quality
• ✅ Complete Documentation for use and deployment

This project follows best practices in modern API development and provides a strong foundation for building advanced chat applications.

Note: This project is designed for educational and development purposes. Make sure to implement proper security measures before deploying to production.

Completion Date: July 13, 2025 Developer: Abdulrahman Fadhl Status: Completed ✅ Version: 1.0.0
Ready for Deployment: Yes ✅