How I Built ChatCube ๐Ÿ’ฌ with Next.js, TailwindCSS, Clerk and Firebase and a Walkthrough of The App

How I Built ChatCube ๐Ÿ’ฌ with Next.js, TailwindCSS, Clerk and Firebase and a Walkthrough of The App

Avneesh Agarwal
ยทJul 25, 2021ยท

4 min read

Subscribe to my newsletter and never miss my upcoming articles

Listen to this article

The motivation

I was exploring through Clerk the last weekend and saw this amazing hackathon that was being hosted by Clerk and Hashnode. So I thought that I should participate in it. Then one of the biggest questions was what to build?

How I got the idea of a chat app?

While I was thinking of what to build, I went to discord to chat a bit with my friends. At that time I thought I could build a chat app where people can have 1:1 chatting.

What is ChatCube?

ChatCube is an open-source 1:1 chat app that I built for the Clerk x Hashnode hackathon.

The Tech I am using

Frontend framework: Next.js

CSS: Tailwind CSS

Authentication: Clerk

Database and storage: Firebase

Let's do a walkthrough of my app

Check out ChatCube here

The first thing we would see is a login screen. Now you can sign up using your email, Google, GitHub, or Facebook. This is handled by Clerk. If you want to add Clerk to your Next.js app checkout Mastering Clerk authentication with the Next.js standard setup

image.png

Switching to the dark mode

If you are like me and love dark mode everywhere then it is as simple as clicking on the moon icon ๐ŸŒ™ in the header. "How to Create Light and Dark Mode Toggle in Next.js with Tailwind "

image.png

Creating a chat

In the sidebar, there is a self-explanatory create a chat button. This will open a modal and you can find a user by scrolling through it or searching ๐Ÿ”Ž. I am getting the list of users from Firebase NoSQL firestore database. This is how to add something to the database after configuring -

db.collection("users")
        .add(
          {
            name: "John Doe",
            email: "john@doe.com"
          },
        );
    }

image.png

Sending a message

To send a message just click on the name of the person you want to send the message to and type the message, and hit enter or click on the send icon. This will add the message to the collection inside the users collection.

image.png

Sending an image

If you wanna share an image with your friend click on the paper click ๐Ÿ“Ž and choose the image you wanna send. I am using firebase storage to upload all the images. After uploading the image I get a link by using which I can render them image on the screen.

image.png

Adding emojis

Everybody loves emojis so you can use your favorite emojis by clicking on the smiley face๐Ÿ˜€. Emoji mart is being used for all the emojis. If you want this feature in your app check "How to add an emoji picker to an input field in react app "

image.png

Using Speech instead of typing

If you are too lazy to type a message, I have got a solution for you. Click on the mic icon ๐ŸŽ™๏ธ and start speaking what you wanna send and it will be converted to text.

image.png P.S This feature doesn't work in the brave browser.

Editing and deleting the message

Editing ๐Ÿ–Š๏ธ and deleting a message is as simple as clicking on the three dots and selecting what you wanna do. In firebase to edit something, you need to set it to a new thing and set merge to true like this -

   db.collection("chats")
      .doc(router.query.id as string)
      .collection("messages")
      .doc(id)
      .set(
        {
          message: "edited message",
        },
        { merge: true }
      );

image.png

Changing your username

If you wanna have your own unique username, click on manage account image.png Click on username and add/edit it.

image.png

PWA

This is a Progressive Web App (PWA), So you can even install it on your device ๐Ÿ“ฑ๐Ÿ’ป. If you want to make your web app a PWA checkout How to make a Next.js app a PWA

image.png

Search through your chats

If you use the app for some time then you will find a lot of amazing people to chat with, so to make finding them easier you can search through them.

image.png

If you send a link ๐Ÿ”— to your friend it will be highlighted and it will open in a new tab on clicking.

image.png

Clerk Production

This app is using Clerk Production where you don't have to accept third-party cookies ๐Ÿช

If you wanna contribute feel free to check out the GitHub repository for ChatCube. You can make a PR and I will merge it soon ๐Ÿ˜‰.

All the people who have contributed - Contributors

Important links -

Live demo

GitHub repo

Connect with me

Did you find this article valuable?

Support Avneesh Agarwal by becoming a sponsor. Any amount is appreciated!

See recent sponsors |ย Learn more about Hashnode Sponsors
ย 
Share this