https://github.com/dannweeeee/metacord
Instant Messaging and VoIP Social Platform using Socket.io
https://github.com/dannweeeee/metacord
mysql nextjs13 planetscale prisma reactjs socket-io tailwindcss
Last synced: 6 months ago
JSON representation
Instant Messaging and VoIP Social Platform using Socket.io
- Host: GitHub
- URL: https://github.com/dannweeeee/metacord
- Owner: dannweeeee
- Created: 2023-10-23T10:37:46.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-11-02T05:04:41.000Z (over 2 years ago)
- Last Synced: 2025-02-10T11:14:08.857Z (over 1 year ago)
- Topics: mysql, nextjs13, planetscale, prisma, reactjs, socket-io, tailwindcss
- Language: TypeScript
- Homepage: https://metacord.up.railway.app
- Size: 191 KB
- Stars: 0
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Metacord
## Overview
Metacord is an Instant Messaging and VoIP Discord Clone built with Next.js 13, React, Socket.io, Prisma, TailwindCSS and MySQL.
**Visit the Deployed Railway Website at:** https://metacord.up.railway.app/
## Features
- **Real-time Messaging:** Utilizing Socket.io for seamless real-time communication among users.
- **Multimedia Support:** Send attachments as messages using UploadThing.
- **Editing and Deleting:** Real-time editing and deleting of messages visible to all users.
- **Voice and Video Channels:** Create text, audio, and video call channels for engaging conversations.
- **1:1 Conversations:** Enable private one-on-one messaging between members.
- **Video Calls:** Facilitate one-on-one video calls between members.
- **Member Management:** Kick, change roles (Guest/Moderator), and manage members effectively.
- **Invite System:** Generate unique invite links and implement a fully functional invite system.
- **Infinite Loading:** Display messages in batches of 10 using @tanstack/query for smooth scrolling.
- **Server Customization:** Allow users to create and customize their servers.
- **UI Design:** Beautiful user interface using TailwindCSS and ShadcnUI.
- **Responsivity:** Ensure a responsive design with full mobile UI support.
- **Light/Dark Mode:** Implement a toggleable light and dark mode for user preference.
- **Websocket Fallback:** Implement WebSocket fallback using polling with alerts.
- **ORM with Prisma:** Utilize Prisma for Object-Relational Mapping for a seamless database experience.
- **MySQL Database:** Store data in a MySQL database, leveraging Planetscale for efficient scaling.
- **Authentication:** Secure user authentication with Clerk.
## Technologies
- **Next.js 13:** A React framework for building server-rendered applications.
- **React:** A JavaScript library for building user interfaces.
- **Socket.io:** Enables real-time, bidirectional, and event-based communication.
- **Prisma:** A modern database toolkit that simplifies database access with type-safe queries.
- **TailwindCSS:** A utility-first CSS framework for rapidly building custom designs.
- **MySQL:** A popular relational database management system for data storage.
- **Planetscale:** Provides a scalable and highly available database platform for MySQL.
## Tools
Tools that I used:
- [**Clerk**](https://clerk.com/) - For Authentication, User Management and Webhooks
- [**Shadcn**](https://ui.shadcn.com/) - For Accessible, Open Source User Interface Components
- [**Uploadthing**](https://uploadthing.com/) - For File Uploads (Mainly Image)
- [**LiveKit**](https://livekit.io/) - For Audio and Video Calls
- [**Zod**](https://zod.dev/) - For schema declaration and validation library (Avoided Duplicates especially for Multithreading Feature)
## Installation
Clone the repository
```
git clone https://github.com/dannweeeee/metacord.git
```
## Deployment
First install the dependencies with the following command:
```
npm install
```
Thereafter run the following command to run Metacord locally:
```
npm run dev
```