How to build a real-time chat app with Nextjs, Directus and FCM

[Tammibriggs]

What is your idea?

This tutorial aims to demonstrate in detail the step-by-step process of using Directus, Next App Router and Firebase Cloud Messaging to build a chat app which includes some essential features needed in a real-world use case like:

• Push notification
• Authentication
• Real-time messaging
• Message read receipt
• user's online/offline status indicator

To keep the tutorial as concise as possible, I plan to build the user interface of the app outside of the tutorial, host it on GitHub and include the details to clone it in the tutorial.

What are the key takeaways from your post?

Readers will learn:

• How to get data in real-time with Directus
• How to add push notifications when using Directus
• How to implement user authentication
• How to build a chat app using Directus and Nextjs

Country of residence

Nigeria

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 either 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.

[phazonoverload]

This doesn't make sense for us as we have Realtime functionality built in to Directus, and existing chat-based tutorials.

[Tammibriggs]

@phazonoverload Firebase Cloud Messaging is for push notifications. I will be using the Directus SDK for implementing real-time functionalities such as message read receipt, online indicators etc which were not covered in the available tutorial.