Merge pull request #11 from berkanumutlu/release/v0.1.0

Release/v0.1.0

.gitignore

@@ -135,14 +135,14 @@ dist
 /node_modules
 /.pnp
 .pnp.js
-.yarn/install-state.gz
 
 # testing
 /coverage
 
 # next.js
 /.next/
 /out/
+next-env.d.ts
 
 # production
 /build
@@ -151,17 +151,16 @@ dist
 .DS_Store
 *.pem
 
-# debug
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-
 # local env files
 .env*.local
 
 # vercel
 .vercel
 
-# typescript
-*.tsbuildinfo
-next-env.d.ts
+# IDE stuff
+**/.idea/
+**/.settings/
+**/.vscode/
+**/.idea_modules/
+**/.buildpath
+**/.project

README.md

@@ -1 +1,198 @@
-# discord-clone
+<div align="center">
+    <a href="https://discord.com" target="_blank" rel="nofollow">
+        <picture>
+          <source media="(prefers-color-scheme: dark)" srcset="https://cdn.prod.website-files.com/6257adef93867e50d84d30e2/636e0b5493894cf60b300587_full_logo_white_RGB.svg">
+          <img alt="Discord logo" src="https://cdn.prod.website-files.com/6257adef93867e50d84d30e2/636e0b5061df29d55a92d945_full_logo_blurple_RGB.svg" height="128">
+        </picture>
+    </a>
+</div>
+<br>
+<p align="center">
+    <a href="https://github.com/berkanumutlu/discord-clone/releases/tag/v0.1.0" target="_blank" rel="nofollow"><img src="https://img.shields.io/github/v/release/berkanumutlu/discord-clone?logo=github" alt="Discord Clone Release"></a>
+    <a href="https://github.com/berkanumutlu/discord-clone/stargazers" rel="nofollow"><img src="https://img.shields.io/github/stars/berkanumutlu/discord-clone?style=flat&logo=github" alt="Discord Clone Repo stars"></a>
+    <a href="https://nextjs.org/docs/14" target="_blank" rel="nofollow"><img src="https://img.shields.io/badge/next-v14.2.15-black?logo=nextdotjs&logoColor=white&labelColor=black" alt="Next.JS Version"></a>
+    <a href="https://nodejs.org" target="_blank" rel="nofollow"><img src="https://img.shields.io/badge/Node.js-v20.18.0-5FA04E?logo=nodedotjs&logoColor=white&labelColor=5FA04E" alt="Node.js Version"></a>
+    <a href="https://18.react.dev" target="_blank" rel="nofollow"><img src="https://img.shields.io/badge/React-v18.3.1-087EA4?logo=react&logoColor=white&labelColor=087EA4" alt="React Version"></a>
+    <a href="https://tailwindcss.com" target="_blank" rel="nofollow"><img src="https://img.shields.io/badge/Tailwind-v3.4.14-06B6D4?logo=tailwindcss&logoColor=white&labelColor=06B6D4" alt="Tailwind Version"></a>
+    <a href="https://ui.shadcn.com" target="_blank" rel="nofollow"><img src="https://img.shields.io/badge/shadcn/ui-v2.1.2-black?logo=shadcnui&logoColor=white&labelColor=black" alt="shadcn/ui Version"></a>
+    <a href="https://www.prisma.io" target="_blank" rel="nofollow"><img src="https://img.shields.io/badge/Prisma-v5.21.1-2D3748?logo=prisma&logoColor=white&labelColor=2D3748" alt="Prisma Version"></a>
+    <a href="https://www.postgresql.org/docs/release/15.7" target="_blank" rel="nofollow"><img src="https://img.shields.io/badge/PostgreSQL-v15.7-4169E1?logo=postgresql&logoColor=white&labelColor=4169E1" alt="PostgreSQL Version"></a>
+    <a href="https://clerk.com" target="_blank" rel="nofollow"><img src="https://img.shields.io/badge/Clerk-v5.7.5-6C47FF?logo=clerk&logoColor=white&labelColor=6C47FF" alt="Clerk Version"></a>
+    <a href="https://uploadthing.com" target="_blank" rel="nofollow"><img src="https://img.shields.io/badge/uploadthing-v7.1.0-E91616?logoColor=white&labelColor=FEFEFE&logo=data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNjAwIDYwMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8ZyBjbGlwLXBhdGg9InVybCgjY2xpcDBfMV84NykiPgogICAgPHBhdGggY2xhc3M9ImNsb3VkIgogICAgICBkPSJNNTY1LjA1NiA4MC4yOTEzQzUxNy4xMDMgMjIuMTA5NiA0MzEuMDczIDEzLjgyMTcgMzcyLjg5NiA2MS43NzMzQzM0MS4xOSA4Ny45MDMyIDMyNC40MzIgMTI1LjM0NCAzMjMuMzg1IDE2My40MjJDMzE4Ljc2MSAxNTMuOTM5IDMxMy4xIDE0NC44MTQgMzA2LjEwNiAxMzYuMzE4QzI1OC4xNTQgNzguMTM2NCAxNzIuMTIzIDY5Ljg0ODUgMTEzLjk0NyAxMTcuOEM1Ny43MzM4IDE2NC4xMjggNDguMjYzNCAyNDUuOTM1IDkwLjkxODIgMzAzLjg4MUM3Ny4xNjA0IDMwOS4wMzYgNjMuOTczMSAzMTYuMzkzIDUxLjk5MzQgMzI2LjI2NUMtNi4xOTgxNCAzNzQuMjIxIC0xNC40OTEgNDYwLjI1NCAzMy40NjA2IDUxOC40M0M4MS40MDg4IDU3Ni42MDIgMTY3LjQ0OSA1ODQuODk4IDIyNS42MiA1MzYuOTQ5QzI1MC4wNzMgNTE2Ljc5NyAyNjUuNTk1IDQ4OS44ODYgMjcxLjk0MyA0NjEuMTY3QzMxOS45MjYgNDg5LjIwNSAzODIuMjAyIDQ4Ni4xNzUgNDI3LjU5IDQ0OC43NTdDNDcxLjYxNCA0MTIuNDc1IDQ4Ny4wMDggMzU0LjQwMiA0NzEuMTU0IDMwMy4wNzFDNDk3Ljg5NiAzMDAuODQ4IDUyNC4yNTUgMjkwLjc5OSA1NDYuNTM3IDI3Mi40MzNDNjA0LjcxOCAyMjQuNDkxIDYxMy4wMSAxMzguNDU4IDU2NS4wNTUgODAuMjczM0w1NjUuMDU2IDgwLjI5MTNaIgogICAgICBmaWxsPSIjREMyNjI2IiAvPgogIDwvZz4KICA8cGF0aAogICAgZD0iTTMzMy4xODIgMTg4LjgxOEgzOTIuNDE1VjMyOC41OTFDMzkyLjQxNSAzNDUuMjEgMzg4LjQzOCAzNTkuNTkyIDM4MC40ODMgMzcxLjczN0MzNzIuNTk5IDM4My44MTEgMzYxLjU5MSAzOTMuMTUxIDM0Ny40NTcgMzk5Ljc1NkMzMzMuMzI0IDQwNi4yOSAzMTYuOTE4IDQwOS41NTcgMjk4LjIzOSA0MDkuNTU3QzI3OS40MTggNDA5LjU1NyAyNjIuOTQgNDA2LjI5IDI0OC44MDcgMzk5Ljc1NkMyMzQuNjczIDM5My4xNTEgMjIzLjY2NSAzODMuODExIDIxNS43ODEgMzcxLjczN0MyMDcuOTY5IDM1OS41OTIgMjA0LjA2MiAzNDUuMjEgMjA0LjA2MiAzMjguNTkxVjE4OC44MThIMjYzLjI5NVYzMjMuNDc3QzI2My4yOTUgMzMwLjIyNCAyNjQuNzg3IDMzNi4yNjEgMjY3Ljc3IDM0MS41ODhDMjcwLjc1MyAzNDYuODQ0IDI3NC44NzIgMzUwLjk2MyAyODAuMTI4IDM1My45NDZDMjg1LjQ1NSAzNTYuOTI5IDI5MS40OTEgMzU4LjQyIDI5OC4yMzkgMzU4LjQyQzMwNS4wNTcgMzU4LjQyIDMxMS4wOTQgMzU2LjkyOSAzMTYuMzQ5IDM1My45NDZDMzIxLjYwNSAzNTAuOTYzIDMyNS43MjQgMzQ2Ljg0NCAzMjguNzA3IDM0MS41ODhDMzMxLjY5IDMzNi4yNjEgMzMzLjE4MiAzMzAuMjI0IDMzMy4xODIgMzIzLjQ3N1YxODguODE4WiIKICAgIGZpbGw9IndoaXRlIiAvPgogIDxkZWZzPgogICAgPGNsaXBQYXRoIGlkPSJjbGlwMF8xXzg3Ij4KICAgICAgPHJlY3Qgd2lkdGg9IjU5NyIgaGVpZ2h0PSI1NDIiIGZpbGw9IndoaXRlIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxIDI5KSIgLz4KICAgIDwvY2xpcFBhdGg+CiAgPC9kZWZzPgo8L3N2Zz4=" alt="uploadthing Version"></a>
+    <a href="https://socket.io" target="_blank" rel="nofollow"><img src="https://img.shields.io/badge/Socket.IO-v4.8.1-010101?logo=socketdotio&logoColor=white&labelColor=010101" alt="Socket.IO Version"></a>
+    <a href="https://livekit.io" target="_blank" rel="nofollow"><img src="https://img.shields.io/badge/LiveKit-v1.8.0-FF6352?logoColor=white&labelColor=F0F0F0&logo=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAC1QTFRFEhIS8PDwMjIyNB8d/21daTMu3WBSxVdLeDkyXzAqmUY9i0A4TU1Ne0ZAkZGRxXxubAAAAFBJREFUeJxjZEADjAMoIMj4DkiaCOwhTYA1kffAWWQBDhuZBQz4BGYJ3j2xAVlgybJtqO7AEMDQQsgWbjYGbktkhwEx7yNkpxMUoEaYUigAALayJyEvfeD2AAAAAElFTkSuQmCC" alt="LiveKit Version"></a>
+    <a href="https://missiveapp.com/open/emoji-mart" target="_blank" rel="nofollow"><img src="https://img.shields.io/badge/Emoji%20Mart-v5.6.0-F2F2F2?logoColor=white&labelColor=F2F2F2&logo=data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48dGV4dCB5PSIuOWVtIiBmb250LXNpemU9IjkwIj7wn4+qPC90ZXh0Pjwvc3ZnPg==" alt="Emoji Mart Version"></a>
+    <a href="https://www.npmjs.com" target="_blank" rel="nofollow"><img src="https://img.shields.io/badge/NPM-v10.8.2-CB3837?logo=npm&logoColor=F7F7F7&labelColor=CB3837" alt="NPM Version"></a>
+    <a href="https://www.docker.com" target="_blank" rel="nofollow"><img src="https://img.shields.io/badge/Docker-v4.25.2-2496ED?logo=docker&logoColor=white&labelColor=2496ED" alt="Docker Version"></a>
+</p>
+
+# Discord Clone
+
+It is a study project based on Discord app built with Next.js 14, React, Tailwind, shadcn/ui, Clerk, uploadthing, Prisma, PostgreSQL, Socket.io, LiveKit.
+
+## Features
+
+- Designed using tailwind & shadcn
+- Automatic / Light / Dark theme modes
+- ORM using Prisma
+- PostgreSQL database
+- Authentication with Clerk
+- Real-time messaging using Socket.io
+- Server creation & customization
+- Invite system with unique invite link generation
+- Create Text, Audio chat channels
+- Member management (Kick, User role change Guest / Moderator)
+- Send attachments as messages using UploadThing
+- Delete & Edit messages in real time for all users
+- Infinite loading for messages in batches of 15 with @tanstack/query
+- 1:1 conversation and audio calls between members
+- Websocket fallback: Polling with alerts
+
+## Installation
+
+**1)** Clone repository
+
+```shell
+$ git clone https://github.com/berkanumutlu/discord-clone.git
+```
+
+Or with SSH
+
+```shell
+$ git clone git@github.com:berkanumutlu/discord-clone.git
+```
+
+Or with Github CLI
+
+```shell
+$ git clone gh repo clone berkanumutlu/discord-clone
+```
+
+**2)** Copy the example.env file and **make the required configuration changes** in the file
+
+```shell
+$ cp .env.example .env
+```
+
+**3)** Install docker container (required docker)
+
+```shell
+$ docker-compose up -d
+```
+
+**4)** After installation, find your app's container id on docker
+
+```shell
+$ docker ps
+
+# Output:
+CONTAINER ID   IMAGE                 COMMAND                  CREATED      STATUS          PORTS                              NAMES
+...
+4e98c27c070a   discord-clone-app     "docker-entrypoint.s…"   7 days ago   Up 15 seconds   0.0.0.0:3000->3000/tcp, 5555/tcp   discord-clone-app
+...
+```
+
+- And connect to the terminal of your app's container
+
+```shell
+$ docker exec -it {APP_CONTAINER_ID} bash
+```
+
+**5)** Install all the dependencies using npm
+
+```shell
+/user/local/app $ npm install
+```
+
+**6)** Setup Prisma
+
+```shell
+/user/local/app $ npx prisma generate
+/user/local/app $ npx prisma db push
+```
+
+**7)** Restart your docker container
+
+```shell
+$ docker-compose restart
+```
+
+**8)** Now you're ready to use project
+
+- To stop the Docker container, use the following command
+
+```shell
+$ docker-compose stop
+```
+
+## Screenshots
+
+<ul>
+    <li>
+        <p>Home Page</p>
+        <p align="center">
+            <img src="screenshots/home-page.png" alt="Home page" width="49%" />
+            <img src="screenshots/home-page-dark-theme.png" alt="Home page dark theme" width="49%" />
+        </p>
+    </li>
+    <li>
+        <p>Login page & Initial page</p>
+        <p align="center">
+            <img src="screenshots/login-page.png" alt="Login page" width="49%" />
+            <img src="screenshots/initial-page.png" alt="Initial page" width="49%" />
+        </p>
+    </li>
+    <li>
+        <p>Text channel</p>
+        <p align="center">
+            <img src="screenshots/server-text-chat.png" alt="Text channel" width="49%" />
+            <img src="screenshots/server-text-chat-light-theme.png" alt="Text channel light theme" width="49%" />
+        </p>
+    </li>
+    <li>
+        <p>Voice chat</p>
+        <p align="center">
+            <img src="screenshots/server-voice-chat.png" alt="Voice chat" />
+        </p>
+    </li>
+    <li>
+        <p>Create server</p>
+        <p align="center">
+            <img src="screenshots/server-creation.png" alt="Create server" />
+        </p>
+    </li>
+    <li>
+        <p>Create channel</p>
+        <p align="center">
+            <img src="screenshots/server-create-channel.png" alt="Create channel" />
+        </p>
+    </li>
+    <li>
+        <p>Invite to server</p>
+        <p align="center">
+            <img src="screenshots/server-invite-people.png" alt="Invite to server" />
+        </p>
+    </li>
+    <li>
+        <p>Manage server members</p>
+        <p align="center">
+            <img src="screenshots/server-manage-members.png" alt="Manage server members" />
+        </p>
+    </li>
+    <li>
+        <p>Search in server</p>
+        <p align="center">
+            <img src="screenshots/server-search.png" alt="Search in server" />
+        </p>
+    </li>
+    <li>
+        <p>User conversations</p>
+        <p align="center">
+            <img src="screenshots/user-conversations.png" alt="User conversations" />
+        </p>
+    </li>
+</ul>
+
+## License
+
+This is a study project based on Discord app so they own the licence.

