The front-end of the sticker catalog is built using React. The initial version, released over a year ago, was built using the outdated Create React App (CRA) framework.
Currently, it is being rewritten using Vite and other updated dependencies.
On the main page, there is a search bar, a menu, and a list of sticker packs. Currently, the menu consists of three categories, but in the future, there are plans to add a separate tab for emoji packs and also a tab for user-added sticker packs.
For each sticker pack, users can leave reactions, and for admins, there are moderation buttons available. The AI-based filter works very well, but there are still plans to add the option to report sticker sets in the future.
When clicking on a sticker pack, a page dedicated to it opens up, and at the bottom, there is a list of similar sticker packs that may interest the user. Additionally, there is a "Share" button. Upon clicking it, a link to the sticker pack's page in the catalog is copied to the clipboard for easy sharing.
To interact with Telegram, the application uses @twa-dev/sdk, specifically the BackButton from @twa-dev/sdk/react
For user identification, the application uses WebApp.initData.
The WebApp.initDataUnsafe.start_param is required for opening sticker packs via links.
WebApp.HapticFeedback is employed for tactile interaction with users on mobile devices.
Effector is used as the state manager, along with Patronum, which provides many useful features on top of Effector.
For routing, Atomic Router, built on top of Effector, is used.
To create an infinite list of stickers, React Virtualized is employed.
Additionally, the project has transitioned from lacking architecture to adopting Feature-Sliced Design.
For working with animated stickers, code from tweb, telegram-tt