🖐Overview

Hello buddies, on this occasion, I will share how to create a mini version of the HayLingo application (HayWord) with FB messenger, Wit.ai (NLP), and React JS. Previously, HayLingo won 1st place in the 2020 Facebook messenger hackathon by offering HayBot, HayFriend, and HayWord features. In this case study, we will try to make HayWord feature that helps users enrich their English words by gamification of guessing words with various kinds of clues, such as synonyms, word types, definitions, and translation features.

See Walktrough Video :

Why You Should Create Applications on Facebook Messenger?#

👨‍👨‍👦‍👦 Used by 1.3 Billion global users and an estimated 2.4 Billion by 2021.

📣 Marketing through FB Messenger is 70% (Open Rate) greater than email marketing.

📥 It is the top messaging platform in the US with monthly downloads of 2 million downloads.

Source

What are we going to learn#

  • FB Messenger (create a chatbot application, implement the messenger extension webview, quick replies, generic templates, Get Started Button, Greeting Text)
  • Wit.ai (create user intentions, entities, training, integration to the messenger)
  • ReactJS (Messenger integration, creating React components, state, and props)
  • Firebase (Messenger integration, creating and updating user data)
  • API integration (Translate API, WordsAPI)

Things to prepare#

☑ Facebook account to login to FB developer, Wit.ai, Glitch, RapidAPI

Firebase Account

☑ Computer/Laptop

☑ Internet Connection