The application provides a node-based visual editor for designing Telegram bot logic. Users can build workflows by connecting custom nodes, edit their configuration in real time, and persist progress locally.
The main focus of this project is Frontend Architecture, Performance, and Complex State Management, rather than a production-ready bot runtime.
- 🎨 Drag & Drop Flow Builder — Intuitive node creation and connection using React Flow.
- 🧩 Custom Node Types — Domain-specific nodes representing Telegram bot logic (Text, Image, Buttons matrix).
- 🔗 Dynamic Handles — Node inputs and outputs generated dynamically based on configuration.
- 💾 Local Storage Persistence — Automatic saving and restoring of flows between sessions.
- ✏️ Sidebar Editing — Real-time node configuration via a dedicated sidebar panel.
- ⚡ Predictable State Architecture — Centralized state using Redux Toolkit (migrated from Zustand for better scalability).
| Technology | Purpose |
|---|---|
| React | UI Library |
| TypeScript | Static Typing |
| React Flow | Graph Visualization Core |
| Redux Toolkit | Primary State Management |
| Zustand | Previously used, fully migrated to Redux |
| Shadcn/UI | Modern, accessible UI components |
This project was built to demonstrate engineering skills:
- Architecture: Practice building complex interactive editors.
- Complexity: Explore advanced React Flow customization.
- Refactoring: Demonstrate state management design and migration (Zustand → Redux).
- Portfolio: Serve as a code example for technical interviews.
npm installnpm run devThe app will be available at:
http://localhost:5173
- No Telegram Bot API integration included.
- No backend included (Mock API architecture used for async simulation).
- No license specified.
- Built for learning, experimentation, and demonstration purposes.
Suggestions, ideas, and constructive feedback are welcome. This project is intended as an educational and portfolio example.