Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rehmannry/slackclone
https://github.com/rehmannry/slackclone
Last synced: 29 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/rehmannry/slackclone
- Owner: rehmanNRY
- Created: 2024-11-10T18:20:30.000Z (2 months ago)
- Default Branch: main
- Last Pushed: 2024-12-16T10:27:44.000Z (about 1 month ago)
- Last Synced: 2024-12-16T11:29:46.954Z (about 1 month ago)
- Language: TypeScript
- Size: 495 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Slack Clone
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.
## Features
- **Authentication**: Powered by @auth/core and @convex-dev/auth.
- **Real-time Updates**: Uses Convex for real-time data sync.
- **Responsive UI**: Built with Tailwind CSS and Radix UI components.
- **Dark Mode**: Theme switching enabled through next-themes.
- **Iconography**: Lucide-react and react-icons for consistent icon usage.
- **State Management**: Jotai for global state management.
- **Drag & Resize**: Implemented using react-resizable-panels.
## Tech Stack
- **Framework**: Next.js 15
- **Frontend**: React 19, Tailwind CSS
- **Real-time Data**: Convex
- **State Management**: Jotai
- **UI Components**: Radix UI
- **Icons**: Lucide-react, react-icons
- **Animation**: tailwindcss-animate
## Installation
1. Clone the repository:
```bash
$ git clone https://github.com/your-username/clone-slack.git
$ cd clone-slack
```
2. Install dependencies:
```bash
$ npm install
```
3. Set up environment variables:
Create a `.env.local` file in the root directory and add the necessary keys.
```env
NEXT_PUBLIC_API_URL=your-api-url
AUTH_SECRET=your-auth-secret
```
4. Run the development server:
```bash
$ npm run dev
```
Open [http://localhost:3000](http://localhost:3000) to view the app.
## Scripts
- **dev**: Starts the development server
- **build**: Builds the application for production
- **start**: Starts the production server
- **lint**: Lints the project
## Folder Structure
```
/clone-slack
├── components
├── pages
├── public
├── styles
├── utils
└── convex
```
## Dependencies
- **@auth/core**: Authentication core for the app.
- **convex**: Real-time data handling.
- **tailwindcss**: Utility-first CSS framework.
- **radix-ui**: Accessible UI components.
- **jotai**: State management library.
- **lucide-react**: Icon library.
- **react-resizable-panels**: Drag and resizable panels.
## Dev Dependencies
- **eslint**: Linter for identifying code issues.
- **typescript**: TypeScript support.
- **postcss**: For Tailwind CSS processing.
## License
This project is licensed under the MIT License.