This app uses TDLib/tdweb as an MTProto Layer 105 implementation and works through secure WebSockets. No other third-party libraries are used.

The approach of React-inspired Functional Components written in JSX is taken for the UI design. The app has its own implementation of Virtual DOM with incremental updates which is connected with MTProto by the global state manager inspired by ReactN.

The mingzipped source code is 37 kb.

Features list:

— Auth error handling
— Cloud password (2FA) support
— Infinite scroll for chats and messages
— Previously open chats with scroll position are cached
— Sending messages
— Receiving incoming messages
— Updates for: delivery/read message statuses, chat unread counters, pinned chats, online user statuses
— Grouping messages by date, sender and time
— Sticky date separator
— Message content: support for replies, forwarded, emoji-only messages
— Message content: preview for images and emoji-placeholders for stickers
— Message content: support for line breaks and links
— The last open chat persists between app launches
— Various date formats for chats and messages
— The right column for users and groups is partly implemented

Приложение построено на tdweb, что приводит в большому объему изначально загружаемого кода и медленной работе в целом. Transferred size: 2.6MB. Библиотека используется неправильно – UI отрисовывается только после полной загрузки wasm. В дальнейшем необходимо уделить внимание оптимизации. Использование teact.

Отметим, что на последнем этапе регистрации происходит переадресация на экран с бесконечной загрузкой.

Приложение не полностью соответствует предоставленному дизайну, некоторые кнопки ломаются, заменяясь символами.

Из прочих недостатков:

– Некорректная анимация мартышки;
– Страной по умолчанию выбрана Россия;
– Периодически возникает ошибка 'Invalid code' при верном коде;
– Поиск по странам не реализован;
– При редактировании номера сбрасывается вся информация (страна и номер целиком);
– При обновлении страницы на этапе ввода кода иногда пропадает введённый номер.
– Возможно смешивание историй нескольких чатов при переходе по нескольким чатам подряд.
____________
Upd. Приносим извинения за неточность формулировок. Исходный код реализации teact не был включен в архив, хотя может быть получен с помощью source map работы. Этот же подход использован в другом приложении в рамках конкурса (#1099). Однако основными проблемами работы остаются большой объём изначально загружаемого кода, невысокая скорость и критичный недочёт со смешиванием сообщений из нескольких чатов.

Upd 2. Teact не повлиял на итоговое место работы. Если бы из-за него работа получила штрафные баллы, она оказалась бы на четвёртом месте.

As I see in source code, you use React but name it teact.

From Requirement:

For avoidance of doubt, using UI frameworks such as React and Angular is not allowed.

If I dont right just say it

Cmn react guys)

Probably winning solution

The main page should load instantly, without locks and spinners.

I see that Shiny Yak's solution here https://contest.com/javascript-web/entry1099 is using the same `teact` lib implementation as you do. Is it just the same person submitting twice?

There is no ability to enter country manually

A great job well done! Congrats!

Messages are not being marked as read

Files sent are shown as %MEDIA_CONTENT% rather than files

Too slow loading wait 15 sec and exit

Very slow to load (wasm is huge).
Incorrect geolocation or just preselected Russia there.
Doesn't let you clear phone code (you have to look for your country in select above).
There's no autocomplete for country, you just have to scroll and scroll.

The page for entering the phone number the same as in this app https://contest.com/javascript-web/entry1099. There is no possibility to check other pages.

Enter phone number, go to the second screen with a code entering, click edit, go back to the first screen. Phone number is being reset

Really slowly loading. Logout does not work correctly. If you refresh the page after log out it will download all the resources that you used before. Not secure

Infinitie spinner..

I entered a long and invalid phone number here's what I got:

20 seconds of loading, but UI is very good and also have a lot of nice features. Monkey as png is not really cool and bundle size is more then 8mb

Is this an alert box?

Also, the monkey does not track input.

wrong icons

You take the react-telegram and delete the unnecessary code. It's amazing. You didn't even waste time and rename functions or somehow try to refactor them.

https://github.com/evgeny-nadymov/telegram-react/blob/d8f4ceba06f4d48b3594469e30c51772d3a06a11/src/Utils/File.js#L1600