telegram-react
Experimental Telegram web client with tdlib, webassembly and react js under the hood
Top Related Projects
Telegram Desktop messaging app
Telegram web application, GPL v3
Telegram for Android source
Source code of Telegram for macos on Swift 5.0
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:
-
Clone the repository:
git clone https://github.com/evgeny-nadymov/telegram-react.git
-
Navigate to the project directory:
cd telegram-react
-
Install dependencies:
npm install
-
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
-
Start the development server:
npm start
-
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
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.
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.
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 designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
Telegram Web App
Interface
Technical details
The app is based on the ReactJS JavaScript framework and TDLib (Telegram Database library) compiled to WebAssembly. Try it here.
Running locally
- Obtaining Telegram api keys.
Please visit this page for details.
- Setup .env file.
Manually copy Telegram api keys from previous step into REACT_TELEGRAM_API_ID and REACT_TELEGRAM_API_HASH at .env file.
-
Install node.js & npm. Probably, you should use nvm.
-
Install dependencies.
npm ci
All TDLib files will be installed into node_modules/tdweb/dist/ folder.
- Manually copy TDLib files into the public folder.
cp node_modules/tdweb/dist/* public/
- Run the app in development mode.
npm run start
Open http://localhost:3000 to view it in the browser.
Deploying to GitHub Pages
- Obtaining Telegram api keys.
Please visit this page for details.
- Setup .env file.
Manually copy Telegram api keys from previous step into REACT_TELEGRAM_API_ID and REACT_TELEGRAM_API_HASH at .env file.
- 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"
- Generate a production build of your app and deploy it to GitHub Pages.
npm run deploy
Running in a Docker container
- Obtaining Telegram api keys.
Please visit this page for details.
- 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
Top Related Projects
Telegram Desktop messaging app
Telegram web application, GPL v3
Telegram for Android source
Source code of Telegram for macos on Swift 5.0
Telegram for Windows
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot