We all know many of our friends or acquaintances who run shops that sell items exclusively, or primarily through Facebook pages! Interactions with these shops are done via Messenger but humans take time to respond, they could be offline, and when they do they have to manage the whole process of cataloging purchases and update their inventory as they sell out. Inventory is also not very discoverable most of the time making conversion rates go low.

It is time to automate all these inefficiencies! Say hello to, your Messenger’s new best friend!

What Can you do with this marketplace

  • You can add multiple categories and products.
  • The product can have different variants and each variant can have extra charges and different images.
  • Add delivery prices, so it's clear what's the total price of the order.
  • Review orders in the dashboard and notify the user of his order status by a message on messenger.
  • The user can talk with the bot with different interactions, like he can see his orders.
  • The bot offers Quick Replies for easier engagement with the bot.

How we built it

For the frontend, we used nextjs to build the pages on the server side, so the website is light on the user device. And webpack to minify the bundle so it works fast even on a slow internet. The data fetching happens only on the server side and the page is served as html/css and js necessary for interactions.

For the backend we used expressjs and postgres for the database. The code is deployed on Amazon Lambda so it scales automatically. And by using aws, the api availability is 99.99% so the bot will answer to all users. We also used redis DB to cache the products so we can fetch them without any delay, and we are generating a token for each user to keep the users data private and other users can't access his data.

Challenges we ran into

  • The most challenging issue was to get the user through the web-view as few steps as possible while still giving him the full experince.
  • Making the app works for multi-languages, means we have to support right to left and change the styling in every place.
  • Keeping the app compact.

Accomplishments that we are proud of

  • The webview is super fast & light, with the pre-fetch pages and server side rendering.
  • By using facebook services, the user doesn't have to register nor download an app while keeping his privacy.
  • The application has support for multi-languages (currently English & Arabic).
  • The backend is serverless, so it scales up & down as needed with the lowest cost.

What we learned

  • The bot doesn't have to be fully text based, it should include a web view for complex interactions.
  • Serverless based architecture works very well for bots related applications.
  • Server side rendering is a must for slow devices. But client side rendering could be better for admin dashboard.

What's next for MiniApp Chat

  • Integrate Facebook Pay, so the experience is complete.
  • Add coupons for marketing campaigns (In progress).
  • Add support for Private Replies, where the bot sends a direct link to the product page.
  • Add support for Handover Protocol.
  • More options in the dashboard to customize the webview.
  • Add customizable workflow for the bot.
Share this project: