Dazzlecord - Discord clone in React

• Dazzlecord - Discord clone in React
  • Overview
  • Previews
  • Features
  • How it works
  • Getting Started
  • Deployment
    • Deploy to Docker
    • Deploy to Cloud Run
      • Step 1 - Create Artifact Registry Repository
      • Step 2 - Deploy it
      • Step 3 - Add Permission

Overview

Dazzlecord is an online chat application and Discord clone developed using React, Next.js, and Socket.io. It utilizes databases such as MongoDB + Prisma ORM and Google Cloud Storage, and is deployed into Docker containers on Cloud Run microservices.

The application enables real-time messaging and file storage, with authentication provided by Next-Auth v5. It is designed with inspiration from Discord's interface.

Live: https://deezcord-zpxm4cwxta-as.a.run.app

Mirror: https://dazzlecord.vercel.app

Previews

Features

User Authentication

• Register
• Login

Messages

• Send, edit, delete, chat and images or files
• Preview sending and sent images
• Realtime server's channels messaging
• Realtime direct messaging

User Management

• List friends & pending friend request
• Send, Accept, Decline friend request
• Display user's profile
• Change user's profile (display name, profile photo, description)

Server and Channels

• Server creation, edit, deletion, and invite link
• Channel creation, edit, and deletion
• Change server's name and photo
• Change channels's name

Member Management

• List all members
• Display members profile
• Change member role (owner, admin, moderator, guest)
• Kick member

and more

How it works

Getting Started

Follow the instructions below:

1. Clone the repository

   git clone https://github.com/hasferrr/Dazzlecord.git

2. Install dependencies

   bun i
   cd socket-io/
   bun i

3. Configure Google Cloud Storage

   1. Create, download, and place Service Account key file in the /service-accounts directory

   2. Create a cloud storage bucket

   3. Make it public accessible

   4. Add this custom role to allUsers principal (in your storage bucket):

      • resourcemanager.projects.get
      • storage.managedFolders.get
      • storage.objects.get
      
      
      Click to expand

      
      

   5. Add this role to service account:

      • Storage Object Creator role

        Click to expand

        
        

      • storage.buckets.update and storage.objects.delete custome role

        Click to expand

        
        

4. Configure MongoDB database

   1. Create MongoDB Database: https://cloud.mongodb.com
   2. Get MongoDB URI: https://www.mongodb.com/basics/mongodb-connection-string

5. Add environment variables to .env (similiar to .env.example and all required)

6. Start the application

   # terminal 1
   bun run dev
   
   # terminal 2
   cd socket-io/
   bun run dev

Deployment

1. You need to Configure Google Cloud Storage and Configure MongoDB database
2. Set Next.js to port 3000 and Socket.io to port 3001
3. Select deploy to Docker, Cloud Run, or deploy it yourself

Deploy to Docker

docker compose up -d

Deploy to Cloud Run

Step 1 - Create Artifact Registry Repository

Click to expand

Step 2 - Deploy it

You can manually deploy it using cloud console or using script (select one)

1. Using Cloud Console

   1. Push the containerized Next.js and Socket.io apps to Artifact Registry
   2. Deploy it to Cloud Run

2. Using Cloud Build

   Documentation: Deploying to Cloud Run using Cloud Build

   1. Install and configure Cloud SDK

      Alternatively, you can use Cloud Shell

   2. Login to your Google Cloud account

   3. Enable Cloud Run Admin role to Cloud build

      You can always see how to do it here: Deploying to Cloud Run using Cloud Build

   4. Configure the deployment in the cloudbuild.yaml and cloudbuild-socket-bun.yaml files

   5. Execute the script

      chmod +x deploy-all.sh
      ./deploy-all.sh

3. Copy the published URLs, add those to .env

4. Redeploy it

   Click to expand

   
   

   Alternatively, you could infer the URLs of other services by using your knowledge of the structure of Cloud Run service URLs

   

Step 3 - Add Permission

Add Cloud Run Invoker Permission to allUsers pricipal for both deployed cloud run services

Click to expand