https://github.com/rehmannry/slackclone
A Slack clone built using Next.js 15, React 19, and Tailwind CSS. This project leverages Convex for real-time data handling and various Radix UI components for a modern and responsive UI.
https://github.com/rehmannry/slackclone
cloneapp nextjs15 reactjs slack typescript
Last synced: 4 months ago
JSON representation
A Slack clone built using Next.js 15, React 19, and Tailwind CSS. This project leverages Convex for real-time data handling and various Radix UI components for a modern and responsive UI.
- Host: GitHub
- URL: https://github.com/rehmannry/slackclone
- Owner: rehmanNRY
- Created: 2024-11-10T18:20:30.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-01-27T04:54:28.000Z (over 1 year ago)
- Last Synced: 2025-04-09T08:19:43.471Z (about 1 year ago)
- Topics: cloneapp, nextjs15, reactjs, slack, typescript
- Language: TypeScript
- Homepage: https://slack-clone-woad.vercel.app
- Size: 1.32 MB
- Stars: 1
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Slack Clone
A Slack-like real-time messaging platform built using **Next.js** and **Convex**. This project is a feature-rich and interactive clone of the Slack platform, providing seamless team communication capabilities.
🚀 Live Link: https://slack-nry.vercel.app/
---
## 🎯 Features
- Real-time messaging
- Emoji support
- Rich text editor
- User authentication
- Responsive design
- Theming with Tailwind CSS
- Modular and scalable architecture
---
## 🚀 Technologies Used
- **Next.js 15**: Framework for building React-based web applications.
- **Convex**: Real-time backend for data synchronization.
- **Tailwind CSS**: Utility-first CSS framework for styling.
- **Radix UI**: Accessible React primitives.
- **React Icons**: Icons for React applications.
- **Jotai**: State management.
- **Date-fns**: Utility library for date manipulation.
- **Quill**: Rich text editor.
- **Framer Motion**: Animations.
---
## 📂 Folder Structure
```
.git/ # Git version control metadata
.next/ # Compiled Next.js build files
convex/ # Convex backend configuration
node_modules/ # Project dependencies
public/ # Static assets (images, icons, etc.)
src/ # Source code
├── app/ # Pages and layouts for Next.js
├── components/ # Reusable React components
├── features/ # Feature-specific components and logic
├── hooks/ # Custom React hooks
├── lib/ # Utility functions and libraries
middleware.ts # Middleware for routing/authentication
.env.local # Environment variables
.eslintrc.json # ESLint configuration
.gitignore # Files and directories to ignore in Git
components.json # Component-specific configuration
next-env.d.ts # TypeScript declarations for Next.js
next.config.ts # Next.js configuration
package.json # Project metadata and dependencies
postcss.config.mjs # PostCSS configuration for Tailwind CSS
README.md # Project documentation (this file)
sampleData.json # Sample data for testing
tailwind.config.ts # Tailwind CSS configuration
tsconfig.json # TypeScript configuration
```
---
## 🛠️ Dependencies
Here are the key dependencies used in this project:
### Production Dependencies
```json
{
"@auth/core": "^0.36.0",
"@convex-dev/auth": "^0.0.74",
"@emoji-mart/react": "^1.1.1",
"@radix-ui/react-avatar": "^1.1.1",
"@radix-ui/react-dialog": "^1.1.5",
"clsx": "^2.1.1",
"convex": "^1.17.0",
"date-fns": "^4.1.0",
"jotai": "^2.10.2",
"next": "15.0.3",
"react": "19.0.0",
"tailwindcss": "^3.4.1"
}
```
### Development Dependencies
```json
{
"@types/react": "^18",
"eslint": "^8",
"postcss": "^8",
"typescript": "^5"
}
```
---
## 🔐 Environment Variables
Ensure you set up the following environment variables in your `.env.local` file:
```env
# Deployment used by `npx convex dev`
CONVEX_DEPLOYMENT=
# Public Convex URL
NEXT_PUBLIC_CONVEX_URL=
```
Replace `` and `` with the appropriate values for your Convex deployment.
---
## 🤝 Connect with Me
If you have any questions or want to collaborate, feel free to connect with me on LinkedIn:
[**My LinkedIn Profile**](https://www.linkedin.com/in/rehman-nry/)
---
Happy Coding! 😊