Real-time chat app using Firebase, React, TailwindCSS, MongoDB, Express, and Socket.io

Hi everyone, I’m excited to share my journey of creating a real-time chat application using Firebase, React, Express, MongoDB, and Socketio. I will be explaining how everything is glued and any hiccups along the way, so stay tuned.

In this part of the…


This content originally appeared on DEV Community 👩‍💻👨‍💻 and was authored by Hana Belay

Hi everyone, I’m excited to share my journey of creating a real-time chat application using Firebase, React, Express, MongoDB, and Socketio. I will be explaining how everything is glued and any hiccups along the way, so stay tuned.

In this part of the series, I'm going to show you the general flow of the application and the demonstration of what we will be building.

Here are some screenshots of what we will have by the end of the series.

https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qta5u7lxq8ljey5jm838.png

https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a056n94babjpplhxt2iu.png

Main functionalities

  • Users can register/login via email and password.
  • Profile page where users can update their avatar and display name.
  • Generate random avatars using DiceBear API
  • Users can create a room to chat with others.
  • Users can see online status.
  • Search functionality.
  • Chatting is real-time.
  • Emoji picker is also integrated.
  • Dark mode can be enabled.

Technologies Used

1) React: React is an in-demand JavaScript library for building user interfaces painlessly. We will use react router for routing between different pages, socket.io-client for bi-directional communication with the server, contexts to pass down the currently authenticated user to every component, and methods like filter and includes for search functionality.

Not here to start another war about Angular vs React, but 👇 😃

https://dev-to-uploads.s3.amazonaws.com/uploads/articles/huikvu0qjq9tflu2y4zj.jpeg

2) TailwindCSS: TailwindCSS is a utility-first CSS framework for rapid UI development. Who doesn't have a hard time centering a div? On a serious note though, Tailwind basically makes working with CSS much more effortless. Also, unlike Bootstrap, it doesn't constrain you to a design set.

https://preview.redd.it/bptzx7ur4uj11.jpg?width=960&crop=smart&auto=webp&s=d506a8f60ef41916578633bbb3e2d95ef7196fb7

3) Firebase: Firebase, a Backend-as-a-Service (Baas). Cloud computing has transformed the way we use technology. The BaaS cloud service model allows developers to focus on the frontend of an application by abstracting away all the stuff that goes behind it. We are going to leverage the authentication service provided by Firebase.

Here is the authentication flow of the project using Firebase:

  • React will send a request to Firebase to register/login a user.
  • Firebase will give a token to React.
  • React will use that token to send subsequent requests to an Express server.
  • The Express server will verify the token using the Firebase admin SDK and sends a response back to React.

4) Node/Express: I've been using Django for the backend of most of my projects. DRF + React is good stuff. However, if I'm developing a full-stack app, switching back and forth between Python and JavaScript is, hmm well, a bit of a pain. In addition, for an app like this, the async nature of Express seems better. We will create the chat API endpoints and also a middle-ware that will verify tokens coming from React.

5) MongoDB: MongoDB is one of the big players when it comes to non-relational databases. The application will have 2 models, ChatRoom and ChatMessage. Users will first create a room to start messaging. Every room will have 2 members and the ChatMessage model will have the room and the sender along with the message.

6) Socketio: What will a chat app be without web sockets? Socketio enables real-time, bi-directional communication between web clients and servers. Using Socketio, we will make the app real-time and also add online/offline feature.

Source code for the finished app: https://github.com/earthcomfy/lets-chat

https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n5l9fuumq1w4vjsl3upw.gif

Thanks for reading. Stay tuned for the next part as we are going to dive into the development.


This content originally appeared on DEV Community 👩‍💻👨‍💻 and was authored by Hana Belay


Print Share Comment Cite Upload Translate Updates
APA

Hana Belay | Sciencx (2022-09-07T16:38:07+00:00) Real-time chat app using Firebase, React, TailwindCSS, MongoDB, Express, and Socket.io. Retrieved from https://www.scien.cx/2022/09/07/real-time-chat-app-using-firebase-react-tailwindcss-mongodb-express-and-socket-io/

MLA
" » Real-time chat app using Firebase, React, TailwindCSS, MongoDB, Express, and Socket.io." Hana Belay | Sciencx - Wednesday September 7, 2022, https://www.scien.cx/2022/09/07/real-time-chat-app-using-firebase-react-tailwindcss-mongodb-express-and-socket-io/
HARVARD
Hana Belay | Sciencx Wednesday September 7, 2022 » Real-time chat app using Firebase, React, TailwindCSS, MongoDB, Express, and Socket.io., viewed ,<https://www.scien.cx/2022/09/07/real-time-chat-app-using-firebase-react-tailwindcss-mongodb-express-and-socket-io/>
VANCOUVER
Hana Belay | Sciencx - » Real-time chat app using Firebase, React, TailwindCSS, MongoDB, Express, and Socket.io. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/09/07/real-time-chat-app-using-firebase-react-tailwindcss-mongodb-express-and-socket-io/
CHICAGO
" » Real-time chat app using Firebase, React, TailwindCSS, MongoDB, Express, and Socket.io." Hana Belay | Sciencx - Accessed . https://www.scien.cx/2022/09/07/real-time-chat-app-using-firebase-react-tailwindcss-mongodb-express-and-socket-io/
IEEE
" » Real-time chat app using Firebase, React, TailwindCSS, MongoDB, Express, and Socket.io." Hana Belay | Sciencx [Online]. Available: https://www.scien.cx/2022/09/07/real-time-chat-app-using-firebase-react-tailwindcss-mongodb-express-and-socket-io/. [Accessed: ]
rf:citation
» Real-time chat app using Firebase, React, TailwindCSS, MongoDB, Express, and Socket.io | Hana Belay | Sciencx | https://www.scien.cx/2022/09/07/real-time-chat-app-using-firebase-react-tailwindcss-mongodb-express-and-socket-io/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.