s1mpleog / slack

realtime slack clone created using convex and next js 14

---

🚀 Real-Time Communication App (Slack Clone)

A fullstack, real-time communication application inspired by Slack, featuring workspaces, channels, direct messaging, threads, and more. Built with Next.js 14 for the frontend, Convex Auth for authentication, and Tailwind CSS for a sleek and responsive UI. Convex is used as the backend to handle real-time communication and database management.

📚 Table of Contents

• 🎯 Overview
• ✨ Key Features
• 🔧 Technologies Used
• 📦 Project Setup
• 🚀 Deployment
• 🤝 Contributing
• 📄 License

🎯 Overview

This project is a real-time messaging application designed to improve communication in teams. The app allows users to create workspaces, channels, and 1:1 conversations, all with real-time updates. Convex powers the backend, ensuring seamless and scalable communication while keeping the user experience smooth.

✨ Key Features

• Real-Time Messaging: Instant updates using Convex for all channels and conversations.
• Workspaces and Channels: Organize conversations with distinct workspaces and channels.
• Direct Messaging: Send private 1:1 messages.
• Threaded Conversations: Keep discussions organized with thread-based replies.
• Message Reactions: React to messages with emojis.
• Message Editing & Deletion: Modify or remove messages.
• Role-Based Access Control: Manage permissions for different user roles (admin, member).
• Image Attachments: Share images within conversations.
• Authentication: Secure sign-in with multiple providers using NextAuth v5.
• Invite System: Easily invite team members via email or invite codes.
• User Profiles: Customize and manage your user profile.

🔧 Technologies Used

This project is built using modern technologies for fullstack web development:

• Frontend: Next.js 14, Tailwind CSS, Shadcn UI
• Backend: Convex
• Authentication: Convex Auth
• Real-Time Updates: WebSockets powered by Convex
• Deployment: Vercel

📦 Project Setup

Prerequisites

• Node.js (version 18+)
• Convex account for backend management

Steps to Run Locally

1. Clone the repository:

   git clone https://github.com/s1mpleog/slack
   cd slack

2. Install dependencies:

   npm install

3. Set up the environment variables:

   Create a .env file in the root of your project with the following variables:

   CONVEX_DEPLOYMENT=your_convex_deployment
   NEXT_PUBLIC_CONVEX_URL=your_convex_url
   GITHUB_CLIENT_ID=your_github_client_id
   GITHUB_CLIENT_SECRET=your_github_client_secret
   GOOGLE_CLIENT_ID=your_google_client_id
   GOOGLE_CLIENT_SECRET=your_google_client_secret
   

4. Start the development server:

   npm run dev

5. Open the app: Go to http://localhost:3000 to see your app in action.

🚀 Deployment

To deploy this app on Vercel, follow these steps:

1. Push the code to GitHub.
2. Connect your GitHub repository to Vercel.
3. Add the required environment variables (same as in your .env file).
4. Click Deploy! 🎉

🤝 Contributing

Contributions are welcome! Here's how you can get involved:

1. Fork the repository.
2. Create a new feature branch (git checkout -b feature/new-feature).
3. Make your changes and commit them (git commit -m 'Add new feature').
4. Push your branch (git push origin feature/new-feature).
5. Open a Pull Request.

📄 License

This project is licensed under the MIT License. See the LICENSE file for details.

---