Telegram Web Z

Deployment	Testing

This project won the first prize 🥇 at Telegram Lightweight Client Contest and now is an official Telegram client available to anyone at web.telegram.org/z.

According to the original contest rules, it has nearly zero dependencies and is fully based on its own Teact framework (which re-implements React paradigm). It also uses a custom version of GramJS as an MTProto implementation.

The project incorporates lots of technologically advanced features, modern Web APIs and techniques: WebSockets, Web Workers and WebAssembly, multi-level caching and PWA, voice recording and media streaming, cryptography and raw binary data operations, optimistic and progressive interfaces, complicated CSS/Canvas/SVG animations, reactive data streams, and so much more.

Feel free to explore, provide feedback and contribute.

Local setup

cp .env.example .env

npm i

Obtain API ID and API hash on my.telegram.org and populate the .env file.

Dev mode

npm run dev

Immedia

The Immedia React component connects to the homonymous' presence aware system which displays the user and participants webcam screenshots every few seconds.

Immedia can be enabled by clicking the Enable Awareness button as shown below.

This component can be disabled as well by clicking the Disable Awareness button.

Dev Note: An env variable needs to be added to your .env file to enable Immedia with the IMMEDIA_ROOM_ID variable corresponding to the chat id of the group/chat you want to enable. For example: IMMEDIA_ROOM_ID=-1188795392.

Invoking API from console

Start your dev server and locate GramJS worker in console context.

All constructors and functions available in global GramJs variable.

Run npm run gramjs:tl full to get access to all available Telegram requests.

Example usage:

await invoke(new GramJs.help.GetAppConfig())

Bug reports and Suggestions

If you find an issue with this app, let Telegram know using the Suggestions Platform.