Reminder Telegram Mini App, developed for my private Telegram Bot. Feel free to use it as a learning source if you're interested in developing Telegram Mini Apps 🙂
The Reminder Telegram Mini App allows users to set and manage reminders through simple UI. It can be integrated with the backend to send reminders directly to the Telegram user. The API design that i'm using can be checked in the ReminderApiClient class.
❗The project utilizes the WebApp object extensively for functionalities such as fetching user information, managing global configurations, dynamic theming, displaying popup screens, and handling back buttons. Therefore, the project won't work properly unless it's opened through Telegram.
❗The backend code that is responsible to CRUD operations and actual reminder sending logic is not part of this project, you'll have to implement it yourself. 😃 CloudStorageClient utilizes Telegram Mini App Cloud Storage and can be used as a local pseudo-backend for CRUD operations.
- Create Two Types of Reminders:
- One-Time Reminder: Set a reminder for a specific date and time.
- Repeating Reminder: Schedule reminders for specific days of the week.
- Manage Reminders: View and delete your existing reminders easily.
- CloudStorage: Store created reminders in a Telegram's cloud storage.
- Dynamic Theme Colors: The app adapts to your Telegram theme colors for a seamless experience.
- Native Date and Time Selectors: Utilizes platform-specific date and time pickers.
Vite: A fast build tool and development server.
React: A JavaScript library for building user interfaces.
Typescript: A strongly typed programming language that builds on JavaScript.
I aimed to minimize the use of dependencies to keep the project lightweight.
- TWA SDK - Telegram Web App (MiniApp) SDK
- Telegram UI Kit - Great pre-designed components
- React Select - Flexible and easy to use Select input
- Clone the repository:
git clone git@github.com:clivelewis/reminder-miniapp.git- Navigate to the project directory:
cd reminder-miniapp- Install dependencies:
npm install- Start the development server:
npm run devThis is a tricky part because Telegram only accepts HTTPS links with a valid SSL certificate. This means you can't simply use http://localhost:5173. Some of the ways of how to solve this problem:
- Host the website on GitHub Pages or any other hosting.
- Run a tunnel like tunnelto.dev or ngrok.
- Use the test environment provided by Telegram.
Personally, I use tunnelto.dev. It's a great tool, but costs 2$/month.
Feel free to reach out to me on @clive00lewis