Building a Customer Service Chat App with React, Websocket and Directus

[syakirurahman]

What is your idea?

The article aims to give the reader a tutorial and proof of concept of creating a customer service chat feature for their business. The article will be divided into several sections:

1. An overview of project, purpose and features

2. Setting up UI with React.js and Tailwind

• Creating customer chatbox
• Creating admin/staff chatbox

  3. Setting up Directus

• Environment
• Collections

  4. Integrating Directus with Websocket

• Integrating directus in customer chatbox
• Integrating directus in admin/staff chatbox

  5. Deploying app to cloudflare for live demo

  The live demo page will only available as long as directus free trial active. When its expired, it will be replaced by video demo instead. # In real use case, this app will need an authentication and authorization. But since this is a proof of concept and for the sake of brevity, i don't think we need to implement it.

Additional perks

If the idea accepted and the article published at Directus, I will re-publish it to my dev.to profile dev.to/syakirurahman with canonical url to original post at directus blog. I have +3000 followers in Dev.to and some of my posts was trending / being top weekly posts in the past. This post will have a chance of being one of them 😄

What are the key takeaways from your post?

1. For beginner, this post can guide them to implement websocket and create areal-time application with directus.
2. For professional developer / startup owner, this tutorial give them a practical insight to develop a customer service chat app with Directus.

Country of residence

Indonesia

Terms & Conditions

• [X] You understand that submitting this form does not mean we accept your proposal. We will accept proposals at our discretion.
• [X] You understand that to be paid you will need to generate an invoice with a 30 day payment term and send it to us once the final draft of your work is accepted (we will share how to do this once finished).
• [X] You understand that you will require a bank account in one of the countries listed here (https://help.bill.com/direct/s/article/360007172671).
• [X] You understand that you need to set up a Directus project by either running locally, self-hosting, or using Directus Cloud, but being a guest author does not entitle you to extended trials or free credit.
• [X] You understand that you will grant us an unlimited license to post and promote your work as part of this program. You may repost, but using our copy as the canonical source.
• [X] You are aged 18 or over.

[github-actions[bot]]

Thank you for submitting an idea for our guest blog.
We work through new ideas every few weeks as we put together our content schedule. This means you may not get an immediate response as to whether your idea has been accepted, or any follow-up questions we have to clarify your idea.
If your idea is accepted, we will provide a deadline for first draft and how much we can pay you for the post. You will have a few days to confirm whether you are still able and willing to write the post.
If you have any questions in the meantime, feel free to add a comment to this issue.

[BB-Loft]

Thank you for submitting this idea, but unfortunately we are not accepting it as part of our guest author program. Please feel free to submit additional ideas in future.