{"id":48037688,"url":"https://github.com/krotrn/chat_app","last_synced_at":"2026-04-04T14:00:21.549Z","repository":{"id":275199818,"uuid":"920009763","full_name":"krotrn/Chat_App","owner":"krotrn","description":"ChatApp — A production-grade, real-time messaging client built with Next.js 15, React 19, and TypeScript. Featuring Socket.IO-powered WebSockets, Redux Toolkit state management, Auth.js v5 authentication, Prisma-backed PostgreSQL user stores, and a responsive, dark-mode-ready UI with shadcn/ui and Framer Motion.","archived":false,"fork":false,"pushed_at":"2025-09-13T16:15:49.000Z","size":2200,"stargazers_count":6,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-09-13T18:25:30.456Z","etag":null,"topics":["authjs-v5","framer-motion","magicui","nextjs","nextjs15","postgresql","prisma","react","shadcn-ui"],"latest_commit_sha":null,"homepage":"https://chat-kr.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/krotrn.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-01-21T12:07:03.000Z","updated_at":"2025-09-13T16:15:45.000Z","dependencies_parsed_at":"2025-02-15T22:21:53.164Z","dependency_job_id":"9d3701bc-d9c3-4b08-a75c-fe17ca5dc968","html_url":"https://github.com/krotrn/Chat_App","commit_stats":null,"previous_names":["krotrn/chat_app"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/krotrn/Chat_App","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/krotrn%2FChat_App","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/krotrn%2FChat_App/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/krotrn%2FChat_App/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/krotrn%2FChat_App/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/krotrn","download_url":"https://codeload.github.com/krotrn/Chat_App/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/krotrn%2FChat_App/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31402277,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-04T10:20:44.708Z","status":"ssl_error","status_checked_at":"2026-04-04T10:20:06.846Z","response_time":60,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["authjs-v5","framer-motion","magicui","nextjs","nextjs15","postgresql","prisma","react","shadcn-ui"],"created_at":"2026-04-04T14:00:16.982Z","updated_at":"2026-04-04T14:00:21.395Z","avatar_url":"https://github.com/krotrn.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Chat App Frontend\n\n**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.\n\nThe 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.\n\n---\n[![Ask DeepWiki](https://deepwiki.com/badge.svg)](https://deepwiki.com/krotrn/Chat_App)\n## Table of Contents\n\n- [Features](#features)\n- [Tech Stack](#tech-stack)\n- [Project Structure](#project-structure)\n- [Getting Started](#getting-started)\n  - [Prerequisites](#prerequisites)\n  - [Installation](#installation)\n- [Running the Application](#running-the-application)\n- [Docker Setup](#docker-setup)\n- [Deployment](#deployment)\n- [API Documentation](#api-documentation)\n- [Contributing](#contributing)\n- [License](#license)\n- [Contact](#contact)\n\n---\n\n## Features\n\nChat App is built with advanced features and modern patterns to deliver a superior user experience:\n\n### 🔐 **Authentication \u0026 Security**\n\n- **Social Authentication**: Google and GitHub OAuth integration via Auth.js v5\n- **JWT Token Management**: Secure token handling with automatic refresh and validation\n- **Session Management**: Persistent session handling with Redux state management\n- **Database Integration**: PostgreSQL user management with Prisma ORM\n\n### 💬 **Real-time Communication**\n\n- **WebSocket Integration**: Full-featured Socket.IO client with health monitoring\n- **Connection Recovery**: Automatic reconnection with exponential backoff\n- **Health Checks**: Periodic connection monitoring with stale connection detection\n- **Optimistic Updates**: Immediate UI updates with server synchronization\n- **Message Features**:\n  - Real-time messaging with instant delivery\n  - Message reactions with emoji support\n  - Message editing and deletion\n  - Reply to messages functionality\n  - Pin/unpin important messages\n  - Read receipts and status tracking\n  - File attachments and image sharing\n\n### 🏘️ **Chat Management**\n\n- **Group Chats**: Create and manage multi-user conversations\n- **Direct Messages**: Private one-on-one conversations\n- **Chat Administration**: Add/remove participants, delete chats\n- **Real-time Updates**: Live chat creation, updates, and member changes\n- **Infinite Scrolling**: Efficient message loading with React Query\n\n### 👥 **Social Features**\n\n- **Friend System**: Send, accept, and manage friend requests\n- **User Search**: Find and connect with other users\n- **Online Status**: Real-time user presence tracking\n- **Typing Indicators**: Live typing status for active conversations\n- **User Profiles**: Customizable avatars and status information\n\n### 🎨 **Modern User Experience**\n\n- **Responsive Design**: Mobile-first approach with adaptive layouts\n- **Dark/Light Mode**: Seamless theme switching with next-themes\n- **Smooth Animations**: Framer Motion powered interactions\n- **Loading States**: Sophisticated skeleton loaders and error boundaries\n- **Real-time Notifications**: Toast notifications with Sonner\n\n### ⚡ **Performance \u0026 State Management**\n\n- **Redux Toolkit**: Advanced state management with real-time middleware\n- **React Query**: Server state management with caching and synchronization\n- **Connection Middleware**: Specialized Redux middleware for Socket.IO events\n- **Optimistic UI**: Instant feedback with error recovery\n- **Infinite Queries**: Efficient data loading with automatic pagination\n\n---\n\n## Tech Stack\n\nChat App leverages cutting-edge technologies for optimal performance and developer experience:\n\n### 🖥️ **Frontend Core**\n\n- **[Next.js 15](https://nextjs.org/)**: App Router with server-side rendering and advanced routing\n- **[React 19](https://reactjs.org/)**: Latest React features with concurrent rendering\n- **[TypeScript](https://www.typescriptlang.org/)**: End-to-end type safety across the application\n- **[Tailwind CSS 4.0](https://tailwindcss.com/)**: Modern utility-first CSS framework\n\n### 🎨 **UI \u0026 Design**\n\n- **[shadcn/ui](https://ui.shadcn.com/)**: Beautiful, accessible component library\n- **[Radix UI](https://www.radix-ui.com/)**: Low-level UI primitives for complex components\n- **[Framer Motion](https://www.framer.com/motion/)**: Smooth animations and transitions\n- **[Lucide React](https://lucide.dev/)**: Beautiful SVG icon library\n- **[next-themes](https://github.com/pacocoursey/next-themes)**: Theme switching support\n\n### ⚡ **State Management \u0026 Data**\n\n- **[Redux Toolkit](https://redux-toolkit.js.org/)**: Predictable state management\n- **[React Query (TanStack Query)](https://tanstack.com/query/)**: Server state management and caching\n- **[React Hook Form](https://react-hook-form.com/)**: Performant form handling\n- **[Zod](https://zod.dev/)**: TypeScript-first schema validation\n\n### 🔄 **Real-time Communication**\n\n- **[Socket.IO Client](https://socket.io/)**: WebSocket communication with the backend\n- **Custom Middleware**: Redux middleware for Socket.IO event handling\n- **Connection Recovery**: Advanced reconnection logic with health monitoring\n- **Event Management**: Type-safe Socket.IO event definitions and handlers\n\n### 🗄️ **Database \u0026 Authentication**\n\n- **[Prisma](https://www.prisma.io/)**: PostgreSQL ORM for user data management\n- **[Auth.js v5](https://authjs.dev/)**: Modern authentication with OAuth providers\n- **[PostgreSQL](https://www.postgresql.org/)**: Robust relational database for user management\n- **[MongoDB](https://www.mongodb.com/)**: Chat data storage (via backend service)\n\n### 🛠️ **Development \u0026 Tooling**\n\n- **[Turbopack](https://turbo.build/pack)**: Ultra-fast development bundler\n- **[ESLint](https://eslint.org/)**: Code linting with TypeScript support\n- **[Prettier](https://prettier.io/)**: Consistent code formatting\n- **[PostCSS](https://postcss.org/)**: CSS processing and optimization\n\n### 📦 **Additional Libraries**\n\n- **[date-fns](https://date-fns.org/)**: Modern date utility library\n- **[lodash](https://lodash.com/)**: Utility functions for data manipulation\n- **[Sonner](https://sonner.emilkowal.ski/)**: Toast notifications\n- **[Embla Carousel](https://www.embla-carousel.com/)**: Lightweight carousel component\n- **[React Resizable Panels](https://github.com/bvaughn/react-resizable-panels)**: Resizable UI panels\n\n---\n\n## Project Structure\n\nChatApp's codebase is organized for clarity and scalability. Here's an overview:\n\n```\nsrc/\n├── app/                   # Next.js app directory\n│   ├── api/                # API routes\n│   ├── auth/               # Authentication pages\n│   ├── (protected)/        # Protected routes\n│   └── globals.css         # Global styles\n├── components/            # React components\n│   ├── auth/               # Authentication components\n│   ├── chat/               # Chat-related components\n│   ├── dashboard/          # Dashboard components\n│   ├── friends/            # Friend management components\n│   ├── landing/            # Landing page components\n│   ├── navigation/         # Navigation components\n│   ├── profile/            # User profile components\n│   ├── settings/           # Settings components\n│   ├── skeleton/           # Loading skeleton components\n│   └── ui/                 # Reusable UI components\n├── lib/                   # Utility functions and configurations\n│   ├── api/                # API utilities\n│   ├── redux/              # Authentication utilities\n│   ├── settings/           # Settings configurations\n│   ├── socket.ts           # Socket.io client setup\n│   └── utils/              # Helper functions\n├── services/              # API service functions\n├── hooks/                 # Custom React hooks\n├── types/                 # TypeScript type definitions\n│   ├── chat.ts             # Chat-related types\n│   └── message.ts          # Message-related types\n└── public/                # Static assets\n```\n\nThis structure separates concerns, making it easier to navigate and maintain the project.\n\n---\n\n## Getting Started\n\nFollow these steps to set up ChatApp on your local machine.\n\n### Prerequisites\n\nBefore you begin, ensure you have the following installed:\n\n- Node.js 18.x or later\n- PostgreSQL 14.x or later\n- npm package manager\n\n### Installation\n\n1. **Clone the Repository**\n\n   ```bash\n   git clone https://github.com/krotrn/chat-app.git\n   cd chat-app\n   ```\n\n2. **Install Dependencies**\n\n   ```bash\n   npm install\n   ```\n\n3. **Environment Setup**\n   Create a `.env` file in the root directory with the following variables:\n\n   ```env\n   # Database\n   DATABASE_URL = \"postgresql://********:*****************.*********************.****.tech/*****?sslmode=require\"\n\n   NODE_ENV = \"development\"\n   AUTH_SECRET = **********************************************************************\n\n   # from chat-backend at http://github.com/krotrn/chat-backend\n   NEXT_PUBLIC_API_BASE_URL = http://localhost:3000\n\n   # Auth0 credentials for NextAuth\n   GITHUB_CLIENT_ID = ***************\n   GITHUB_CLIENT_SECRET = ****************************************\n   GOOGLE_CLIENT_ID = ************-********************************.apps.googleusercontent.com\n   GOOGLE_CLIENT_SECRET = *****-***********************************************\n\n   # Resend API key\n   RESEND_API_KEY = your_resend_api_key_here\n   RESEND_FROM_EMAIL = ****************\n   NEXT_PUBLIC_APP_NAME = \"Chat App\"\n\n   # similar to chat-backend chat-backend at http://github.com/krotrn/chat-backend\n   JWT_SECRET = \"your_jwt_secret_here\"\n\n   # for Encryption of verification code\n   ENCRYPTION_KEY = \"your_encryption_key_here\"\n   EMAIL_TOKEN_EXPIRATION_TIME = \"in_HOURS\"\n   NEXT_PUBLIC_CHAT_API_URL = \"your_chat_api_url_here\"\n   NEXT_PUBLIC_SUPPORT_EMAIL = \"enter_your_support_email_here\"\n\n   # Cloudinary Configuration\n   CLOUDINARY_CLOUD_NAME = your_cloudinary_cloud_name_here\n   CLOUDINARY_API_KEY = your_cloudinary_api_key_here\n   CLOUDINARY_API_SECRET = your_cloudinary_api_secret_here\n   CLOUDINARY_AVATAR_UPLOAD_PRESET = chat_app_avatar\n   CLOUDINARY_CHAT_FILE_UPLOAD_PRESET = chat_app_files\n   ```\n\n4. **Database Setup**\n   ```bash\n   npx prisma generate\n   npx prisma db push\n   ```\n\n---\n\n## Running the Application\n\n1. **Development Mode**\n\n   ```bash\n   npm run dev\n   # or\n   yarn dev\n   ```\n\n   The application will be available at `http://localhost:3000`\n\n2. **Production Build**\n\n   ```bash\n   npm run build\n\n   ```\n\n---\n\n## Docker Setup\n\nChat App includes comprehensive Docker support for both development and production environments. The setup includes PostgreSQL database integration and optimized multi-stage builds.\n\n### 🐳 **Docker Features**\n\n- **Multi-stage Dockerfile**: Optimized for production with minimal image size\n- **PostgreSQL Integration**: Containerized database with persistent storage\n- **Development \u0026 Production Modes**: Separate configurations for different environments\n- **Health Checks**: Container health monitoring and dependency management\n- **Volume Management**: Persistent data storage and development mounting\n\n### **Quick Start with Docker**\n\n1. **Prerequisites**\n\n   - Docker Desktop installed and running\n   - Docker Compose (included with Docker Desktop)\n\n2. **Production Setup**\n\n   ```bash\n   # Copy the Docker environment template\n   cp .env.docker .env\n\n   # Update environment variables with your actual values\n   # Configure DATABASE_URL, API keys, and authentication providers\n\n   # Build and start all services\n   docker-compose up --build -d\n   ```\n\n   The application will be available at `http://localhost:3000`\n\n3. **Development Setup**\n\n   ```bash\n   # Use the development compose file\n   docker-compose -f docker-compose.dev.yml up --build -d\n\n   # Or use the npm script\n   npm run docker:dev\n   ```\n\n### **Docker Commands**\n\n```bash\n# Build and start all services\nnpm run docker:up\n\n# Start in development mode with hot reload\nnpm run docker:dev\n\n# Stop all services\nnpm run docker:down\n\n# View logs\ndocker-compose logs -f app\n\n# Access the database\ndocker exec -it chat-app-postgres psql -U chatapp_user -d chatapp\n\n# Clean up everything (including volumes)\ndocker-compose down -v --remove-orphans\n```\n\n### **Docker Environment Variables**\n\nCreate a `.env` file with Docker-specific configurations:\n\n```env\n# Database (automatically configured for Docker)\nDATABASE_URL=postgresql://chatapp_user:chatapp_password@postgres:5432/chatapp?sslmode=disable\n\n# Backend API URLs (adjust ports as needed)\nNEXT_PUBLIC_API_BASE_URL=http://localhost:3001\nNEXT_PUBLIC_CHAT_API_URL=http://localhost:3001\n\n# Add all other environment variables from the main setup\n# (Authentication, Cloudinary, etc.)\n```\n\n### **Container Architecture**\n\nThe Docker setup includes:\n\n- **App Container**: Next.js application with optimized production build\n- **PostgreSQL Container**: Database with persistent volume storage\n- **Shared Network**: Secure communication between containers\n- **Volume Management**: Persistent database storage and development mounting\n\n### **Production Optimization**\n\nThe Dockerfile uses multi-stage builds for optimal production performance:\n\n- **Dependencies Stage**: Installs only production dependencies\n- **Builder Stage**: Compiles the application with Prisma generation\n- **Runner Stage**: Minimal runtime environment with security best practices\n\nFor detailed Docker documentation, see [DOCKER.md](DOCKER.md).\n\n---\n\n## Deployment\n\nTo deploy ChatApp to a production environment:\n\n1. **Build the Application**\n\n   ```bash\n   npm run build\n   ```\n\n2. **Start the Production Server**\n\n   ```bash\n   npm start\n   ```\n\n3. **Configure Production Environment**\n\n   Ensure your `.env` file or hosting platform (e.g., Vercel, Heroku) has all required environment variables set.\n\n4. **Set Up Databases in Production**\n\n   - **PostgreSQL**: Deploy migrations:\n\n     ```bash\n     npx prisma migrate deploy\n     ```\n\nConsider using a platform like Vercel for Next.js hosting or a custom server with Nginx for more control.\n\n---\n\n## API Documentation\n\nThe backend uses standardized response types for consistency:\n\n- `MessageResponseType` - Used for all message-related responses\n- `ChatResponseType` - Used for all chat-related responses\n\nThese types ensure strong typing throughout the application and provide a predictable API surface for frontend integration.\n\nFor detailed API documentation, see [API_DOC.md](https://github.com/krotrn/ChatApp-backend/blob/main/API_DOC.md).\n\n---\n\n## Contributing\n\nWe'd love your help to make ChatApp even better! To contribute:\n\n1. **Fork the Repository**\n\n   ```bash\n   git clone https://github.com/krotrn/chat-app.git\n   ```\n\n2. **Create a Feature Branch**\n\n   ```bash\n   git checkout -b feature/your-feature-name\n   ```\n\n3. **Commit Your Changes**\n\n   ```bash\n   git commit -m \"Add your feature description\"\n   ```\n\n4. **Push to Your Fork**\n\n   ```bash\n   git push origin feature/your-feature-name\n   ```\n\n5. **Submit a Pull Request**\n   Include a detailed description of your changes and link any related issues.\n\nCheck out [CONTRIBUTING.md](CONTRIBUTING.md) for full guidelines on reporting bugs, suggesting features, and coding standards.\n\n---\n\n## License\n\nChatApp is licensed under the [MIT License](LICENSE), granting you the freedom to use, modify, and distribute the software as you see fit, provided you include the license notice.\n\n---\n\n## Contact\n\nHave questions or ideas? Reach out by:\n\n- Opening an issue on GitHub.\n- Emailing [krotrn.ks@gmail.com](mailto:krotrn.ks@gmail.com).\n\nWe're excited to hear from you!\n\n---\n\n## **Happy coding!**\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkrotrn%2Fchat_app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkrotrn%2Fchat_app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkrotrn%2Fchat_app/lists"}