A production-grade chat client built with Next.js 16, React 19, TypeScript, Tailwind CSS, Zustand, and WebSocket — featuring OTP auth, group conversations, reactions, read receipts, and live updates.
| Landing Page | Sign In | Chat |
|---|---|---|
 |
 |
 |
| Category | Details |
|---|---|
| 🔐 Authentication | Email OTP sign-in with persisted session state and middleware-protected routes |
| 💬 Messaging | Direct messages and group conversations with full CRUD support |
| 👥 Contacts | Contact search, contact requests, and incoming request management |
| ⚡ Real-time | WebSocket-powered live updates with reconnect handling |
| 👀 Presence | Typing indicators, read receipts, and viewing events |
| 😄 Reactions | Emoji reactions on messages |
| 🌗 Theming | Light/dark mode via next-themes |
| 📱 Responsive | Mobile-first layout using Tailwind CSS and Radix UI |
| Layer | Technology |
|---|---|
| Framework | Next.js 16 — App Router |
| UI | React 19, TypeScript 5 |
| Styling | Tailwind CSS 4, Radix UI, shadcn-style components |
| Animations | Framer Motion |
| Icons | lucide-react |
| State | Zustand 5 |
| Forms | React Hook Form |
| HTTP | Axios with typed API envelopes and interceptors |
| Realtime | Native WebSocket |
| Tooling | pnpm, ESLint |
- Node.js 22 or newer
- pnpm 9 or newer
- A running backend that implements the API and WebSocket contracts in
docs/
1. Clone the repository
git clone https://github.com/dinhdev-nu/stello.git
cd stello2. Install dependencies
pnpm install3. Configure environment (optional — only if using a separate backend host)
# .env.local
NEXT_PUBLIC_API_BASE_URL=http://localhost:8080/api/v1If omitted, the app defaults to
/api/v1.
4. Start the development server
pnpm run devOpen http://localhost:3000 in your browser. 🎉
| Command | Description |
|---|---|
pnpm run dev |
Start the local development server |
pnpm run build |
Create an optimized production build |
pnpm run start |
Serve the production build |
pnpm run lint |
Run ESLint across the project |
Backend contracts are documented in the docs/ folder:
| File | Description |
|---|---|
auth_openapi.md |
Authentication endpoints (OTP flow) |
user_openapi.md |
User and contact management |
room_openapi.md |
Conversation and group rooms |
message_openapi.md |
Message CRUD and reactions |
ws_open.md |
WebSocket event contracts |
api.md |
General API conventions |
Issues and pull requests are welcome once the project is licensed for public collaboration.
When submitting a PR, please:
- Keep changes focused and minimal in scope
- Describe the user-facing impact clearly
- Include screenshots or recordings for any UI changes
Before the public release, the following files should be added:
-
LICENSE -
CONTRIBUTING.md -
SECURITY.md -
.env.example
Made with ❤️ by dinhdev-nu