package.json

@@ -2,6 +2,40 @@
   "name": "discord-clone",
   "version": "0.1.0",
   "private": true,
+  "description": "A Discord clone application built with Next.js 14, React, Tailwind, shadcn/ui, Clerk, uploadthing, Prisma, PostgreSQL, Socket.io, LiveKit",
+  "author": "Berkan Ümütlü",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/berkanumutlu/discord-clone.git"
+  },
+  "bugs": {
+    "url": "https://github.com/berkanumutlu/discord-clone/issues"
+  },
+  "homepage": "https://github.com/berkanumutlu/discord-clone#readme",
+  "keywords": [
+    "discord",
+    "discord clone",
+    "real-time app",
+    "real-time chat",
+    "real-time messaging",
+    "voice chat app",
+    "node",
+    "nodejs",
+    "typescript",
+    "nextjs",
+    "react",
+    "tailwind",
+    "shadcn",
+    "prisma",
+    "postgresql",
+    "socket",
+    "socketio",
+    "socket.io",
+    "socket io",
+    "livekit",
+    "clerk",
+    "uploadthing"
+  ],
   "scripts": {
     "dev": "next dev",
     "build": "next build",
@@ -76,4 +110,4 @@
     "ts-jest": "^29.2.5",
     "typescript": "^5"
   }
-}
+}

src/app/layout.tsx

@@ -15,7 +15,10 @@ const DynamicQueryProvider = dynamic(() => import('@/components/providers/query-
 
 export const metadata: Metadata = {
   title: "Discord Clone By Berkan Ümütlü",
-  description: "Built with Next.js 14, React, Socket.io, Prisma, Tailwind, PostgreSQL"
+  description: "Built with Next.js 14, React, Socket.io, Prisma, Tailwind, PostgreSQL",
+  icons: {
+    apple: '/logo/apple-touch-icon.ico'
+  }
 };
 
 export default function RootLayout({