STRIFE - Group chat that's all fun

An end-to-end full-stack application and real-time #strife app with all servers, channels, video calls, audio calls, editing , deleting messages and manage members role (admin, guest, moderator). You can check out live demo of the application by clicking here

Getting Started

The fastest way to get started with #Strife i sby following these steps.

Step 1: Clone the git repository

https://github.com/1999-sahil/strife-platform-repo.git

Step 2: Install all dependencies or devDependencies

npm install or npm i

Step 3: Run the development server

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Inter, a custom Google Font.

Application Images

SQL Database Design

Home page (Light Mode)

Home page (Dark Mode)

After Creating Server

Audio and Video Channel

Fully Responsive and models for different tasks

Key Features of the Strife application

• ⏱️ Real-time messaging using Socket.io
• 🚀 Send attachments as messages using UploadThing
• 📩 Delete and Edit messages in real-time for all users
• 🔰 Create Text, Audio, Video call channels
• 📢 1:1 conversation between members
• 🎥 1:1 video call between members
• 🛡️ Member management [Kick member, Role-change (Guest/Moderator)]
• 🔗 Unique invite link generation and full working invite system
• 🧬 Infinite loading for messages in batches of 10 using @tanstack/query
• 📀 Server creation and customization
• ⛺ Beautiful User-interface (UI) using Tailwind CSS abd Shadcn-UI
• 💯 Full responsivity and mobile UI
• 🌗 Light and Dark mode theme
• ⚡ Websocket fallback: Polling with alerts
• 💤 ORM using Prisma
• 🔋 MySql database using @tiDb Cloud
• 🔐 Authentication with Clerk

Built With

• Nextjs - A react.js framework
• Tailwind CSS - A CSS framework to design UI of the application
• tiDB Serverless MySql - An open-source distributed SQL database that supports Hybrid Transactional and Analytical Processing (HTAP) workloads. It is MySQL compatible and features horizontal scalability, strong consistency, and high availability.
• Prisma - An ORM that makes working with databases easy
• Socket.io - A library that enables bi-directional and event communication between a client and a server
• Zustand - A state management tool for managing state. A centralized state and reducing prop drilling in application
• tanstack-query - A library used for data retrieval and catching in modern web apps.
• uploadThing - An open-source tool that streamlines the process of adding file upload features to full-stack typescript applications
• clerk-auth - An authetication platform providing login via passwords, social providers, one-time email/SMS codes.
• LiveKit - LiveKit is a realtime platform that enables developers to build video, voice, and data capabilities into their applications. Building on WebRTC, it supports a broad range of frontend and backend platforms.

Deployement

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

Free Alternatives to deploy application

• Netlify
• Render
• Railway
• Vercel