Building a Daily Python Lesson Telegram Bot with Supabase and React

Introduction

Imagine a web application that sends users a short Python lesson every day through Telegram. With modern tools like Supabase and React, we can create this seamlessly — combining frontend, backend, and a Telegram bot. In this tutorial, we’ll walk through designing the application, creating the bot, integrating it with Supabase, and linking it to a React frontend.

Step 1: Designing the Application

Our sample application will be called PyDaily. Features include:

• Daily Python lessons delivered via Telegram.
• Users track progress on lessons in the app.
• Users can configure notifications (enable/disable, delivery time, Telegram username).

Database Tables:

lessons

create table public.lessons (
    id uuid primary key default gen_random_uuid(),
    day_index int not null unique,
    title text not null,
    content text,
    example_code text,
    challenge text,
    created_at timestamptz default now()
);

user_progress

create table public.user_progress (
    id uuid primary key default gen_random_uuid(),
    user_id uuid references auth.users(id) on delete cascade,
    lesson_id uuid references lessons(id) on delete cascade,
    completed boolean default false,
    completed_at timestamptz
);

user_notifications

create table public.user_notifications (
    id uuid primary key default gen_random_uuid(),
    user_id uuid references auth.users(id) on delete cascade,
    channel text not null,   -- 'telegram', 'email'
    enabled boolean default true,
    delivery_time time not null,
    timezone text default 'UTC',
    created_at timestamptz default now(),
    updated_at timestamptz default now()
);

user_telegram

create table public.user_telegram (
    id uuid primary key default gen_random_uuid(),
    user_id uuid references auth.users(id) on delete cascade unique,
    telegram_chat_id bigint,
    activation_code int not null,
    status text default 'pending', -- pending | connected
    created_at timestamptz default now(),
    updated_at timestamptz default now()
);

Step 2: Create a Telegram Bot

1. Open Telegram and search for BotFather.
2. Send /newbot and follow the instructions.
3. Give your bot a name, username, and receive the bot token.
4. Keep this token safe — it’s required to send messages via the Telegram API.

Test Your Bot

You can test sending a message with curl:

curl -X POST https://api.telegram.org/bot<YOUR_BOT_TOKEN>/sendMessage \
-d chat_id=<YOUR_CHAT_ID> \
-d text="Hello from PyDaily!"

Tip: Use @userinfobot to get your Telegram chat ID for testing.

Step 3: Supabase Backend Setup

Supabase will handle:

• Authentication
• Database storage
• Edge Functions (serverless backend)

1. Store Lessons

Use the lessons table to add daily Python lessons.

insert into public.lessons (day_index, title, content, example_code, challenge)
values
(1, 'Variables & Types', 'Introduction to Python variables', 'x = 5\ny = "Hello"', 'Write a program to swap two variables'),
(2, 'Control Flow', 'If, elif, else', 'if x > 5:\n    print("x is greater")', 'Write a function to check even/odd');

2. User Notification Setup

• Users can choose delivery channel (Telegram) and time.
• Add a user_telegram row for each user with a generated activation code.

3. Edge Function for Telegram

Create a Supabase Edge Function that:

1. Fetches users who have Telegram enabled.
2. Calculates which lesson to send today.
3. Checks user_progress to avoid duplicates.
4. Sends message to Telegram bot using the Bot API.
5. Updates user_progress.

Step 4: Frontend in React

Notification Settings Component:

• Telegram Username Input
• Enable/Disable Notifications
• Daily Reminder Time Picker
• Activation Code Display & Status

function NotificationSettings({ user }) {
  const [telegramUsername, setTelegramUsername] = useState('');
  const [activationCode, setActivationCode] = useState('');
  const [status, setStatus] = useState('pending');

  const generateCode = async () => {
    const { data } = await supabase.rpc('generate_telegram_activation_code');
    setActivationCode(data);
  };

  return (
    <div>
      <input 
        placeholder="Telegram Username"
        value={telegramUsername}
        onChange={e => setTelegramUsername(e.target.value)}
      />
      <button onClick={generateCode}>Generate Activation Code</button>
      <p>Status: {status}</p>
      {status === 'pending' && <p>Send this code to the bot: {activationCode}</p>}
    </div>
  );
}

• On submit, save user_notifications and user_telegram via Supabase API.
• React fetches lesson history to show user progress.

Step 5: Connecting Everything

1. User enters Telegram username in frontend.
2. Backend generates activation code (RPC).
3. User sends code to bot → backend webhook validates → updates status = connected.
4. Daily lesson scheduler Edge Function runs:

// Pseudocode
for each user in user_notifications where channel='telegram' and enabled=true:
    lesson = getLessonForToday(user)
    if !user_progress.completed:
        sendTelegram(user.telegram_chat_id, lesson.content)
        markLessonCompleted(user, lesson)

• Can schedule via Supabase cron or external service.
• Lessons include Markdown formatting or code blocks.

Step 6: Testing & Going Live

1. Test the activation code flow.
2. Ensure user_telegram.status = connected.
3. Run Edge Function manually to verify messages.
4. Schedule Edge Function for daily execution.

Conclusion

With Supabase and React:

• You can manage users, lessons, and notifications seamlessly.
• Telegram bot enables daily engagement without building a custom messaging service.
• This architecture is flexible for email, WhatsApp, or other channels.

Next Steps:

• Add lesson attachments (images, diagrams) via Telegram sendPhoto.
• Extend React UI with a lesson timeline and progress charts.
• Add retry logic in Edge Functions for robust delivery.

This post gives a complete end-to-end plan to implement a daily Python lesson Telegram bot integrated with a React frontend using Supabase as backend.