YoLiYo Mentai
Automation / Full-stack
From a chat message to an order workflow.
A Telegram ordering system and React administration dashboard for a real food MSME client.
Full-Stack Developer
Team project · Pengelolaan Proyek Perangkat Lunak · 2026
The problem &
my contribution
A team software-project course required a real client. The system links a customer-facing Telegram chatbot with payment integration and an owner-facing business dashboard.
Database, chatbot, dashboard, UI/UX, and user testing; teammates owned project-management artefacts and product direction.
- React
- Supabase
- n8n
- Telegram Bot
- Midtrans
- AI Agent
Connect customer and owner workflows
Telegram and n8n support the ordering interaction. React and Supabase support the owner’s view of orders, products, customers, and analytics.
Handle payments through an integration
Midtrans and payment callbacks form part of the system. Original workflow screenshots document the integration.
Make the team contribution explicit
Hanif carried out full-stack development and user testing. Teammates handled BRD/PRD and product direction. Publication was made with the team’s permission.
What the evaluation shows
User Acceptance Testing was accepted by the business owner. The result describes the owner’s acceptance of the tested system.
- UAT
- 100%
accepted by the business owner
Inside the application
Original screenshots from the YoLiYo Mentai experience. Open any image for a closer look.
View the remaining 12 application screens
Evaluation evidence
The original figures and testing records behind the reported results.
Original User Acceptance Testing record, accepted by the business owner.
How the pieces connect
A brief reading of the workflow, followed by the original implementation evidence.
- Customer orders
- Bot & automation
- Payment callback
- Owner dashboard
Read the workflow, beyond the screenshot
The original overview is 535 × 166 pixels. Zoom cannot recover missing detail. These paths are traced from the exported n8n workflow:
- Incoming message
- Telegram trigger → operating-hours check → look up or create the user → menu request branch / AI Agent → parse the response.
- Order creation
- Check for an existing order → update user information → create_order. Separate branches build order items and request a Midtrans payment link, then save the link and send a success message.
- Payment events
- A Midtrans webhook branches through If1 to update payment status. A separate webhook checks for a newly paid order, retrieves user data, records invoice_sent, and sends the invoice.
The original n8n automation overview.
The ordering workflow as documented in the project.
The payment webhook configuration screenshot.