Kizuna
A full-featured real-time communication platform built with Firebase and WebRTC. Supports private messaging, group chats, voice and video calls, and rich media sharing — designed for speed, reliability, and a clean user experience.
What Makes It Different
Kizuna focuses on fast, reliable communication in both private and group contexts. It combines real-time messaging, presence signals, and media sharing into a single responsive interface.
The platform is designed for practical collaboration: typing indicators, read receipts, voice/video calling, and rich media support all work together to keep conversations fluid and context-rich.
Under the hood, Firebase Firestore powers low-latency synchronization while WebRTC enables one-tap voice and video communication. Framer Motion is used to keep interactions smooth without compromising performance.
Core Features
Real-Time Messaging
Firebase Firestore-powered chat with read receipts, typing indicators, and group chat support.
Group Collaboration
Built for both private conversations and shared channels, with consistent real-time updates across participants.
Voice & Video Calls
One-tap WebRTC calls with no third-party relay servers.
Rich Media
Voice messages, file sharing, and in-app media previews for faster communication.
Performance-Focused UX
Interaction flows are optimized for speed and clarity, with smooth transitions and responsive state updates.
Production Deployment
Deployed on Vercel with a Firebase-backed architecture for reliable real-world usage.
Tech Stack
React 18
Frontend
TypeScript
Language
Firebase Firestore
Database
Firebase Auth
Auth
Firebase Storage
Storage
WebRTC
Calls
Framer Motion
Animation
Tailwind CSS
Styling
Vercel
Deployment
Firestore Data Model
The data model is designed around a shared room document that participants join. Messaging, presence, and call signaling all attach to this core structure to keep queries simple and real-time subscriptions efficient.
rooms/{roomId}
├── members: [uid1, uid2, ...]
├── createdAt: timestamp
├── roomType: "dm" | "group"
│
├── messages/{messageId}
│ ├── senderId, content, type
│ ├── readBy[], reactions
│ └── timestamp
│
├── media/{mediaId}
│ ├── uploaderId, fileUrl, mimeType
│ └── createdAt
│
├── presence/{uid}
│ ├── typing, lastSeen
│ └── updatedAt
│
└── calls/{callId}
├── offer, answer
├── iceCandidates[]
└── status