https://github.com/hasferrr/dazzlecord

Discord Clone created using React, Next.js, Next-Auth v5, MongoDB + Prisma, Socket.io, Google Cloud Storage, Docker, Cloud Run.
https://github.com/hasferrr/dazzlecord

cloudrun cloudstorage docker gcp mongodb nextjs reactjs socket-io

Last synced: 18 days ago
JSON representation

Discord Clone created using React, Next.js, Next-Auth v5, MongoDB + Prisma, Socket.io, Google Cloud Storage, Docker, Cloud Run.

Host: GitHub
URL: https://github.com/hasferrr/dazzlecord
Owner: hasferrr
License: mit
Created: 2024-02-17T06:27:07.000Z (about 2 years ago)
Default Branch: main
Last Pushed: 2026-04-08T07:32:47.000Z (19 days ago)
Last Synced: 2026-04-08T09:27:34.355Z (19 days ago)
Topics: cloudrun, cloudstorage, docker, gcp, mongodb, nextjs, reactjs, socket-io
Language: TypeScript
Homepage: https://deezcord-zpxm4cwxta-as.a.run.app
Size: 8.67 MB
Stars: 6
Watchers: 1
Forks: 2
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

# Dazzlecord - Discord clone in React

- [Dazzlecord - Discord clone in React](#dazzlecord---discord-clone-in-react)
- [Overview](#overview)
- [Previews](#previews)
- [Features](#features)
- [How it works](#how-it-works)
- [Getting Started](#getting-started)
- [Deployment](#deployment)
- [Deploy to Docker](#deploy-to-docker)
- [Deploy to Cloud Run](#deploy-to-cloud-run)
- [Step 1 - Create Artifact Registry Repository](#step-1---create-artifact-registry-repository)
- [Step 2 - Deploy it](#step-2---deploy-it)
- [Step 3 - Add Permission](#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:

Mirror:

## Previews

![ss1](../assets/images/ss-mult-1.png?raw=true)
![ss2](../assets/images/ss-mult-2.png?raw=true)

## 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

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

1. Install dependencies

```bash
bun i
cd socket-io/
bun i
```

1. Configure Google Cloud Storage

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

1. Create a cloud storage bucket

1. Make it public accessible

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

- `resourcemanager.projects.get`
- `storage.managedFolders.get`
- `storage.objects.get`

Click to expand

1. 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

1. Configure MongoDB database

1. Create MongoDB Database:
1. Get MongoDB URI:

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

1. Start the application

```bash
# 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
1. Set Next.js to port 3000 and Socket.io to port 3001
1. Select deploy to Docker, Cloud Run, or deploy it yourself

### Deploy to Docker

```bash
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
1. Deploy it to Cloud Run

1. Using Cloud Build

Documentation: [Deploying to Cloud Run using Cloud Build](https://cloud.google.com/build/docs/deploying-builds/deploy-cloud-run)

1. Install and configure [Cloud SDK](https://cloud.google.com/sdk/docs/install-sdk)

> Alternatively, you can use Cloud Shell

1. Login to your Google Cloud account
1. Enable Cloud Run Admin role to Cloud build

> You can always see how to do it here: [Deploying to Cloud Run using Cloud Build](https://cloud.google.com/build/docs/deploying-builds/deploy-cloud-run#required_iam_permissions)

1. Configure the deployment in the `cloudbuild.yaml` and `cloudbuild-socket-bun.yaml` files
1. Execute the script

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

1. Copy the published URLs, add those to `.env`
1. 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