A modern Discord-like application built with Flutter, Serverpod, and LiveKit for real-time communication and live streaming capabilities. This project is based on the Discord redesign concept by Juxtopposed.

• YouTube Video: https://youtu.be/byOv5MXwN58
• Medium Article: https://medium.com/@rawahamuhammad8/i-built-a-redesigned-discord-with-flutter-serverpod-e8f3bf3e6d42

• Real-time Chat: Instant messaging with support for text channels
• Voice & Video Calls: Live streaming with WebRTC technology
• Server Management: Create and manage Discord-like servers
• User Authentication: Secure email-based authentication system
• Cross-platform: Works on mobile (iOS/Android), desktop (macOS), and web
• Modern UI: Dark theme with Discord-inspired design
• Live Streaming: High-quality video calls with screen sharing
• Channel Management: Text and voice channels within servers
• Responsive Design: Optimized for all screen sizes

This project follows a clean architecture pattern with three main components:

• Framework: Flutter with Dart
• State Management: BLoC (Business Logic Component) pattern
• Navigation: Auto Route for type-safe navigation
• UI: Custom Discord-inspired components
• Dependencies:
  • flutter_bloc for state management
  • auto_route for navigation
  • livekit_client for video calls
  • flutter_webrtc for WebRTC functionality
  • freezed for immutable data classes

• Framework: Serverpod (Dart-based backend)
• Authentication: Serverpod Auth with email
• Real-time: WebSocket connections for live updates
• Live Streaming: LiveKit integration for video calls & screen share
• API: RESTful endpoints with type-safe client generation

• Purpose: Type-safe client for server communication
• Generation: Auto-generated from Serverpod backend
• Features: Automatic serialization/deserialization

Before running this project, ensure you have the following installed:

• Dart SDK: >=3.3.0 <4.0.0
• Flutter SDK: >=3.19.0
• LiveKit Server: For video calling functionality

git clone <repository-url>
cd discord_open

First, start the backend server as it's required for the Flutter app to function:

cd discord_server

# Install dependencies
dart pub get

# Start database
docker-compose up --build --detach

# Create migration
serverpod create-migration

# Apply migrations on server
dart bin/main.dart --apply-migrations --role=maintenance

# After every change you make to the server-side code, you need to run 
serverpod generate

# Run the server
dart run bin/main.dart

The server will start on http://localhost:8080 by default.

cd discord_flutter

# Install Flutter dependencies
flutter pub get

# Generate freezed files (required for cubit states)
dart run build_runner build -d

# Run the application
flutter run

class Configs {
  static const String serverUrl = 'http://localhost:8080';
  static const String liveKitUrl = 'wss://your_livekit_server.com';
}

1. Start the Backend:

   cd discord_server
   //run docker
   docker-compose up --build --detach
   //apply migrations on server
   dart bin/main.dart --apply-migrations --role=maintenance
   //generate 
   serverpod generate
   //run server
   dart run bin/main.dart

2. Start the Frontend:

   cd discord_flutter
   flutter pub get
   dart run build_runner build -d
   flutter run

3. Access the Application:

   • Mobile: Use Flutter's hot reload for development
   • Web: Open the provided link from the Debug Console
   • macOS: The app will open in a native window

1. Create an Account: Use email authentication to sign up
2. Join/Create Servers: Start by creating your first server
3. Create Channels: Add text and voice channels to your server
4. Start Chatting: Send messages in text channels
5. Join Voice Calls: Click on voice channels to start video calls

• ✅ iOS (iPhone/iPad)
• ✅ Android (Phone/Tablet)
• ✅ macOS (Desktop)
• ✅ Web (Browser)

discord_open/
├── discord_flutter/          # Flutter frontend application
│   ├── lib/
│   │   ├── application/      # Business logic (BLoC)
│   │   ├── infrastructure/   # Data layer (repositories)
│   │   ├── presentation/     # UI layer (screens, widgets)
│   │   └── configs.dart      # Configuration
│   └── assets/              # Images, icons, mock data
├── discord_server/           # Serverpod backend
│   ├── lib/
│   │   ├── src/
│   │   │   ├── endpoints/    # API endpoints
│   │   │   ├── models/       # Data models
│   │   │   └── generated/    # Auto-generated code
│   │   └── server.dart       # Server configuration
│   └── migrations/          # Database migrations
└── discord_client/          # Generated client code

• Frontend: Flutter, BLoC, Auto Route, LiveKit Client
• Backend: Serverpod, PostgreSQL, LiveKit Server
• Real-time: WebSockets, WebRTC
• State Management: BLoC pattern
• Code Generation: Freezed, Build Runner

# Database Management
docker-compose down -v          # Clear database
docker-compose up --build --detach  # Start database

# Server Management
dart bin/main.dart --apply-migrations --role=maintenance  # Apply migrations on server
serverpod create-migration      # Create migration
serverpod generate             # Generate server code
dart run bin/main.dart         # Run server

# Flutter Development
dart run build_runner build -d  # Generate freezed files
dart run build_runner watch     # Watch for changes and regenerate
dart run build_runner clean     # Clean generated files

# Testing & Code Quality
flutter test                    # Run tests
dart format .                   # Format code
dart analyze                    # Analyze code

# Run Flutter tests
cd discord_flutter
flutter test

# Run server tests
cd discord_server
dart test

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

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

If you encounter any issues or have questions:

1. Check the Issues page
2. Create a new issue with detailed information
3. Join our Discord server for community support

Have questions, need support, or want to collaborate and discuss future ideas? Join our Discord community!

Click here to join the Discord server

I'm actively providing support for this project and am open to collaboration and new ideas from the community.

If you find this project helpful or want to support my work, you can buy me a coffee!

Buy Me a Coffee

• Serverpod team for the amazing backend framework
• LiveKit for real-time video calling capabilities
• Flutter team for the cross-platform framework
• Juxtopposed for the UI/UX inspiration

Note: This is a Discord clone for educational purposes. Please respect Discord's terms of service and trademarks.