Convert Figma logo to code with AI

evgeny-nadymov logotelegram-react

Experimental Telegram web client with tdlib, webassembly and react js under the hood

2,293
601
2,293
199

Top Related Projects

25,848

Telegram Desktop messaging app

Telegram web application, GPL v3

24,740

Telegram for Android source

Source code of Telegram for macos on Swift 5.0

3,809

Telegram for Windows

Quick Overview

Telegram-react is an open-source web application that provides a React-based interface for the Telegram messaging platform. It aims to offer a feature-rich, responsive, and user-friendly experience for Telegram users directly in their web browsers.

Pros

  • Built with React, offering a modern and efficient user interface
  • Supports most core Telegram features, including chats, groups, and media sharing
  • Open-source, allowing for community contributions and customizations
  • Cross-platform compatibility, accessible from any device with a web browser

Cons

  • May lack some advanced features available in the official Telegram clients
  • Dependent on Telegram's API, which could lead to potential limitations or changes
  • Requires ongoing maintenance to keep up with Telegram's evolving features and protocols
  • May have performance issues with large numbers of chats or media files

Getting Started

To set up and run the telegram-react project locally:

  1. Clone the repository:

    git clone https://github.com/evgeny-nadymov/telegram-react.git
    
  2. Navigate to the project directory:

    cd telegram-react
    
  3. Install dependencies:

    npm install
    
  4. Create a .env file in the root directory and add your Telegram API credentials:

    REACT_APP_TELEGRAM_API_ID=your_api_id
    REACT_APP_TELEGRAM_API_HASH=your_api_hash
    
  5. Start the development server:

    npm start
    
  6. Open your browser and navigate to http://localhost:3000 to view the application.

Note: You'll need to obtain Telegram API credentials from https://my.telegram.org to use this application.

Competitor Comparisons

25,848

Telegram Desktop messaging app

Pros of tdesktop

  • Native desktop application with better performance and system integration
  • Supports more features of the Telegram platform, including voice calls and secret chats
  • Larger and more active development community, resulting in frequent updates and improvements

Cons of tdesktop

  • Steeper learning curve for contributors due to C++ codebase
  • Larger codebase and more complex architecture compared to the React-based alternative
  • Requires compilation for different platforms, which can be more time-consuming

Code Comparison

telegram-react (JavaScript/React):

const ChatInfo = ({ chatId, onClose }) => {
  const chat = useChatStore(chatId);
  return (
    <div className="chat-info">
      <ChatAvatar chat={chat} />
      <ChatTitle chat={chat} />
      <CloseButton onClick={onClose} />
    </div>
  );
};

tdesktop (C++):

void ChatInfoBox::prepare() {
    auto chat = _peer->asChat();
    setTitle(tr::lng_info_group_title());
    addButton(tr::lng_close(), [this] { closeBox(); });
    setupContent();
}

The code snippets demonstrate the difference in language and approach between the two projects. telegram-react uses a functional component with React hooks, while tdesktop employs C++ classes and methods for UI construction.

Telegram web application, GPL v3

Pros of Webogram

  • Longer development history and more mature codebase
  • Supports a wider range of browsers, including older versions
  • Implements more Telegram features and has better compatibility with the official clients

Cons of Webogram

  • Uses older technologies (AngularJS) which may be harder to maintain
  • Less active development and fewer recent updates
  • May have performance issues with large chats or media-heavy conversations

Code Comparison

Webogram (AngularJS):

$scope.showPeerInfo = function () {
  if ($scope.curDialog.peerID > 0) {
    $rootScope.$broadcast('userInfo.toggle', $scope.curDialog.peerID);
  } else if ($scope.curDialog.peerID < 0) {
    $rootScope.$broadcast('channelInfo.toggle', -$scope.curDialog.peerID);
  }
};

Telegram-react (React):

showChatInfo = () => {
    const { chatId } = this.props;
    const chat = ChatStore.get(chatId);
    if (!chat) return;

    openChatDetails(chat);
};

The code snippets demonstrate the different approaches and technologies used in each project. Webogram uses AngularJS with scopes and broadcasts, while Telegram-react utilizes React components and stores.

24,740

Telegram for Android source

Pros of Telegram

  • Native Android application, providing better performance and integration with the device
  • More mature and feature-complete, as it's the official Telegram client for Android
  • Larger user base and more frequent updates

Cons of Telegram

  • Limited to Android platform, unlike the cross-platform nature of telegram-react
  • Closed-source, making it difficult for community contributions and audits
  • Potentially slower adoption of new features compared to the more flexible web-based approach

Code Comparison

telegram-react (JavaScript):

