How I built Cobakso’s digital ecosystem with Next.js (Web & PWA), API integrations (Firebase, Xendit, Biteship, Telegram), and native Flutter apps (Customer, Restaurant, Driver, Owner) to achieve long-term independence.

From Food Delivery to Independence: Building Cobakso’s Digital Ecosystem

Many culinary businesses focus only on the product, but forget to prepare a scalable digital system. Without a strong foundation, a brand will remain just a passenger on third-party platforms.

At Cobakso, I faced a classic challenge: how to build a website that is more than just a profile page—one that can process orders, connect to payments, arrange couriers, and send real-time notifications to the kitchen team.

Long-Term Vision: Independence from Third-Party Platforms

I realized that in the beginning, third-party food delivery platforms are useful to gain exposure. However, in the long run, fees of 20–40% can eat away at margins.

That’s why, from the start, I prepared a production-ready system that enables Cobakso to be independent:

Website (Next.js) as the official channel and information hub.
PWA (Progressive Web App) so customers can install it directly on their phones—lightweight and fast.
Native Mobile Apps (Flutter) for a complete operational ecosystem:
- Customer App: browse menu, checkout, payment, order tracking.
- Restaurant App: manage incoming orders, kitchen status, menu/stock.
- Driver App: accept jobs, navigation, delivery updates.
- Owner App: sales insights, branch performance, menu & pricing control.

The strategy is clear: stay present on large platforms for awareness, while building independence to retain full control of data, margins, and customer experience.

Web Foundation: Next.js for Scale & SEO

I chose Next.js as the foundation for web and PWA because it is:

Scalable: stable performance even with high traffic.
SEO-Friendly: crucial for organic acquisition in local markets.
Flexible: SSR/SSG/ISR & API Routes make feature orchestration easier.
Future-Proof: strong ecosystem, active community, modern tooling support.

The result: the website is not just an online brochure, but a mini-application that grows alongside the business.

Integration Flow: Order → Payment → Delivery → Notification

The backstage workflow that ties everything together:

🔹 Firebase

Auth: login, signup, email verification.
Firestore: product, user, order, and status database.
Storage: profile pictures, attachments, etc.
Realtime listeners: instant order status updates.

🔹 Xendit

Modern payments: QRIS, eWallets (ShopeePay), Virtual Accounts.
Webhook: payment status automatically updates order records in Firestore.

🔹 Biteship

Instant shipping rates: based on customer’s map coordinates (lat/lng).
Courier booking: triggered once the kitchen marks the order as “Ready to Deliver.”

🔹 Telegram Bot (for Operations)

Real-time notifications for the team (Owner/Restaurant).
Action buttons: Preparing, Ready to Deliver, Call Courier.

Overall flow:
Customer → (Next.js Web/PWA or Flutter Customer App) → Xendit (payment) → Order stored in Firestore → Kitchen updates via Restaurant App → Biteship (courier) → Telegram Bot (team notification) → Customer tracking (real-time status).

Native Ecosystem: Why Flutter?

I chose Flutter for the native apps because:

Single codebase, multi-platform: speeds up development of 4 apps (Customer, Restaurant, Driver, Owner).
Consistent & fast UI: near-native performance with smooth animations.
Ecosystem & plugins: seamless integration with Firebase, Maps, notifications, etc.
Maintainability: shared design system and UI components across apps.

Synced with the Same Backend

All Flutter apps access the same backend (Firebase, Xendit, Biteship), which means:

Consolidated data: no data silos.
Real-time operations: order, stock, courier status stay consistent across roles.
Observability: owners have a single source of truth for reports and decisions.

Measurable Impact

Better customer experience: fast ordering, easy payments, clear tracking.
Streamlined operations: kitchen focuses on cooking, not manual admin work.
Cost efficiency: reduced dependency on marketplaces, healthier margins.
Full control of data: more precise product and pricing strategies.

Conclusion

This project proves that the combination of Next.js (Web & PWA), Flutter (multi-role native apps), and modern API integrations (Firebase, Xendit, Biteship, Telegram) can deliver a production-ready digital ecosystem that is scalable and independent.

This is what I specialize in: building web & mobile solutions that are not only beautiful, but also truly work in the field—helping businesses become independent, scalable, and future-ready.

Running an F&B brand and want to build a similar ecosystem (Web/PWA + Native + Payment + Courier + Notifications)?

I can help design and implement it end-to-end, step by step, from MVP to full production.