QuickChat

Overview

QuickChat is a production-ready full-stack real-time chat application built with modern TypeScript practices. It demonstrates end-to-end development skills from database design to polished UI, with strong emphasis on security, real-time communication, and maintainable architecture.

✨ Key Features

🔐 Authentication & Security

• JWT-based authentication - Secure login, signup, session management, and password reset
• Arcjet security - Bot detection, rate limiting, email validation, and IP allowlisting
• Input validation & sanitization - Protection against XSS and injection attacks
• Password hashing - bcrypt for secure credential storage

💬 Real-time Communication

• Socket.IO-powered messaging - Sub-second message delivery with reconnection handling
• Optimistic UI updates - Messages appear instantly before server confirmation
• Typing indicators - Real-time user typing status
• Read receipts - Message delivery and read status tracking

📎 Media & File Handling

• Cloudinary integration - Secure image and file uploads with CDN delivery
• File type validation - MIME type checking for security
• Image preview - Thumbnail generation for uploaded images

👥 User Experience

• Online presence detection - Real-time online/offline status with lastSeen tracking
• Responsive design - Tailwind CSS + DaisyUI, works on mobile and desktop
• Persistent chat history - MongoDB storage for message persistence
• Keyboard shortcuts - Enter to send, Escape to clear input, etc.
• Audio feedback - Optional keyboard sound effects

⚙️ Developer Experience

• TypeScript end-to-end - Strict typing from frontend to backend
• Modular architecture - Separate concerns for auth, chat, media, and utilities
• Environment configuration - Dotenv support for different deployment environments
• Comprehensive error handling - Graceful degradation and meaningful error messages

🛠️ Tech Stack

Frontend

• React 18 - Functional components with hooks
• Zustand - Lightweight state management
• Socket.IO Client - Real-time bidirectional communication
• Tailwind CSS - Utility-first CSS framework
• DaisyUI - Component library for Tailwind
• TypeScript - Static typing for enhanced developer experience

Backend

• Node.js - JavaScript runtime
• Express.js - Web application framework
• Socket.IO - Real-time communication layer
• MongoDB - Document database for chat persistence
• Mongoose - MongoDB object modeling
• JsonWebToken - Authentication token handling
• bcryptjs - Password hashing
• validator - Input validation and sanitization

Infrastructure

• GitHub Actions - CI/CD pipeline for testing
• Environment variables - Secure configuration management
• CORS handling - Cross-origin resource sharing configuration

🏗️ Architecture Overview

┌─────────────────┐    WebSocket    ┌─────────────────┐
│   React Client  │◄──────────────►│   Node.js Server│
│ (SPA + Zustand) │    Socket.IO    │ (Express + IO)  │
└─────────────────┘                 └─────────────────┘
                                    │
                                    ▼
                           ┌─────────────────┐
                           │  MongoDB Atlas  │
                           │ (Chat Storage)  │
                           └─────────────────┘
                                    │
                                    ▼
                           ┌─────────────────┐
                           │  Cloudinary     │
                           │ (Media Storage) │
                           └─────────────────┘

🚀 Quick Start

Prerequisites

• Node.js >= 18
• MongoDB Atlas account (or local MongoDB)
• Cloudinary account (for media uploads)
• Arcjet account (for security - optional but recommended)

Development Setup

# Clone repository
git clone https://github.com/howardsun-dev/quickchat.git
cd quickchat

# Install dependencies
npm install

# Configure environment
cp .env.example .env
# Edit .env with your credentials:
# MONGODB_URI, JWT_SECRET, CLOUDINARY_*, ARCJET_*, PORT

# Start development server
npm run dev
# Frontend: http://localhost:3000
# Backend: http://localhost:5000

Production Deployment

The app is designed for easy deployment to platforms like:

• Vercel (frontend) + Render/Railway (backend)
• Docker (see Dockerfile)
• AWS (ECS/EKS with RDS)
• Sevalla (currently deployed)

🧪 Testing

# Run linting
npm run lint

# Run tests (when implemented)
npm test

# Format code
npm run format

📚 Learning Outcomes

This project demonstrates proficiency in:

• Full-stack TypeScript development - End-to-end type safety
• Real-time web applications - WebSocket implementation with Socket.IO
• Authentication systems - JWT-based auth with refresh tokens
• File upload handling - Secure integration with Cloudinary
• Security best practices - Rate limiting, input validation, CORS
• State management - Zustand for predictable state updates
• Responsive design - Mobile-first approach with Tailwind CSS
• Database integration - MongoDB with Mongoose ODM
• API design - RESTful endpoints combined with real-time events
• DevOps practices - Environment configuration, logging, error handling

📞 Connect & Collaborate

Live Demo: https://quickchat-v72jh.sevalla.app/
Report Issues: GitHub Issues
Pull Requests: Welcome! Please read CONTRIBUTING.md
Email: howardsun.swe@gmail.com

---

Built with ❤️ by Howard Sun — Full-Stack Engineer specializing in TypeScript, React, and scalable web applications.