A real-time communication platform with rooms, video calls, and seamless messaging
Portal is a modern real-time communication platform. It enables users to create rooms, send direct messages, make video calls, and collaborate seamlessly with friends and teams.
- Direct Messages — Send private messages to friends
- Room Chat — Group conversations with multiple participants
- Media Sharing — Share images and files in conversations
- Message Reactions — React to messages with emojis
- @Mentions — Tag specific users in rooms
- Message Search — Search through conversation history
- Typing Indicators — See when others are typing
- Friend Management — Send and accept friend requests
- Online Presence — See who's online or away
- Friend Chat — Dedicated 1:1 conversation interface
- Real-time Video — Face-to-face communication
- Screen Sharing — Share your screen during calls
- Group Calls — Multi-participant video conversations
- Persistent Calls — Continue calls while browsing
- Custom Accent Colors — Personalize your interface
- Profile Customization — Set avatar and username
- User Authentication — Secure login with Clerk
- Account Deletion — Complete data control
| Technology | Purpose |
|---|---|
| Next.js 15 | React framework with App Router |
| React 19 | UI library |
| TypeScript | Type safety |
| Tailwind CSS | Styling |
| Framer Motion | Animations |
| Zustand | State management |
| Radix UI | Accessible components |
| Technology | Purpose |
|---|---|
| Convex | Real-time database & functions |
| Clerk | Authentication |
| PeerJS | WebRTC peer connections |
- @hugeicons/react — Icon system
- emoji-picker-react — Emoji selection
- react-dropzone — File uploads
- sonner — Toast notifications
- Node.js 18+
- npm or yarn
- A Clerk account (for authentication)
- A Convex project (for backend)
# Clone the repository
git clone https://github.com/your-username/portal.git
cd portal
# Install dependencies
npm install
# Set up environment variables
cp .env.example .env.localCreate a .env.local file with the following:
# Clerk Authentication
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_publishable_key
CLERK_SECRET_KEY=your_clerk_secret_key
# Convex
NEXT_PUBLIC_CONVEX_URL=your_convex_url
CONVEX_DEPLOY_KEY=your_convex_deploy_key
# Optional: Custom deployment
NEXT_PUBLIC_SITE_URL=http://localhost:3000npm run devOpen http://localhost:3000 to view the app.
portal/
├── app/ # Next.js App Router pages
│ ├── portal/ # Main app (authenticated)
│ │ ├── (main)/ # Dashboard, friends, rooms
│ │ ├── profile/ # User profile settings
│ │ └── room/[room_id]/ # Room chat view
│ ├── login/ # Clerk login page
│ └── signup/ # Clerk signup page
├── src/
│ ├── components/ # React components
│ │ ├── features/ # Feature-specific components
│ │ │ ├── calls/ # Call UI
│ │ │ ├── friends/ # Friend management
│ │ │ ├── rooms/ # Room management
│ │ │ └── profile/ # Profile settings
│ │ ├── layout/ # Layout components
│ │ ├── landing/ # Landing page components
│ │ ├── ui/ # Reusable UI components
│ │ └── mocks/ # Mock components for design
│ ├── contexts/ # React contexts
│ └── lib/ # Utility functions
├── convex/ # Convex backend
│ ├── schema.ts # Database schema
│ ├── messages.ts # Message CRUD
│ ├── rooms.ts # Room management
│ ├── friends.ts # Friend system
│ ├── calls.ts # Call handling
│ └── ...
├── public/ # Static assets
└── docs/ # Documentation
User → Clerk Auth → Convex Auth → Portal Dashboard
↓
┌─────────┼─────────┐
↓ ↓ ↓
Rooms Friends Profile
↓ ↓ ↓
Messages Chat UI Settings
Convex provides real-time subscriptions for:
- Messages — Instant message delivery
- Presence — Online/offline status
- Typing — Typing indicators
- Notifications — Real-time alerts
- Calls — Live call state
PeerJS (WebRTC)
↓
Signaling via Convex
↓
P2P Media Streams
| Command | Description |
|---|---|
npm run dev |
Start development server |
npm run build |
Build for production |
npm run start |
Start production server |
npm run lint |
Run ESLint |