Selek π¬
A real-time messaging application (Slack clone) built with modern web technologies, featuring workspaces, channels, direct messages, and real-time communication.
Tech stack β‘
- NestJS (with Bun runtime) β backend framework with TypeScript
- React 18 β frontend framework with TypeScript
- PostgreSQL (with postgres.js) β database
- Socket.IO β real-time WebSocket communication
- JWT β stateless authentication
- TailwindCSS β utility-first CSS styling
- React Router v7 β SPA routing
- SWR β server state management
- Vite β build tool for frontend
- Docker β containerization and deployment
Key features β¨
- π’ Multi-tenant workspaces with role-based permissions
- π¬ Real-time messaging with Socket.IO
- π Conversation types: channels, group messages, and direct messages
- π User authentication with JWT-based sessions
- π₯ Workspace management: add/remove members with roles
- π± Responsive design optimized for mobile and desktop
- π Toast notifications and sound alerts
- βΎοΈ Infinite scroll for message history
- β‘ Optimistic UI updates for smooth UX
- π¨ Consistent orange-themed design system
What I learned π‘
Building Selek taught me a lot about:
- π Implementing role-based access control with workspace and conversation permissions.
- β‘ Using Socket.IO for real-time features like message delivery, user presence, and room-based isolation.
- ποΈ Working with PostgreSQL migrations and database seeding for multi-tenant architecture.
- π― Building responsive chat interfaces with infinite scroll and optimistic updates.
- π³ Setting up Docker deployment with proper environment configuration.
Live demo π
Try it at selek.hawari.dev. Create workspaces, invite members, and experience real-time messaging!