A full-featured, real-time messaging platform built with modern web technologies. Clean Slack-inspired UI with channels, DMs, threads, reactions, and real-time updates.
- Real-time messaging via Server-Sent Events
- Channels — create, join, browse public channels
- Direct messages — 1:1 conversations
- Threads — reply to messages in threaded conversations
- Reactions — emoji reactions on any message (8 quick reactions)
- Authentication — signup/login with JWT sessions
- Rich text — bold, italic, code formatting
- Dark mode — Slack-inspired dark theme
- Responsive — works on all screen sizes
| Layer | Technology |
|---|---|
| Framework | Next.js 15 (App Router, Turbopack) |
| Language | TypeScript |
| Database | SQLite via Prisma ORM |
| Styling | Tailwind CSS 4 |
| Auth | JWT + bcrypt |
| Real-time | Server-Sent Events |
| Icons | Lucide React |
# Install dependencies
npm install
# Setup database + seed demo data
npm run setup
# Start dev server
npm run devOpen http://localhost:3000 and sign in with demo credentials:
| Password | |
|---|---|
| alice@demo.com | password123 |
| bob@demo.com | password123 |
| carol@demo.com | password123 |
src/
├── app/
│ ├── (auth)/ # Login & signup pages
│ ├── api/ # API routes
│ │ ├── auth/ # Authentication endpoints
│ │ ├── channels/ # Channel CRUD + browse/join
│ │ ├── messages/ # Messages + reactions
│ │ ├── dm/ # Direct messages
│ │ ├── sse/ # Server-Sent Events endpoint
│ │ └── users/ # User listing
│ └── workspace/ # Main workspace UI
├── components/ # React components
│ ├── Avatar.tsx # User avatar with status
│ ├── ChatArea.tsx # Main chat + thread panel
│ ├── MessageInput.tsx # Rich message composer
│ ├── MessageItem.tsx # Message bubble with reactions
│ └── Sidebar.tsx # Channel/DM sidebar + modals
├── lib/
│ ├── auth.ts # JWT auth helpers
│ ├── db.ts # Prisma client
│ ├── sse.ts # SSE broadcast manager
│ └── utils.ts # Utility functions
└── prisma/
├── schema.prisma # Database schema
└── seed.ts # Demo data seeder
MIT