Skip to content
Umakhan PRO

Creating a Telegram Mini App with React

Cover Image

One day, my friend came up with the idea of creating a medical tool inside Telegram. Initially, we considered making a simple bot for medical tests, but then we decided to go further and create a full-fledged “Medical Assistant” inside Telegram. This assistant will test patients and calculate medical formulas. To achieve this, we decided to use Telegram’s relatively new feature — “Mini Apps”. This is a small website packaged into a bot. In this article, I’ll share the development stages with you.

Creating the Bot

To create a Mini App, you first need to create a regular bot on Telegram. To do this, go to @BotFather and enter the command /newbot, then enter the bot’s name and choose a login.

Creating a New Bot

Next, create the Mini App using the /newapp command.

Creating a New App

You need to link the previously created bot, fill in the application name, add an image, and specify the link to the application (website).

Filling in App Details

The publication of the Mini App in Telegram is complete.

Tech Stack

We used standard technologies:

  • HTML - markup
  • CSS (LESS) - styling
  • Framework7 - UI framework
  • React - component-based approach

Main Page

The main page contains blocks with links to tools and author pages.

Main Page

Under the hood:

Main Page Code

Hospital Anxiety and Depression Scale (HADS)

The first feature of our service is the ability to check anxiety and depression levels using a popular 14-question test. This test does not diagnose but can provide valuable information to your treating physician.

The essence of the test is that the patient answers 14 questions and selects the most appropriate answers. Each answer is scored from 0 to 3 points. The higher the score, the more pronounced the symptoms.

HADS Test Page

On the results page, you can see the anxiety and depression scales, as well as a description.

HADS Test Results

Example code for generating the result description:

Result Description Code

Glomerular Filtration Rate (GFR) Calculator

GFR Calculator GFR Calculator

Conclusion

This is just the beginning of the development of our service. We plan to enhance it by adding more tools, calculators, and other features to ease the work of medical professionals and their patients.

Link to the Mini App: https://t.me/umakhanpro_medical_bot/app