Roadmap
Future
4Auth: add 3rd party authentication (Google/Apple..)
Internationalization: add i18n support
Security: apply rate-limiting to API
Feature: add photo sending
TODO
4SEO: implement metadata strategy
UX: add skeleton loaders
Performance: optimize image loading
Storage: verify multi-provider architecture works with Cloudinary or S3
In Progress
4UI: refactor for mobile responsiveness
Frontend: assure API calls made by react-query
AI: add a summarize unread messages feature
AI: add make me sound smart
Complete
4Backend: assure BLL, DAL architecture
Realtime: add multi-provider architecture
Storage: add UploadThing
DevOps: setup CI/CD pipeline that deploys backend and frontend separately
Key Features
Real-Time Messaging
Instant message delivery with real-time updates powered by Socket.IO
Secure Communications
All communications secured with JWT authentication
Read Receipts
Know when your messages have been delivered and read
Responsive Design
Optimized for both mobile and desktop experiences
Persistent Storage
Messages stored securely with MongoDB and cached for optimal performance
Type-Safe Codebase
End-to-end type safety with TypeScript and Zod validation
New: Cloud Storage Infrastructure
Flexible File Storage
Our latest update introduces a versatile file upload infrastructure with a provider-agnostic abstraction layer that works seamlessly across both server and client.
Profile & Group Photos
Personalize your profile and group conversations with custom images
Provider Flexibility
Easily switch between storage providers (UploadThing, Cloudinary, S3) without code changes
Unified Interface
Consistent API for file operations with built-in validation and error handling
import initializeStorageService from "@/lib/storage";
async function uploadProfileImage(file) {
// Get storage service based on environment config
const storageService = await initializeStorageService();
try {
const response = await storageService.uploadFile(file, {
type: 'image',
maxFileSize: 4 * 1024 * 1024, // 4MB
});
return response.url;
} catch (error) {
console.error("Upload failed:", error);
throw error;
}
}Currently using UploadThing with seamless migration path to other providers
Flexible Real-time Architecture
Provider-Agnostic Messaging
Our real-time messaging system features a robust abstraction layer that enables seamless deployment across different environments while maintaining a consistent developer experience.
Environment Adaptability
Uses Socket.IO locally and Pusher in serverless production environments
Type-Safe Messaging
Shared NPM package with type definitions ensures consistent communication
Optimistic UI Updates
Integrated with React Query for responsive user experience with cache invalidation
import { useRealtime } from '@/hooks/useRealtime';
import { RealtimeEventType } from '@/lib/realtime';
function ChatComponent() {
// Subscribe to messages for this user's channel
const { isConnected, lastEvent } = useRealtime({
channel: 'user@example.com',
events: [RealtimeEventType.MESSAGE_UPDATE],
autoConnect: true
});
useEffect(() => {
if (lastEvent?.type === RealtimeEventType.MESSAGE_UPDATE) {
// Update React Query cache with new message
queryClient.setQueryData('messages', (old) =>
updateMessageCache(old, lastEvent.data));
}
}, [lastEvent]);
return (
<div>
{isConnected ? '🟢 Connected' : '🔴 Offline'}
{/* Chat messages */}
</div>
);
}Same interface regardless of underlying provider
App Preview
Technology Stack
Frontend
Built with React, Next.js, and Tanstack Query for efficient state management and data fetching
Backend
Node.js Express server with clean architecture separating business and data layers
Real-Time Communications
Socket.IO for instant message delivery and notifications
UI Framework
Tailwind CSS and ShadCN components for a beautiful responsive design
File Storage
Flexible file storage abstraction with UploadThing integration for seamless file sharing
Project Architecture
Backend Structure
The backend follows a clean architecture pattern with separate business and data access layers:
- RESTful API endpoints for client-server communication
- Socket.IO server for real-time message delivery
- Prisma ORM for type-safe database operations
- MongoDB for persistent storage of messages and user data
- JWT authentication to secure all communications
- File storage abstraction for handling uploaded files
Frontend Architecture
The frontend uses modern React patterns for optimal performance:
- Next.js for server-side rendering and routing
- Tanstack Query for efficient data fetching and caching
- React context + Zustand for state management
- Tailwind CSS with ShadCN components for UI
- TypeScript and Zod for complete type safety
- Reusable file upload components with progress tracking