Devcord

A modern, real-time communication platform designed for developers, built with cutting-edge technologies and a focus on performance and scalability.

Description

Devcord is a Discord-inspired communication platform tailored for developers and teams. It provides real-time messaging, friend management, project collaboration, and seamless integration with developer tools like GitHub. Built as a full-stack application with a microservices architecture, Devcord offers a robust foundation for team communication and project management.

Features

Authentication & User Management

GitHub OAuth Integration - Seamless login with GitHub accounts
User Profiles - Customizable profiles with avatars, banners, and bio
Session Management - Secure authentication with NextAuth.js

Real-time Messaging

Instant Messaging - Real-time chat with Socket.IO
Message Reactions - React to messages with emojis
Message Editing & Deletion - Full message management capabilities
Typing Indicators - See when others are typing
File Attachments - Share images, videos, and documents
Message History - Persistent message storage

Social Features

Friend System - Send, accept, and manage friend requests
Direct Messages - Private conversations between users
Group Conversations - Multi-user chat rooms
Member Management - Add/remove members from conversations
Online Status - Real-time user presence indicators

Project Collaboration

Project Channels - Organized communication spaces
Channel Management - Create and manage different project channels
Team Collaboration - Built for developer teams and projects

User Experience

Dark Theme - Developer-friendly dark interface
Responsive Design - Works seamlessly across devices
Modern UI - Built with Tailwind CSS and Radix UI components
Emoji Support - Rich emoji picker and reactions
File Preview - In-app preview for images and videos

Developer Features

GitHub Integration - Connect with GitHub repositories
Developer Command Palette - Quick actions and navigation
Real-time Notifications - Stay updated with toast notifications

Technologies Used

Frontend

Next.js 15 - React framework with App Router
React 19 - Latest React with concurrent features
TypeScript - Type-safe development
Tailwind CSS - Utility-first CSS framework
Radix UI - Accessible component primitives
Socket.IO Client - Real-time communication
NextAuth.js - Authentication solution
Zustand - State management
React Hook Form - Form handling
Zod - Schema validation
ImageKit - Image optimization and management

Backend

Node.js - JavaScript runtime
Express.js - Web application framework
Socket.IO - Real-time bidirectional communication
TypeScript - Type-safe backend development

Database & Infrastructure

PostgreSQL - Primary database
Prisma - Database ORM and migrations
Redis - Caching and session storage
Apache Kafka - Message streaming and event processing

Development & Deployment

Turborepo - Monorepo build system
pnpm - Fast, disk space efficient package manager
Docker - Containerization
ESLint - Code linting
Prettier - Code formatting

Project Structure

devcord/
├── apps/
│   ├── frontend/                 # Next.js frontend application
│   │   ├── src/
│   │   │   ├── app/             # App Router pages and layouts
│   │   │   ├── components/      # Reusable UI components
│   │   │   ├── actions/         # Server actions
│   │   │   ├── providers/       # Context providers
│   │   │   ├── hooks/           # Custom React hooks
│   │   │   ├── lib/             # Utility libraries
│   │   │   └── utils/           # Helper functions
│   │   └── public/              # Static assets
│   │
│   └── backend/                 # Express.js backend application
│       ├── src/
│       │   ├── config/          # Configuration files
│       │   ├── events/          # Socket.IO event handlers
│       │   ├── services/        # Business logic services
│       │   └── utils/           # Backend utilities
│       └── dist/                # Compiled JavaScript
│
├── packages/
│   ├── node-prisma/             # Shared Prisma schema and types
│   │   ├── prisma/              # Database schema and migrations
│   │   └── src/                 # Shared types and actions
│   │
│   ├── eslint-config/           # Shared ESLint configurations
│   └── typescript-config/       # Shared TypeScript configurations
│
├── docker-compose.yml           # Development services
├── turbo.json                   # Turborepo configuration
├── pnpm-workspace.yaml          # pnpm workspace configuration
└── package.json                 # Root package configuration

Getting Started

Prerequisites

Docker and Docker Compose (recommended)
Node.js (v18 or higher) - if running without Docker
pnpm (v9.0.0 or higher) - if running without Docker

Quick Start with Docker (Recommended)

Clone the repository

git clone https://github.com/yourusername/devcord.git
cd devcord

Set up environment variables

cp .env.example .env.local
# Edit .env.local with your configuration

Start development environment
```
make dev
# or
docker-compose up --build
```

The application will be available at:

Frontend: http://localhost:3000
Backend: http://localhost:8000
PostgreSQL: localhost:5432
Redis: localhost:6379
Kafka: localhost:9092

Manual Installation (Without Docker)

Clone the repository

git clone https://github.com/yourusername/devcord.git
cd devcord

Install dependencies
```
pnpm install
```
Start development services
```
docker-compose up -d
```

Set up environment variables

Create .env files in the respective directories:

Frontend (apps/frontend/.env.local):

NEXTAUTH_SECRET=your-nextauth-secret
NEXTAUTH_URL=http://localhost:3000
AUTH_GITHUB_ID=your-github-client-id
AUTH_GITHUB_SECRET=your-github-client-secret
DATABASE_URL=postgresql://devcord:devcord@localhost:5432/devcord
IMAGEKIT_PUBLIC_KEY=your-imagekit-public-key
IMAGEKIT_PRIVATE_KEY=your-imagekit-private-key
IMAGEKIT_URL_ENDPOINT=your-imagekit-url-endpoint

