A modern, full-stack real-time chat and video calling application built entirely from scratch as a solo project.
IceLink is a professional-grade communication platform that I designed and built entirely on my own - from concept to deployment. This full-stack application demonstrates modern web development practices, real-time communication technologies, and production-ready architecture.
This entire project was created from scratch by a single developer, including:
- ✅ System architecture & design
- ✅ Full-stack development (Frontend + Backend)
- ✅ Real-time WebRTC implementation
- ✅ Database schema design
- ✅ Security & authentication system
- ✅ UI/UX design with custom ice theme
- ✅ Docker containerization
- ✅ Production optimization
- Instant message delivery with Socket.io
- Private one-on-one conversations
- Group chat functionality
- File sharing with media support
- Online/offline status indicators
- Message history & persistence
- High-quality WebRTC video calls
- Crystal-clear audio communication
- Screen sharing capabilities
- Call history tracking
- Incoming call notifications
- Toggle camera/microphone controls
- JWT-based authentication
- Secure password hashing with bcrypt
- Rate limiting protection
- Input validation & sanitization
- Helmet security headers
- CORS protection
- Protected API routes
- Custom ice-themed design
- Fully responsive layout
- Smooth animations & transitions
- Professional landing page
- Intuitive user experience
- Loading skeletons
- Toast notifications
- TypeScript for type safety
- Docker containerization
- Production-ready architecture
- Error boundaries
- Comprehensive error handling
- Environment-based configuration
- React 18 - Modern UI library with hooks
- TypeScript - Type-safe JavaScript
- Tailwind CSS - Utility-first CSS framework
- Socket.io Client - Real-time bidirectional communication
- WebRTC - Peer-to-peer video/audio streaming
- React Router - Client-side routing
- Axios - HTTP client for API requests
- React Hot Toast - Beautiful notifications
- Node.js - JavaScript runtime
- Express.js - Web application framework
- TypeScript - Type-safe development
- MongoDB & Mongoose - NoSQL database & ODM
- Socket.io - Real-time WebSocket server
- JWT - JSON Web Tokens for authentication
- bcrypt.js - Password hashing
- Cloudinary - Cloud-based file storage
- Multer - File upload handling
- Express Validator - Input validation
- Express Rate Limit - API rate limiting
- Helmet - Security headers middleware
- Docker - Containerization
- nginx - Web server for frontend
- Git - Version control
IceLink/
├── frontend/ # React TypeScript Frontend
│ ├── public/
│ │ └── assets/ # Logo and static assets
│ ├── src/
│ │ ├── api/ # API client services
│ │ ├── components/ # Reusable React components
│ │ │ ├── call/ # Video call components
│ │ │ ├── chat/ # Chat UI components
│ │ │ ├── common/ # Shared components
│ │ │ └── layout/ # Layout components
│ │ ├── context/ # React Context providers
│ │ │ ├── AuthContext.tsx
│ │ │ ├── CallContext.tsx
│ │ │ ├── ChatContext.tsx
│ │ │ └── SocketContext.tsx
│ │ ├── pages/ # Page components
│ │ │ ├── auth/ # Login & Register
│ │ │ ├── chat/ # Chat pages
│ │ │ ├── call/ # Call history
│ │ │ ├── settings/ # User settings
│ │ │ └── LandingPage.tsx
│ │ ├── types/ # TypeScript type definitions
│ │ └── utils/ # Utility functions
│ ├── Dockerfile # Frontend container config
│ ├── nginx.conf # nginx configuration
│ └── package.json
│
├── backend/ # Node.js TypeScript Backend
│ ├── src/
│ │ ├── config/ # Database configuration
│ │ ├── controllers/ # Route controllers
│ │ │ ├── user.controller.ts
│ │ │ ├── chat.controller.ts
│ │ │ └── message.controller.ts
│ │ ├── middlewares/ # Custom middlewares
│ │ │ ├── auth.middleware.ts
│ │ │ ├── validation.middleware.ts
│ │ │ ├── rateLimiter.middleware.ts
│ │ │ └── multer.middleware.ts
│ │ ├── models/ # Mongoose schemas
│ │ │ ├── user.model.ts
│ │ │ ├── chat.model.ts
│ │ │ └── message.model.ts
│ │ ├── routes/ # API routes
│ │ ├── socket/ # Socket.io logic
│ │ ├── types/ # TypeScript types
│ │ ├── utils/ # Utility functions
│ │ └── index.ts # Entry point
│ ├── Dockerfile # Backend container config
│ ├── tsconfig.json # TypeScript config
│ └── package.json
│
└── README.md # This file
- Socket.io for instant messaging and presence detection
- WebRTC for peer-to-peer video/audio with minimal latency
- Automatic reconnection handling with exponential backoff
- Room-based messaging for efficient group chats
- MongoDB chosen for flexible schema and scalability
- Normalized data structure for users, chats, and messages
- Efficient indexing for quick message retrieval
- Population for nested data relationships
- JWT tokens with access/refresh token pattern
- Rate limiting on authentication and API endpoints (10 auth attempts, 500 API calls per 15 min)
- Input validation using express-validator on all routes
- Helmet for security headers (XSS, CSRF protection)
- bcrypt with salt rounds for password hashing
- File upload restrictions (10MB limit, type validation)
- React Context API for global state (Auth, Socket, Call, Chat)
- Centralized authentication state
- Real-time online user tracking
- Call state management for WebRTC
- Error boundaries for React component errors
- Comprehensive try-catch blocks on all async operations
- User-friendly error messages with toast notifications
- Backend error responses with proper HTTP status codes
- Docker Desktop installed and running
- 8GB RAM minimum
- Ports 3000, 5000, 27017 available
- Clone the repository
git clone <repository-url>
cd IceLink- Build Docker images
# Build backend
cd backend
docker build -t icelink-backend .
# Build frontend
cd ../frontend
docker build -t icelink-frontend .- Run the containers
# Run MongoDB (if not using Atlas)
docker run -d -p 27017:27017 --name icelink-mongodb mongo:7.0
# Run backend
cd backend
docker run -d -p 5000:5000 --env-file .env --name icelink-backend icelink-backend
# Run frontend
cd frontend
docker run -d -p 3000:80 --name icelink-frontend icelink-frontend- Access the application
- Frontend: http://localhost:3000
- Backend API: http://localhost:5000
- Node.js 18 or higher
- MongoDB installed locally or MongoDB Atlas account
- npm or yarn package manager
- Navigate to backend directory
cd backend- Install dependencies
npm install- Create environment file
cp .env.example .env- Configure environment variables
PORT=5000
NODE_ENV=development
MONGODB_URI=mongodb://localhost:27017/icelink
JWT_SECRET=your_super_secret_key
JWT_REFRESH_SECRET=your_refresh_secret_key
CLOUDINARY_CLOUD_NAME=your_cloudinary_name
CLOUDINARY_API_KEY=your_api_key
CLOUDINARY_API_SECRET=your_api_secret
ALLOWED_ORIGINS=http://localhost:3000- Start development server
npm run devBackend will run on http://localhost:5000
- Navigate to frontend directory
cd frontend- Install dependencies
npm install- Create environment file
cp .env.example .env- Configure environment variables
REACT_APP_API_URL=http://localhost:5000/api
REACT_APP_SOCKET_URL=http://localhost:5000
REACT_APP_ENV=development- Start development server
npm startFrontend will run on http://localhost:3000
The application features a cohesive ice-themed design that represents clarity, purity, and seamless communication:
- Color Palette: Shades of blue and cyan (ice-100 through ice-900)
- Visual Effects: Frosted glass effects, blur, gradients
- Animations: Smooth transitions, pulse effects, glowing elements
- Typography: Clean, modern fonts with gradient text
- Intuitive Navigation: Clear, accessible UI elements
- Responsive Design: Seamless experience across devices
- Loading States: Skeleton screens prevent layout shifts
- Error Feedback: Toast notifications for user actions
- Professional Feel: Corporate-ready design language
This entire project was built from ground up in just 8-9 days as an intensive solo endeavor:
- System architecture design
- Technology stack selection
- Database schema planning
- Project setup (Frontend + Backend)
- Express server configuration
- MongoDB integration
- Basic authentication system
- REST API development
- User authentication & JWT implementation
- React app structure & routing
- Chat UI components
- Socket.io integration
- Real-time messaging functionality
- File upload with Cloudinary
- WebRTC video/audio calling
- Call UI & controls
- Group chat functionality
- Message persistence
- Online presence tracking
- Call history implementation
- Input validation & sanitization
- Rate limiting implementation
- Security headers with Helmet
- Error handling & boundaries
- UI/UX refinements
- Ice theme polish
- Toast notifications
- Docker containerization
- Production optimization
- Documentation
- Final testing
- Deployment preparation
Total Development Time: 8-9 days of focused, intensive development
- Lazy loading for route-based code splitting
- Optimized bundle size with tree shaking
- Efficient WebSocket connections
- Database query optimization with indexes
- Stateless JWT authentication
- Horizontal scaling ready
- Docker containerization
- Environment-based configuration
- TypeScript for type safety
- Consistent code structure
- Reusable components
- Clean separation of concerns
Backend ✅ Deployed
- Platform: AWS EC2 (Ubuntu 24.04)
- URL:
http://YOUR_EC2_IP:5000 - Container: Docker (node:18-alpine)
- Status: Production Ready
Frontend 🏠 Local Development
- Platform: Local (development mode)
- URL:
http://localhost:3000 - Status: Ready for production deployment
Database & Storage
- MongoDB: Atlas Cloud (Serverless)
- File Storage: Cloudinary
- Prerequisites
# SSH into EC2
ssh -i your-key.pem ubuntu@YOUR_EC2_IP
# Install Docker
sudo apt update && sudo apt install -y docker.io
sudo systemctl start docker
sudo usermod -aG docker ubuntu- Deploy Backend
# Upload backend code
scp -i your-key.pem backend.tar.gz ubuntu@YOUR_EC2_IP:~
# On EC2: Extract and setup
tar -xzf backend.tar.gz
cd backend
# Create .env file
nano .env
# Add environment variables (see below)
# Build and run Docker container
docker build -t icelink-backend .
docker run -d -p 5000:5000 --env-file .env --restart unless-stopped --name icelink-backend icelink-backend- Environment Variables (Backend .env)
PORT=5000
NODE_ENV=development
MONGODB_URI=your_mongodb_atlas_uri
JWT_SECRET=your_secret_key
JWT_REFRESH_SECRET=your_refresh_secret
ACCESS_TOKEN_EXPIRY=15m
REFRESH_TOKEN_EXPIRY=7d
CLOUDINARY_CLOUD_NAME=your_cloudinary_name
CLOUDINARY_API_KEY=your_cloudinary_key
CLOUDINARY_API_SECRET=your_cloudinary_secret
GOOGLE_CLIENT_ID=your_google_client_id
ALLOWED_ORIGINS=http://localhost:3000
FRONTEND_URL=http://localhost:3000- Install Dependencies
cd frontend
npm install- Configure Environment
Create
frontend/.env:
REACT_APP_API_URL=http://YOUR_EC2_IP:5000/api
REACT_APP_SOCKET_URL=http://YOUR_EC2_IP:5000
REACT_APP_GOOGLE_CLIENT_ID=your_google_client_id- Run Development Server
npm start
# Opens at http://localhost:3000- MongoDB Atlas cluster created
- Cloudinary account configured
- Google OAuth credentials obtained
- AWS EC2 instance launched (Ubuntu 24.04)
- Security group rules configured (ports 22, 80, 5000)
- Docker installed on EC2
- Backend .env file created with all credentials
- Frontend .env file created with backend URL
- Backend deployed and running
- Frontend tested locally
Frontend
- Platform: Vercel
- Benefits:
- Automatic deployments from Git
- Global CDN
- Zero configuration
- Built-in SSL
- Lightning-fast performance
Backend
- Platform: AWS (Amazon Web Services)
- Services: EC2 / Elastic Beanstalk / ECS
- Benefits:
- Scalable infrastructure
- High availability
- Professional-grade hosting
- Full control over server configuration
Database
- Platform: MongoDB Atlas
- Benefits:
- Fully managed cloud database
- Automatic backups
- Global distribution
- Free tier available
File Storage
- Platform: Cloudinary
- Benefits:
- Optimized media delivery
- Automatic image transformations
- CDN integration
Special thanks to the open-source community and the creators of:
- React.js team for the amazing UI library
- Socket.io team for real-time communication
- MongoDB team for the flexible database
- WebRTC community for P2P technology
- All npm package maintainers
- MDN Web Docs
- React Documentation
- Node.js Documentation
- TypeScript Handbook
- WebRTC Documentation
MIT License - Feel free to use this project for learning and reference.
Developed by: Suryansh Garg (@1C3 B34R)
This project represents my journey in full-stack development, showcasing my ability to:
- Design and architect complex systems from scratch
- Build scalable real-time applications in record time
- Implement modern security practices
- Create professional user experiences
- Work efficiently under tight timelines
- Deploy production-ready applications
- Master multiple technologies simultaneously
Achievement: Built a complete, production-ready real-time communication platform in just 8-9 days as a solo developer.
IceLink - Where Communication Meets Clarity
Created by Suryansh Garg (1C3 B34R)