React Time chat Application with Strapi and React Native

[icode247]

What is your article idea?

This topic will cover the following sections:

• Introduction
• Setting up the Development Environment
  • Installing Expo CLI for React Native development.
  • Setting up a new Strapi project.
  • Installing necessary dependencies for Strapi development.
• Designing the Data Model
  • Creating users and message collections in Strapi.
  • Creating relationships between users and messages.
• Implementing User Authentication
  • Setting up user authentication using Strapi's built-in features
  • Creating authentication endpoints for user registration, login, logout, etc.
  • Securing API endpoints with authentication middleware.
• Setting up Real-time Communication
  • Integrating websockets with Strapi using the strapi-plugin-io plugin.
  • Configuring real-time events for sending messages
  • Creating a WebSocket connection from the React Native app.
• Building the React Native UI
  • Creating the main screens for user authentication (login, register) and chat interface.
  • Creating navigation between screens using React Navigation.
  • Creating the chat interface with message input, message list, and user list.
• Implementing Chat Functionality
  • Fetching the list of users and messages from the Strapi backend.
  • Sending messages in real-time using websockets.
  • Displaying incoming messages in real-time.
  • Implementing a typing indicator to show when a user is typing a message.
  • Implementing push notifications for new messages.
  • Adding image and file upload functionality to the chat.
• Conclusion
  • Summary of the project and key learnings.

What are the objectives of your article?

The objective of this tutorial is to provide developers with a comprehensive and hands-on guide for building a real-time chat application using Strapi and React Native. By the end of this article, the reader will learn how to set up the development environment, design the data model, implement user authentication, integrate real-time communication, and add features like push notifications and file uploads.

What is your expertise as a developer or writer?

Advance

What type of post is this?

Tutorial

Terms & Conditions

• [X] I have read the Write for the Community program guidelines.

[icode247]

Hi @Theodore-Kelechukwu-Onyejiaku I would like to write on this topic next.

[Theodore-Kelechukwu-Onyejiaku]

Hi @icode247 ,

This looks good. Please proceed! 💪

[icode247]

Hi @Theodore-Kelechukwu-Onyejiaku I need help here:

 const response = await fetch(`${backendBaseUrl}/api/messages`, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          data: {
            content: messageInput,
            sender: {
              connect: activeUser.id,
            },
            recipient: {
              connect: friendId,
            },
            timestamp: formattedDate(),
          },
        }),
      });

I have a message and user collection, which has a one-to-many relationship when I want to create a new message. I want to add the sender and recipient id.

[Theodore-Kelechukwu-Onyejiaku]

Hi @icode247 ,

Please when are you free for a call. Let's resolve the issue 😊

[icode247]

Hi @Theodore-Kelechukwu-Onyejiaku Are you available for a quick call now?

Thanks

[Theodore-Kelechukwu-Onyejiaku]

Can we make it 6:30pm West African time?

If so, please ping me on discord with the meet link.

On Thu, 6 Jun 2024 at 5:37 PM, Ekekenta Clinton @.***> wrote:

Hi @Theodore-Kelechukwu-Onyejiaku https://github.com/Theodore-Kelechukwu-Onyejiaku Are you available for a quick call now?

Thanks

— Reply to this email directly, view it on GitHub https://github.com/strapi/community-content/issues/1390#issuecomment-2152955874, or unsubscribe https://github.com/notifications/unsubscribe-auth/AMPLAQOGMMZEXVRPFHAKCHLZGCF35AVCNFSM6AAAAABHF4WRFCVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCNJSHE2TKOBXGQ . You are receiving this because you were mentioned.Message ID: @.***>

[icode247]

Hi @Theodore-Kelechukwu-Onyejiaku This draft is ready: https://hackmd.io/@N1J43A2uTvmFMf635lGTew/Syq8KeRVR

Thanks

[Theodore-Kelechukwu-Onyejiaku]

Hi @icode247 , thank you!

I just skimmed through the article. For now, I would love that you include a demo of the app in the article. Thanks for your contribution to the "Write for the community" Program!

[icode247]

Hi @Theodore-Kelechukwu-Onyejiaku Please recommend the tool you used to screen record a mobile app.

Thanks

[Theodore-Kelechukwu-Onyejiaku]

Hi @icode247 I would use scre.io.

Meanwhile, I will do that for you! Thank you.

[Theodore-Kelechukwu-Onyejiaku]

Hi @icode247 ,

I hope you are doing great. Thanks for your contributions! 💪

I am able to run your app. However, there seems to be a problem with registering a user through the app. I got a 405 error, which is a permissions error. This should be because of the API access of your draft that is not so clear to the reader or learner. I have provided comments and suggestions on your draft.

Also, I noticed that inputs(email and username, not sure of password) on the iOS app is automatically capitalized whereas it is not so on Android.

Please incorporate. Thank you!