A modern, responsive chat app built with Next.js and Socket.IO featuring temporary rooms that expire when all users leave.
- 🏠 Create Temporary Rooms - Generate unique room codes instantly
- 👥 Real-time Messaging - Send and receive messages instantly
- 🔒 Room-based Chat - Private conversations in dedicated rooms
- 📱 Responsive Design - Beautiful UI that works on all devices
- ⚡ Auto-cleanup - Rooms automatically expire when empty
- 🎨 Modern UI - Clean, intuitive interface with Tailwind CSS
- 🔄 Live User Count - See how many users are in your room
- 📋 Easy Sharing - Copy room codes to clipboard
- 🌙 Theme Support - Built-in dark/light theme switching
- Setting room to public and private, and showing public rooms on dashboard
- User joining message in group
- Displaying all users in group in option to private message
- Replying to messages
- Attachments
- Voice messages
- May bring voice and video call
- Next.js 15.3.0 - React framework with App Router
- TypeScript - Type-safe JavaScript
- Tailwind CSS 4.1.11 - Utility-first CSS framework
- Shadcn - UI components library
- Radix UI - Headless UI components
- Socket.io-client 4.8.1 - Real-time client-side communication
- Lucide React - Beautiful icons
- Sonner - Toast notifications
- Node.js - JavaScript runtime
- Express.js 4.18.2 - Web application framework
- Socket.IO 4.7.5 - Real-time server-side communication
- TypeScript - Type-safe development
- Node.js 18+
- npm 10+
-
Clone the repository
git clone https://github.com/yourusername/chatterz.git cd chatterz -
Install dependencies
npm install
-
Start the development servers
npm run dev
-
Open your browser
- Client: http://localhost:3001
- Server: http://localhost:3000
chatterz/
├── 📁 apps/
│ ├── 📁 client/ # Next.js frontend application
│ │ ├── 📁 app/ # App Router pages and layouts
│ │ ├── 📁 components/ # Reusable UI components
│ │ └── 📁 public/ # Static assets
│ └── 📁 server/ # Express.js backend server
├── 📁 packages/
│ ├── 📁 eslint-config/ # Shared ESLint configuration
│ ├── 📁 typescript-config/ # Shared TypeScript configuration
│ └── 📁 ui/ # Shared UI component library
├── 📄 package.json # Root package configuration
├── 📄 turbo.json # Turbo build configuration
└── 📄 README.md # Project documentation
- Click "Create New Room"
- Copy the generated room code
- Share the code with friends
- Enter your name
- Enter the room code
- Click "Join Room"
- Start chatting!
- Real-time messaging with instant delivery
- User count updates live as people join/leave
- Message history loads when joining existing rooms
- Auto-scroll to latest messages
- Responsive design works on mobile and desktop
In the project root:
npm run dev- Start both client and server in development modenpm run build- Build the entire projectnpm run lint- Run ESLint across all packagesnpm run check-types- Run TypeScript type checkingnpm run format- Format code with Prettier
- Socket.IO handles bidirectional communication
- Room-based messaging with automatic cleanup
- Event-driven architecture for scalability
- React hooks for local state
- Socket events for real-time updates
- TypeScript interfaces for type safety
- Tailwind CSS for utility-first styling
- Radix UI for accessible components
- Responsive design with mobile-first approach
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the project
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is open source and available under the MIT License.