Chat App is a modern, production-ready real-time chat application built with Next.js 15 and React 19. This frontend client provides a seamless messaging experience with advanced real-time features, comprehensive Socket.IO integration, and a beautiful user interface. It connects to a dedicated Node.js backend service for chat functionality while managing user authentication and profiles through Auth.js v5 and PostgreSQL.
The application features advanced state management with Redux Toolkit, real-time communication through Socket.IO, server state management with React Query, and a responsive UI built with shadcn/ui components. It includes sophisticated connection recovery, health monitoring, and optimistic UI updates for the best user experience.
- Features
- Tech Stack
- Project Structure
- Getting Started
- Running the Application
- Docker Setup
- Deployment
- API Documentation
- Contributing
- License
- Contact
Chat App is built with advanced features and modern patterns to deliver a superior user experience:
- Social Authentication: Google and GitHub OAuth integration via Auth.js v5
- JWT Token Management: Secure token handling with automatic refresh and validation
- Session Management: Persistent session handling with Redux state management
- Database Integration: PostgreSQL user management with Prisma ORM
- WebSocket Integration: Full-featured Socket.IO client with health monitoring
- Connection Recovery: Automatic reconnection with exponential backoff
- Health Checks: Periodic connection monitoring with stale connection detection
- Optimistic Updates: Immediate UI updates with server synchronization
- Message Features:
- Real-time messaging with instant delivery
- Message reactions with emoji support
- Message editing and deletion
- Reply to messages functionality
- Pin/unpin important messages
- Read receipts and status tracking
- File attachments and image sharing
- Group Chats: Create and manage multi-user conversations
- Direct Messages: Private one-on-one conversations
- Chat Administration: Add/remove participants, delete chats
- Real-time Updates: Live chat creation, updates, and member changes
- Infinite Scrolling: Efficient message loading with React Query
- Friend System: Send, accept, and manage friend requests
- User Search: Find and connect with other users
- Online Status: Real-time user presence tracking
- Typing Indicators: Live typing status for active conversations
- User Profiles: Customizable avatars and status information
- Responsive Design: Mobile-first approach with adaptive layouts
- Dark/Light Mode: Seamless theme switching with next-themes
- Smooth Animations: Framer Motion powered interactions
- Loading States: Sophisticated skeleton loaders and error boundaries
- Real-time Notifications: Toast notifications with Sonner
- Redux Toolkit: Advanced state management with real-time middleware
- React Query: Server state management with caching and synchronization
- Connection Middleware: Specialized Redux middleware for Socket.IO events
- Optimistic UI: Instant feedback with error recovery
- Infinite Queries: Efficient data loading with automatic pagination
Chat App leverages cutting-edge technologies for optimal performance and developer experience:
- Next.js 15: App Router with server-side rendering and advanced routing
- React 19: Latest React features with concurrent rendering
- TypeScript: End-to-end type safety across the application
- Tailwind CSS 4.0: Modern utility-first CSS framework
- shadcn/ui: Beautiful, accessible component library
- Radix UI: Low-level UI primitives for complex components
- Framer Motion: Smooth animations and transitions
- Lucide React: Beautiful SVG icon library
- next-themes: Theme switching support
- Redux Toolkit: Predictable state management
- React Query (TanStack Query): Server state management and caching
- React Hook Form: Performant form handling
- Zod: TypeScript-first schema validation
- Socket.IO Client: WebSocket communication with the backend
- Custom Middleware: Redux middleware for Socket.IO event handling
- Connection Recovery: Advanced reconnection logic with health monitoring
- Event Management: Type-safe Socket.IO event definitions and handlers
- Prisma: PostgreSQL ORM for user data management
- Auth.js v5: Modern authentication with OAuth providers
- PostgreSQL: Robust relational database for user management
- MongoDB: Chat data storage (via backend service)
- Turbopack: Ultra-fast development bundler
- ESLint: Code linting with TypeScript support
- Prettier: Consistent code formatting
- PostCSS: CSS processing and optimization
- date-fns: Modern date utility library
- lodash: Utility functions for data manipulation
- Sonner: Toast notifications
- Embla Carousel: Lightweight carousel component
- React Resizable Panels: Resizable UI panels
ChatApp's codebase is organized for clarity and scalability. Here's an overview:
src/
├── app/ # Next.js app directory
│ ├── api/ # API routes
│ ├── auth/ # Authentication pages
│ ├── (protected)/ # Protected routes
│ └── globals.css # Global styles
├── components/ # React components
│ ├── auth/ # Authentication components
│ ├── chat/ # Chat-related components
│ ├── dashboard/ # Dashboard components
│ ├── friends/ # Friend management components
│ ├── landing/ # Landing page components
│ ├── navigation/ # Navigation components
│ ├── profile/ # User profile components
│ ├── settings/ # Settings components
│ ├── skeleton/ # Loading skeleton components
│ └── ui/ # Reusable UI components
├── lib/ # Utility functions and configurations
│ ├── api/ # API utilities
│ ├── redux/ # Authentication utilities
│ ├── settings/ # Settings configurations
│ ├── socket.ts # Socket.io client setup
│ └── utils/ # Helper functions
├── services/ # API service functions
├── hooks/ # Custom React hooks
├── types/ # TypeScript type definitions
│ ├── chat.ts # Chat-related types
│ └── message.ts # Message-related types
└── public/ # Static assets
This structure separates concerns, making it easier to navigate and maintain the project.
Follow these steps to set up ChatApp on your local machine.
Before you begin, ensure you have the following installed:
- Node.js 18.x or later
- PostgreSQL 14.x or later
- npm package manager
-
Clone the Repository
git clone https://github.com/krotrn/chat-app.git cd chat-app -
Install Dependencies
npm install
-
Environment Setup Create a
.envfile in the root directory with the following variables:# Database DATABASE_URL = "postgresql://********:*****************.*********************.****.tech/*****?sslmode=require" NODE_ENV = "development" AUTH_SECRET = ********************************************************************** # from chat-backend at http://github.com/krotrn/chat-backend NEXT_PUBLIC_API_BASE_URL = http://localhost:3000 # Auth0 credentials for NextAuth GITHUB_CLIENT_ID = *************** GITHUB_CLIENT_SECRET = **************************************** GOOGLE_CLIENT_ID = ************-********************************.apps.googleusercontent.com GOOGLE_CLIENT_SECRET = *****-*********************************************** # Resend API key RESEND_API_KEY = your_resend_api_key_here RESEND_FROM_EMAIL = **************** NEXT_PUBLIC_APP_NAME = "Chat App" # similar to chat-backend chat-backend at http://github.com/krotrn/chat-backend JWT_SECRET = "your_jwt_secret_here" # for Encryption of verification code ENCRYPTION_KEY = "your_encryption_key_here" EMAIL_TOKEN_EXPIRATION_TIME = "in_HOURS" NEXT_PUBLIC_CHAT_API_URL = "your_chat_api_url_here" NEXT_PUBLIC_SUPPORT_EMAIL = "enter_your_support_email_here" # Cloudinary Configuration CLOUDINARY_CLOUD_NAME = your_cloudinary_cloud_name_here CLOUDINARY_API_KEY = your_cloudinary_api_key_here CLOUDINARY_API_SECRET = your_cloudinary_api_secret_here CLOUDINARY_AVATAR_UPLOAD_PRESET = chat_app_avatar CLOUDINARY_CHAT_FILE_UPLOAD_PRESET = chat_app_files
-
Database Setup
npx prisma generate npx prisma db push
-
Development Mode
npm run dev # or yarn devThe application will be available at
http://localhost:3000 -
Production Build
npm run build
Chat App includes comprehensive Docker support for both development and production environments. The setup includes PostgreSQL database integration and optimized multi-stage builds.
- Multi-stage Dockerfile: Optimized for production with minimal image size
- PostgreSQL Integration: Containerized database with persistent storage
- Development & Production Modes: Separate configurations for different environments
- Health Checks: Container health monitoring and dependency management
- Volume Management: Persistent data storage and development mounting
-
Prerequisites
- Docker Desktop installed and running
- Docker Compose (included with Docker Desktop)
-
Production Setup
# Copy the Docker environment template cp .env.docker .env # Update environment variables with your actual values # Configure DATABASE_URL, API keys, and authentication providers # Build and start all services docker-compose up --build -d
The application will be available at
http://localhost:3000 -
Development Setup
# Use the development compose file docker-compose -f docker-compose.dev.yml up --build -d # Or use the npm script npm run docker:dev
# Build and start all services
npm run docker:up
# Start in development mode with hot reload
npm run docker:dev
# Stop all services
npm run docker:down
# View logs
docker-compose logs -f app
# Access the database
docker exec -it chat-app-postgres psql -U chatapp_user -d chatapp
# Clean up everything (including volumes)
docker-compose down -v --remove-orphansCreate a .env file with Docker-specific configurations:
# Database (automatically configured for Docker)
DATABASE_URL=postgresql://chatapp_user:chatapp_password@postgres:5432/chatapp?sslmode=disable
# Backend API URLs (adjust ports as needed)
NEXT_PUBLIC_API_BASE_URL=http://localhost:3001
NEXT_PUBLIC_CHAT_API_URL=http://localhost:3001
# Add all other environment variables from the main setup
# (Authentication, Cloudinary, etc.)The Docker setup includes:
- App Container: Next.js application with optimized production build
- PostgreSQL Container: Database with persistent volume storage
- Shared Network: Secure communication between containers
- Volume Management: Persistent database storage and development mounting
The Dockerfile uses multi-stage builds for optimal production performance:
- Dependencies Stage: Installs only production dependencies
- Builder Stage: Compiles the application with Prisma generation
- Runner Stage: Minimal runtime environment with security best practices
For detailed Docker documentation, see DOCKER.md.
To deploy ChatApp to a production environment:
-
Build the Application
npm run build
-
Start the Production Server
npm start
-
Configure Production Environment
Ensure your
.envfile or hosting platform (e.g., Vercel, Heroku) has all required environment variables set. -
Set Up Databases in Production
-
PostgreSQL: Deploy migrations:
npx prisma migrate deploy
-
Consider using a platform like Vercel for Next.js hosting or a custom server with Nginx for more control.
The backend uses standardized response types for consistency:
MessageResponseType- Used for all message-related responsesChatResponseType- Used for all chat-related responses
These types ensure strong typing throughout the application and provide a predictable API surface for frontend integration.
For detailed API documentation, see API_DOC.md.
We'd love your help to make ChatApp even better! To contribute:
-
Fork the Repository
git clone https://github.com/krotrn/chat-app.git
-
Create a Feature Branch
git checkout -b feature/your-feature-name
-
Commit Your Changes
git commit -m "Add your feature description" -
Push to Your Fork
git push origin feature/your-feature-name
-
Submit a Pull Request Include a detailed description of your changes and link any related issues.
Check out CONTRIBUTING.md for full guidelines on reporting bugs, suggesting features, and coding standards.
ChatApp is licensed under the MIT License, granting you the freedom to use, modify, and distribute the software as you see fit, provided you include the license notice.
Have questions or ideas? Reach out by:
- Opening an issue on GitHub.
- Emailing krotrn.ks@gmail.com.
We're excited to hear from you!