const handleMessage = (message) => {
  if (message.content.type === 'text') {
    renderTextMessage(message.content.text);
  } else if (message.content.type === 'photo') {
    renderPhotoMessage(message.content.photo);
  }
};

Telegram (Java):

private void processMessage(TLRPC.Message message) {
    if (message.message != null) {
        processTextMessage(message);
    } else if (message.media instanceof TLRPC.TL_messageMediaPhoto) {
        processPhotoMessage(message);
    }
}

The code snippets show similar message handling logic, but with language-specific implementations. telegram-react uses JavaScript with a more functional approach, while Telegram uses Java with object-oriented patterns.

Source code of Telegram for macos on Swift 5.0

Pros of TelegramSwift

  • Native iOS development using Swift, providing better performance and integration with iOS ecosystem
  • Specifically tailored for iOS devices, offering a more polished user experience
  • Utilizes Swift's strong typing and safety features, potentially reducing runtime errors

Cons of TelegramSwift

  • Limited to iOS platform, lacking cross-platform compatibility
  • Smaller community and potentially slower development cycle compared to React-based projects
  • May require more specialized knowledge in Swift and iOS development

Code Comparison

TelegramSwift (Swift):

class TelegramViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        setupUI()
    }
}

telegram-react (JavaScript/React):

class TelegramComponent extends React.Component {
  componentDidMount() {
    this.setupUI();
  }
  render() {
    return <div>Telegram UI</div>;
  }
}

The code snippets demonstrate the different approaches in iOS native development versus React-based web development. TelegramSwift uses UIKit and Swift's object-oriented paradigm, while telegram-react utilizes React's component-based structure and JavaScript syntax.

3,809

Telegram for Windows

Pros of Unigram

  • Built with UWP (Universal Windows Platform), offering better integration with Windows features
  • More active development and frequent updates
  • Supports a wider range of Windows devices, including Xbox and HoloLens

Cons of Unigram

  • Limited to Windows platforms, reducing cross-platform compatibility
  • Potentially steeper learning curve for developers not familiar with UWP

Code Comparison

Unigram (C#):

public sealed partial class DialogPage : Page
{
    public DialogViewModel ViewModel => DataContext as DialogViewModel;
    
    public DialogPage()
    {
        InitializeComponent();
    }
}

Telegram-react (JavaScript):

class DialogDetails extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            prevChatId: 0
        };
    }
}

The code snippets showcase the different approaches:

  • Unigram uses C# and UWP-specific patterns
  • Telegram-react employs JavaScript and React components

Unigram's UWP focus allows for tighter Windows integration but limits its reach. Telegram-react offers broader platform support through web technologies but may lack some native features. Both projects aim to provide a Telegram client experience, with Unigram specializing in Windows and Telegram-react offering a more platform-agnostic solution.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

Telegram Web App

Interface

Sample screenshot

Technical details

The app is based on the ReactJS JavaScript framework and TDLib (Telegram Database library) compiled to WebAssembly. Try it here.

Running locally

  1. Obtaining Telegram api keys.

Please visit this page for details.

  1. Setup .env file.

Manually copy Telegram api keys from previous step into REACT_TELEGRAM_API_ID and REACT_TELEGRAM_API_HASH at .env file.

  1. Install node.js & npm. Probably, you should use nvm.

  2. Install dependencies.

npm ci

All TDLib files will be installed into node_modules/tdweb/dist/ folder.

  1. Manually copy TDLib files into the public folder.
cp node_modules/tdweb/dist/* public/
  1. Run the app in development mode.
npm run start

Open http://localhost:3000 to view it in the browser.

Deploying to GitHub Pages

  1. Obtaining Telegram api keys.

Please visit this page for details.

  1. Setup .env file.

Manually copy Telegram api keys from previous step into REACT_TELEGRAM_API_ID and REACT_TELEGRAM_API_HASH at .env file.

  1. Update homepage property at the app's package.json file.

Define its value to be the string https://{username}.github.io/{repo-name}, where {username} is your GitHub username, and {repo-name} is the name of the GitHub repository. Since my GitHub username is evgeny-nadymov and the name of my GitHub repository is telegram-react, I added the following property:

//...
"homepage": "https://evgeny-nadymov.github.io/telegram-react"
  1. Generate a production build of your app and deploy it to GitHub Pages.
npm run deploy

Running in a Docker container

  1. Obtaining Telegram api keys.

Please visit this page for details.

  1. Provide your Telegram api keys as build arguments.
docker build . --build-arg TELEGRAM_API_ID=0000000 --build-arg TELEGRAM_API_HASH=00000000000000000

The Docker build will perform all the necessary steps to get a working build of Telegram-React.

References

  1. Deploying a React App (created using create-react-app) to GitHub Pages
  2. Facebook's tutorial on deploying a React app to GitHub Pages