Ola Cafe & Resto - Web-Based Contactless Ordering System with WhatsApp API Integration

During the 2021 social restrictions, one of my clients in the Food & Beverage (F&B) industry faced a major challenge: finding an efficient way to accept customer orders while complying with health protocols. At the same time, relying on third-party platforms significantly reduced the business's already limited profit margins.

To address these challenges, I developed Ola Cafe & Resto, a lightweight, fast, and highly functional web application tailored to the client's immediate business needs.

Rather than building a complex and costly backend system, I focused on cost efficiency and ease of operational adoption. I designed a local shopping cart system using pure Vanilla JavaScript, integrated directly with the WhatsApp API.

Customers could easily browse the menu, add items to their cart, and complete their orders directly through the cafe's WhatsApp number without any physical contact.

Key Technologies and Features

  • Responsive UI: Built with HTML5, CSS3, and Bootstrap 4.6 to deliver a seamless, clean, and responsive user experience across various smartphone screen sizes.
  • DOM Manipulation: Implemented dynamic menu category filtering using pure Vanilla JavaScript to ensure fast and responsive interactions.
  • WhatsApp Checkout: Developed a local shopping cart system that automatically formats order summaries into structured text messages, making it easier for the cafe's admin to receive and process orders.
  • Interactive Gallery and PWA: Integrated GLightbox and Web Manifest, allowing customers to add the web application to their device's home screen like a native app without requiring a conventional application installation.

Project Insights

Managing this project reinforced my belief that a Software Engineer's expertise is not measured solely by the complexity of the frameworks they use, but also by their ability to deliver practical, cost-effective solutions that directly support a client's business continuity.

For fellow developers and business owners, how did you navigate the challenges of digitalizing local businesses during those unprecedented times?

Let's connect and share our experiences in the comments below!

Project Details
Client Name Ola Cafe & Resto
Year of Work 2026
Technology Used HTML5 CSS3 Bootstrap 4 JavaScript (Vanilla JS) WhatsApp API Integration GLightbox Web App Manifest

Want to create a similar project?

Consult Now