Backend (apps/backend/.env):

DATABASE_URL=postgresql://devcord:devcord@localhost:5432/devcord
REDIS_URL=redis://localhost:6379
KAFKA_BROKERS=localhost:9092
CORS_ORIGIN=http://localhost:3000

Set up the database

cd packages/node-prisma
pnpm prisma migrate dev
pnpm prisma generate

Start the development servers
```
pnpm dev
```

The application will be available at:

Frontend: http://localhost:3000
Backend: http://localhost:8000

Available Scripts

pnpm dev - Start all applications in development mode
pnpm build - Build all applications for production
pnpm start - Start all applications in production mode
pnpm lint - Run ESLint across all packages
pnpm format - Format code with Prettier

Architecture

Devcord follows a modern microservices architecture:

Frontend: Next.js application with server-side rendering and static generation
Backend: Express.js API server with Socket.IO for real-time features
Database: PostgreSQL with Prisma ORM for type-safe database operations
Caching: Redis for session storage and real-time data
Message Queue: Apache Kafka for handling message streaming and event processing
Monorepo: Turborepo for efficient build and development workflows

API Documentation

Socket.IO Events

Conversation Events

conversation:message - Send/receive messages
conversation:typing - Typing indicators
conversation:edit-message - Edit messages
conversation:delete-message - Delete messages
conversation:react-message - Message reactions
conversation:add-members - Add members to conversation
conversation:remove-members - Remove members from conversation

Friend Events

friend:request - Send friend requests
friend:accept - Accept friend requests
friend:remove - Remove friends

Database Schema

The application uses PostgreSQL with Prisma ORM. Key models include:

User - User accounts and profiles
Account - OAuth account linking
Conversation - Chat rooms and direct messages
Message - Chat messages with attachments
FriendRequest - Friend relationship management
Project - Project workspaces
Reaction - Message reactions

Contributing

We welcome contributions! Please see our Contributing Guidelines for details.

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

Development Guidelines

Code Style

Use TypeScript for all new code
Follow ESLint and Prettier configurations
Write meaningful commit messages
Add tests for new features

Architecture Principles

Keep components small and focused
Use server actions for data mutations
Implement proper error handling
Follow React best practices

Deployment

Production Build

pnpm build
pnpm start

Docker Deployment

docker-compose -f docker-compose.prod.yml up -d

Environment Variables

Ensure all required environment variables are set in production:

Database connections
Authentication secrets
External service API keys
CORS origins

Troubleshooting

Docker Issues

Port conflicts

# Check if ports are in use
lsof -i :3000
lsof -i :8000
lsof -i :5432

Permission issues

# Fix script permissions
chmod +x scripts/*.sh

Database migration issues

# Run migrations manually
docker-compose exec devcord-dev pnpm --filter @devcord/node-prisma prisma:migrate:dev

Clean slate restart
```
make clean
make dev
```

Common Issues

Database Connection Issues
- Ensure PostgreSQL is running
- Check DATABASE_URL environment variable
- Run pnpm prisma migrate dev
Socket.IO Connection Problems
- Verify CORS settings
- Check Redis connection
- Ensure backend server is running
Build Errors
- Clear node_modules and reinstall
- Check TypeScript errors
- Verify environment variables

Performance Considerations

Database: Proper indexing on frequently queried fields
Caching: Redis for session and real-time data
Real-time: Socket.IO with Redis adapter for scaling
Images: ImageKit for optimization and CDN delivery
Build: Turborepo for efficient monorepo builds

Security

Authentication: Secure OAuth with NextAuth.js
Authorization: Role-based access control
Data Validation: Zod schemas for input validation
CORS: Properly configured cross-origin requests
Environment: Secure environment variable management

License

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

Acknowledgments

Inspired by Discord's user experience and design
Built with modern web technologies and best practices
Thanks to the open-source community for the amazing tools and libraries

Support

If you have any questions or need help, please:

Open an issue on GitHub
Join our community discussions
Check out the documentation

Built with ❤️ for developers, by developers

Name		Name	Last commit message	Last commit date
Latest commit History 63 Commits
.vscode		.vscode
apps		apps
packages		packages
scripts		scripts
.dockerignore		.dockerignore
.env.example		.env.example
.env.prod		.env.prod
.gitignore		.gitignore
.npmrc		.npmrc
.prettierrc.json		.prettierrc.json
Dockerfile		Dockerfile
Dockerfile.dev		Dockerfile.dev
Makefile		Makefile
README.md		README.md
docker-compose.prod.yml		docker-compose.prod.yml
docker-compose.yml		docker-compose.yml
nginx.conf		nginx.conf
package.json		package.json
pnpm-lock.yaml		pnpm-lock.yaml
pnpm-workspace.yaml		pnpm-workspace.yaml
tsconfig.json		tsconfig.json
turbo.json		turbo.json

vishal-kumar3/Devcord

Folders and files

Latest commit

History

Repository files navigation