Building a Real-Time Messaging App: A Step-by-Step Tutorial(Discord Clone)

In this tutorial, we’ll continue exploring the exciting world of web development by diving into the repository AntonioErdeljac/next13-discord-clone. This GitHub project offers a robust Discord clone with an array of features that showcase real-time messaging capabilities, interactive UI, and more. If you’re ready to enhance your coding skills and build a powerful app, let’s get started!

Note: In this tutorial, we’ll be setting up a PostgreSQL database using Docker as an alternative to PlanetScale, ensuring a seamless learning experience for all users.

Now since PlanetScale requires credit card information during signup, we’re opting for a PostgreSQL database setup using Docker. This alternative approach allows us to achieve the same functionality without any credit card requirements. The tutorial will guide you through each step, ensuring a smooth setup process.

With all these features and the alternative database setup, this tutorial is a valuable resource for honing your web development skills.

Don’t hesitate to explore the updated code repository here, which showcases the modifications and enhancements made based on this tutorial.

Let’s dive in and create an impressive real-time messaging app together!

The features of the project remain as exciting as ever:

Impressive Features of the Project

The repository comes packed with features that offer a rich learning experience:

• Real-Time Messaging with Socket.io: Utilize Socket.io for real-time messaging between clients and servers.
• Attachments as Messages with UploadThing: Implement sending attachments as messages using UploadThing.
• Real-Time Edit and Delete: Allow users to edit and delete messages in real time.
• Diverse Call Channels: Create text, audio, and video call channels, along with 1:1 conversations and video calls.
• Efficient Member Management: Learn member management, including kicking and role changes.
• Innovative Invite System: Develop a functional invite system with unique invite link generation.
• Effortless Infinite Loading: Implement message loading in batches using tanstack/query.
• Personalized Server Creation: Explore server creation and customization.
• Stunning UI with TailwindCSS and ShadcnUI: Craft a beautiful UI with TailwindCSS and ShadcnUI.
• Responsive Design and Modes: Ensure a responsive design with light and dark modes.
• Websocket Fallback with Polling: Implement a websocket fallback using polling with alerts.
• ORM Magic with Prisma: Learn about ORM with Prisma for database interactions.
• MySQL Database with Planetscale (Optional): Set up PostgreSQL using Docker as an alternative to PlanetScale, which requires a credit card during signup.
• Secured Authentication via Clerk: Implement secure user authentication using Clerk.

Setting Up the PostgreSQL Database Using Docker

Step 1: Fork the Repository

To get started, fork the AntonioErdeljac/next13-discord-clone repository to your own GitHub account. This will allow you to work on your own version of the project.

Step 2: Install Docker Desktop

Begin by installing Docker Desktop, which will enable you to run containers on your local machine. You can download it from the official Docker website. If you’re new to Docker, you can follow the installation guide here.

Step 3: Open Docker Desktop

Run Docker Desktop Application

Step 4: Create a docker-compose.yml File

In the root directory of the project, create a docker-compose.yml file with the following content:

version: "3"
services:
  postgres:
    image: postgres:latest
    container_name: discordpostgres
    ports:
      - "6500:5432"
    volumes:
      - progresDB:/var/lib/postgresql/data
    env_file:
      - ./.env
volumes:
  progresDB:

Step 5: Update the .env File

Update the .env file with the following content:

POSTGRES_HOST=127.0.0.1
POSTGRES_PORT=6500
POSTGRES_USER=admin
POSTGRES_PASSWORD=password123
POSTGRES_DB=discorddb

DATABASE_URL=postgresql://admin:password123@localhost:6500/discorddb?schema=public

Don’t forget to include the other previously defined values from the project.

Step 6: Update Prisma Schema for PostgreSQL

In the project, locate the prisma/schema.prisma file. You'll notice that the original schema might be set up for MySQL. Modify it to suit PostgreSQL:

// prisma/schema.prisma

// Change this:
// datasource db {
//   provider = "mysql"
//   url      = env("DATABASE_URL")
// }

// To this:
datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

Step 7: Run Docker Compose

Run the following command to start the PostgreSQL container:

docker-compose -f docker-compose.yml up --build -d

Step 8: Prisma Setup

Generate Prisma client and push the changes to the database:

npx prisma generate
npx prisma db push

Step 9: Run the Application

Finally, run the application:

npm run dev

Exploring the Code

As an alternative to PlanetScale, which requires credit card info for signup, this tutorial demonstrates setting up PostgreSQL with Docker. You can find the updated code in the GitHub repository.

Conclusion

Congratulations! You’ve successfully set up the environment to work with the next13-discord-clone project. By following this detailed guide, you’ve learned how to set up a PostgreSQL database using Docker, integrate Prisma, and start the application. Now you can explore the fascinating features of this Discord clone, gaining valuable insights into real-time messaging, UI design, and more. Enjoy your coding journey!