Kabila StreamChat Frontend Demo

A complete React application that integrates StreamChat with the Kabila backend, providing a modern user interface for sending messages, creating chat groups, and managing users in real-time.

🚀 Features

• Modern React interface with responsive design
• Complete integration with StreamChat
• Real-time chat with instant messages
• Group creation with intuitive interface
• User management with authentication
• Backend service for integration with Kabila
• TypeScript with strict typing
• Centralized configuration and easy to use

📁 Project Structure

kabila-streamchat-frontend-demo/
├── src/
│   ├── components/
│   │   ├── LoginForm.tsx          # Login form
│   │   └── CreateGroupModal.tsx    # Modal to create groups
│   ├── hooks/
│   │   └── useStreamChat.ts       # Custom hook for StreamChat
│   ├── services/
│   │   ├── BackendService.ts      # HTTP calls to backend
│   │   ├── StreamChatService.ts   # StreamChat management
│   │   ├── UserService.ts         # User management
│   │   └── KabilaBackendService.ts # Specific Kabila service
│   ├── types/
│   │   └── index.ts               # TypeScript interfaces
│   ├── App.tsx                    # Main React component
│   ├── main.tsx                   # React entry point
│   ├── index.css                  # Global styles
│   ├── demo.ts                    # Complete functional demo
│   └── index.ts                   # Entry point
├── index.html                     # Main HTML
├── vite.config.ts                 # Vite configuration
├── package.json
├── tsconfig.json
├── src/config.ts                  # Centralized configuration
└── README.md

🛠️ Installation

1. Clone the repository

   git clone <repository-url>
   cd kabila-streamchat-frontend-demo

2. Install dependencies

   npm install

3. Configure credentials

   Edit the src/config.ts file with your credentials:

   export const CONFIG = {
     // Backend Configuration
     backend: {
       baseUrl: "http://localhost:5004/api", // Your backend URL
       apiKey: "1234", // Your backend API key
     },
   
     // StreamChat Configuration
     streamChat: {
       apiKey: "your_stream_api_key_here", // Your StreamChat API key
       apiSecret: "your_stream_api_secret_here", // Your StreamChat API secret
     },
     // ... rest of configuration
   };

🎯 Usage

Run the React Application

npm run react:dev

The application will automatically open at http://localhost:3000

Other Available Commands

npm run react:dev      # Development with hot reload
npm run react:build    # Build for production
npm run react:preview  # Preview of the build
npm run demo          # Console demo (Node.js)
npm run start         # Console application
npm run dev           # Console development mode
npm run build         # Compile TypeScript

🔧 Services

KabilaBackendService

Handles all HTTP calls to the Kabila backend using exact endpoints:

• GET /plazas/:plazaId/chat_groups - Get all groups
• GET /plazas/:plazaId/chat_groups/:id - Get specific group
• POST /plazas/:plazaId/chat_groups - Create new group
• PATCH /plazas/:plazaId/chat_groups/:id - Update group
• DELETE /plazas/:plazaId/chat_groups/:id - Delete group
• POST /plazas/:plazaId/login - User login (returns token)

StreamChatService

Manages StreamChat integration:

• Create users in StreamChat
• Generate authentication tokens
• Connect users
• Create and manage channels
• Send messages
• Manage members

UserService

Handles user management:

• User registration
• Profile updates
• Authentication
• Data validation
• Conversion to StreamChat format

📋 Demo Flow

The demo executes the following steps:

1. Connectivity verification - Verifies backend and StreamChat
2. User registration - Creates a user in the system
3. Group creation - Creates a chat group in the backend
4. StreamChat configuration - Configures user in StreamChat
5. Channel creation - Creates channel in StreamChat
6. Conversation simulation - Sends test messages
7. Final statistics - Shows demo summary

🔍 Logging and Debugging

The demo includes detailed logging to facilitate debugging:

• ✅ Successful operations
• ⚠️ Warnings and fallbacks
• ❌ Detailed errors
• 📊 Statistics and metrics

🛡️ Error Handling

• Automatic fallback when backend is not available
• Data simulation to continue the demo
• Robust handling of network errors
• Detailed logging for debugging

🔧 Advanced Configuration

Environment Variables

Variable	Description	Required
BACKEND_BASE_URL	Kabila backend URL	Yes
BACKEND_API_KEY	Backend API key	Yes
STREAM_API_KEY	StreamChat API key	Yes
STREAM_API_SECRET	StreamChat API secret	Yes
DEMO_PLAZA_ID	Plaza ID for the demo	No
DEMO_USER_ID	User ID for the demo	No
DEMO_USER_NAME	User name for the demo	No
DEMO_USER_EMAIL	User email for the demo	No
LOG_LEVEL	Logging level	No

TypeScript

The project uses TypeScript with strict configuration:

• Strict types enabled
• Type checking at compile time
• Well-defined interfaces
• Typed error handling

🚨 Troubleshooting

Backend Connection Error

⚠️ Backend not available, continuing in simulation mode

Solution: Verify that the backend is running and the URL is correct.

StreamChat Error

❌ Error initializing StreamChat: Invalid API key

Solution: Verify that StreamChat credentials are correct.

TypeScript Compilation Error

error TS2307: Cannot find module 'stream-chat'

Solution: Run npm install to install dependencies.

🤝 Contributing

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

📄 License

This project is licensed under the ISC License. See the LICENSE file for more details.

📞 Support

For support and questions:

• 📧 Email: support@kabila.com
• 📱 Discord: Kabila Community
• 📖 Documentation: docs.kabila.com

🎉 Acknowledgments

• StreamChat for the excellent chat API
• TypeScript for the type system
• Node.js for the JavaScript runtime

---

Enjoy building with Kabila! 🚀