https://github.com/aleksanderpalamar/team-chat-application
xTeam Chat is an exciting Fullstack application built with Next.js 13, Socket.io, Prisma, Tailwind, and MySQL. This application enables teams to collaborate efficiently, providing a real-time chat experience. Harness the power of modern technology to enhance your team's communication
https://github.com/aleksanderpalamar/team-chat-application
chat mysql nextjs13 prisma socket-io tailwindcss
Last synced: 9 months ago
JSON representation
xTeam Chat is an exciting Fullstack application built with Next.js 13, Socket.io, Prisma, Tailwind, and MySQL. This application enables teams to collaborate efficiently, providing a real-time chat experience. Harness the power of modern technology to enhance your team's communication
- Host: GitHub
- URL: https://github.com/aleksanderpalamar/team-chat-application
- Owner: aleksanderpalamar
- License: mit
- Created: 2023-09-07T22:18:23.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2023-09-21T15:48:13.000Z (over 2 years ago)
- Last Synced: 2025-04-04T16:46:57.799Z (about 1 year ago)
- Topics: chat, mysql, nextjs13, prisma, socket-io, tailwindcss
- Language: TypeScript
- Homepage: https://team-chat-application-production-9355.up.railway.app/
- Size: 505 KB
- Stars: 5
- Watchers: 1
- Forks: 4
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Fullstack application xTeam Chat: Next.js 13, Socket.io, Prisma, Tailwind, MySQL
## Features
- [x] Real-time messaging using Socket.io
- [x] Send attachments as messages using UploadThing
- [x] Delete & Edit messages in real time for all users
- [x] Create Text, Audio and Video call Channels
- [x] 1:1 conversation between members
- [x] 1:1 video calls between members
- [x] Member management (Kick, Role change Guest / Moderator)
- [x] Unique invite link generation & full working invite system
- [x] Infinite loading for messages in batches of 10 (tanstack/query)
- [x] Server creation and customization
- [x] Beautiful UI using TailwindCSS and ShadcnUI
- [x] Full responsivity and mobile UI
- [x] Light / Dark mode
- [x] Websocket fallback: Polling with alerts
- [x] ORM using Prisma
- [x] MySQL database using Planetscale
- [x] Authentication with Clerk
## Contributing
You can contribute to this project by creating a PR on the [GitHub repository](https://github.com/aleksanderpalamar/team-chat-application).
### Prerequisites
**Node version v18.x.x**
### Cloning the repository
```shell
git clone git@github.com:aleksanderpalamar/team-chat-application.git
```
### Install packages
```shell
cd team-chat-application
npm i
```
### Setup .env file
```js
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
CLERK_SECRET_KEY=
NEXT_PUBLIC_CLERK_SIGN_IN_URL=
NEXT_PUBLIC_CLERK_SIGN_UP_URL=
NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=
NEXT_PUBLIC_SITE_URL=
DATABASE_URL=
UPLOADTHING_SECRET=
UPLOADTHING_APP_ID=
LIVEKIT_API_KEY=
LIVEKIT_API_SECRET=
NEXT_PUBLIC_LIVEKIT_URL=
```
### Setup Prisma
Add MySQL Database I used PlanetScale
```shell
npx prisma generate
npx prisma db push
```
### Start the application
```shell
npm run turbo:dev
```
## Available Commands
Running commands with `npm run [command]`
| Command | Description |
| --- | --- |
| `dev` | Start a development instance of the application |