💬 CommuniHub - Real-Time Chat Application

A modern, feature-rich real-time chat application with beautiful UI/UX, built with Next.js 15, React 19, and WebSocket technology.

Features • Tech Stack • Getting Started • Structure • API

🔗 Backend Server

This frontend connects to a high-performance Go backend:

🚀 Server Realtime Chat App

✨ Features

🎨 Modern Landing Page

✅ Stunning hero section with animated gradients
✅ Interactive feature showcase
✅ Pricing plans with smooth animations
✅ Responsive design for all devices
✅ Newsletter subscription
✅ Modern footer with social links

💬 Real-Time Messaging

✅ Instant message delivery via WebSocket
✅ Private 1-on-1 conversations
✅ Group chat rooms with multiple participants
✅ Message read receipts (delivered/read status)
✅ Typing indicators
✅ Online/offline/away status
✅ Message reactions and emojis
✅ File sharing support
✅ Image preview

👥 User Management

✅ User registration with validation
✅ Secure login with JWT authentication
✅ User profile with avatar
✅ User discovery and search
✅ Friend requests
✅ User status management

🎯 Chat Features

✅ Create and manage chat rooms
✅ Group creation with member selection
✅ Channel sidebar with conversations
✅ Message history and pagination
✅ Unread message counter
✅ Notification center
✅ Emote panel
✅ User discovery panel

🎨 UI/UX Excellence

✅ Beautiful gradient animations
✅ Smooth transitions with Framer Motion
✅ Dark mode optimized
✅ Responsive mobile design
✅ Skeleton loaders for better UX
✅ Toast notifications
✅ Modal dialogs
✅ Custom scrollbars

🛠️ Tech Stack

Frontend Framework

Next.js 15 - React framework with App Router
React 19 - Latest React with concurrent features
TypeScript 5 - Type-safe development

Styling & UI

Tailwind CSS 3.4 - Utility-first CSS framework
Radix UI - Accessible component primitives
shadcn/ui - Re-usable components built with Radix
Framer Motion - Production-ready animations
Lucide React - Beautiful & consistent icons

State & Data Management

React Hook Form - Performant forms
Zod - TypeScript-first schema validation
Axios - HTTP client for API requests
date-fns - Modern date utility library

Real-Time Communication

WebSocket - Bi-directional real-time communication
Custom WebSocket hooks for chat functionality
Event-driven architecture

Additional Libraries

Sonner - Toast notifications
React Intersection Observer - Lazy loading
cmdk - Command palette
Recharts - Charting library
Embla Carousel - Carousel component

🚀 Getting Started

Prerequisites

Make sure you have the following installed:

Node.js 18+ (Download)
pnpm 8+ (Install)

Installation

Clone the repository

git clone https://github.com/dinhdev-nu/chat_app_ui.git
cd chat_app_ui

Install dependencies

pnpm install

Set up environment variables

Create a .env.local file in the root directory:

# API Configuration
NEXT_PUBLIC_API_URL=http://localhost:8080/api/v1
NEXT_PUBLIC_WS_URL=ws://localhost:8080/ws

# Local Storage Keys
NEXT_PUBLIC_SESSION_KEY=chat_session
NEXT_PUBLIC_USER_KEY=chat_user

# App Configuration
NEXT_PUBLIC_APP_NAME=CommuniHub
NEXT_PUBLIC_APP_URL=http://localhost:3000

Run the development server

pnpm dev

Open http://localhost:3000 in your browser.

Build for Production

# Create production build
pnpm build

# Start production server
pnpm start

📁 Project Structure

chat_app_ui/
│
├── 📂 app/                          # Next.js App Router
│   ├── 📂 (auth)/                   # Authentication routes
│   │   ├── layout.tsx               # Auth layout
│   │   ├── 📂 login/                # Login page
│   │   └── 📂 signup/               # Signup page
│   │
│   ├── 📂 chat/                     # Chat application
│   │   ├── page.tsx                 # Main chat interface
│   │   ├── 📂 conversation/         # Conversation routes
│   │   └── 📂 discord/              # Discord-style chat
│   │
│   ├── layout.tsx                   # Root layout
│   ├── page.tsx                     # Landing page
│   ├── globals.css                  # Global styles
│   └── client-wrapper.tsx           # Client-side wrappers
│
├── 📂 components/                   # React components
│   ├── 📂 chat/                     # Chat-specific components
│   │   ├── chat-header.tsx          # Chat header
│   │   ├── chat-messages.tsx        # Message list
│   │   ├── chat-sidebar.tsx         # Sidebar with conversations
│   │   ├── conversation-item.tsx    # Conversation list item
│   │   ├── emote-panel.tsx          # Emoji/emote selector
│   │   ├── group-chat-messages.tsx  # Group chat messages
│   │   ├── group-creation-modal.tsx # Create group modal
│   │   ├── immersive-chat-interface.tsx # Main chat UI
│   │   ├── notification-center.tsx  # Notifications
│   │   ├── skeleton-loaders.tsx     # Loading states
│   │   └── user-discovery.tsx       # Find users
│   │
│   ├── 📂 ui/                       # shadcn/ui components
│   │   ├── button.tsx               # Button component
│   │   ├── card.tsx                 # Card component
│   │   ├── dialog.tsx               # Dialog/Modal
│   │   ├── input.tsx                # Input field
│   │   ├── avatar.tsx               # Avatar component
│   │   ├── badge.tsx                # Badge component
│   │   ├── toast.tsx                # Toast notifications
│   │   └── ...                      # 40+ UI components
│   │
│   ├── navbar.tsx                   # Navigation bar
│   ├── hero.tsx                     # Hero section
│   ├── footer.tsx                   # Footer
│   ├── chat-interface.tsx           # Landing chat demo
│   ├── community-features.tsx       # Features section
│   ├── join-community.tsx           # CTA section
│   ├── login-form.tsx               # Login form
│   ├── registration-form.tsx        # Signup form
│   └── ...                          # Other components
│
├── 📂 config/                       # Configuration files
│   └── axios.config.ts              # Axios instance with auth
│
├── 📂 hooks/                        # Custom React hooks
│   ├── use-toast.ts                 # Toast hook
│   ├── use-mobile.tsx               # Mobile detection
│   └── use-media-query.ts           # Media query hook
│
├── 📂 lib/                          # Shared utilities
│   ├── 📂 api/                      # API functions
│   │   └── chat.ts                  # Chat API calls
│   │
│   ├── 📂 hooks/                    # Advanced hooks
│   │   ├── use-init-chat.ts         # Initialize chat
│   │   └── use-get-group.ts         # Fetch groups
│   │
│   ├── utils.ts                     # Utility functions
│   ├── mock-data.ts                 # Mock data for demo
│   └── mock-notifications-data.ts   # Mock notifications
│
├── 📂 types/                        # TypeScript type definitions
│   ├── auth.ts                      # Auth types
│   ├── chat.ts                      # Chat & message types
│   └── user.ts                      # User types
│
├── 📂 public/                       # Static assets
│   └── ...                          # Images, icons, etc.
│
├── 📂 styles/                       # Additional styles
│   └── globals.css                  # Extra global styles
│
├── .env.local                       # Environment variables (local)
├── .gitignore                       # Git ignore rules
├── components.json                  # shadcn/ui config
├── next.config.mjs                  # Next.js configuration
├── package.json                     # Dependencies & scripts
├── pnpm-lock.yaml                   # Lockfile
├── postcss.config.mjs               # PostCSS config
├── tailwind.config.ts               # Tailwind configuration
├── tsconfig.json                    # TypeScript config
└── README.md                        # This file

🎨 Key Components

Main Chat Interface

The heart of the application with all chat features:

// components/chat/immersive-chat-interface.tsx
- WebSocket connection management
- Real-time message handling
- User status tracking
- Typing indicators
- Message read receipts
- Group & private conversations

Authentication

Secure login and registration:

// components/login-form.tsx & registration-form.tsx
- Form validation with Zod
- JWT token management
- Protected routes
- Auto-redirect after login

Landing Page

Beautiful, animated landing page:

// components/hero.tsx, community-features.tsx, join-community.tsx
- Framer Motion animations
- Gradient effects
- Responsive design
- Interactive elements

🌐 API Integration

Authentication Endpoints

POST /api/v1/auth/register  // User registration
POST /api/v1/auth/login     // User login
GET  /api/v1/auth/me        // Get current user

Chat Endpoints

POST /api/v1/chat/create-room        // Create chat room
GET  /api/v1/chat/get-messages       // Fetch messages
POST /api/v1/chat/set-status         // Update read status
GET  /api/v1/chat/search-user        // Search users
GET  /api/v1/chat/get-groups         // Fetch user groups

WebSocket Events

// Client -> Server
message      // Send message
typing       // Typing indicator
read         // Mark as read
subscribe    // Subscribe to user updates
status       // Update user status

// Server -> Client
message      // Receive message
typing       // User typing
read         // Message read
status       // User status update
ack          // Message acknowledgment
room_created // New room notification

🎯 Environment Variables

Variable	Description	Example
`NEXT_PUBLIC_API_URL`	Backend API base URL	`http://localhost:8080/api/v1`
`NEXT_PUBLIC_WS_URL`	WebSocket server URL	`ws://localhost:8080/ws`
`NEXT_PUBLIC_SESSION_KEY`	LocalStorage key for session	`chat_session`
`NEXT_PUBLIC_USER_KEY`	LocalStorage key for user data	`chat_user`
`NEXT_PUBLIC_APP_NAME`	Application name	`CommuniHub`
`NEXT_PUBLIC_APP_URL`	Frontend URL	`http://localhost:3000`

📱 Responsive Design

The application is fully responsive across all devices:

📱 Mobile (< 768px) - Optimized touch interface
📱 Tablet (768px - 1024px) - Adaptive layout
💻 Desktop (> 1024px) - Full feature set

🎨 Customization

Colors

Edit tailwind.config.ts to customize the color scheme:

colors: {
  primary: '#6366f1',    // Indigo
  secondary: '#a855f7',  // Purple
  accent: '#ec4899',     // Pink
}

Fonts

Modify app/layout.tsx to change fonts:

import { Inter } from 'next/font/google'

Animations

Adjust animation timings in app/globals.css:

.animate-gradient {
  animation: gradient-shift 15s ease infinite;
}

🧪 Development Scripts

# Development
pnpm dev              # Start dev server
pnpm dev --turbo      # Start with Turbopack

# Building
pnpm build            # Create production build
pnpm start            # Start production server

# Code Quality
pnpm lint             # Run ESLint

🤝 Contributing

Contributions are welcome! Please follow these steps:

Fork the repository
Create a feature branch (git checkout -b feature/amazing-feature)
Commit your changes (git commit -m 'Add amazing feature')
Push to the branch (git push origin feature/amazing-feature)
Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

👨‍💻 Author

dinhdev-nu

GitHub: @dinhdev-nu
Email: truongbadinh13579@gmail.com

🙏 Acknowledgments

Next.js - The React Framework
shadcn/ui - Beautiful UI components
Radix UI - Accessible primitives
Tailwind CSS - Utility-first CSS
Framer Motion - Animation library
Lucide - Icon library

📞 Support

If you have any questions or need help, feel free to:

⭐ Star this repo if you find it helpful!

Made with ❤️ by dinhdev-nu

Name		Name	Last commit message	Last commit date
Latest commit History 13 Commits
.vscode		.vscode
app		app
components		components
config		config
hooks		hooks
lib		lib
public		public
styles		styles
types		types
.gitignore		.gitignore
LICENSE		LICENSE
README.md		README.md
components.json		components.json
next.config.mjs		next.config.mjs
package.json		package.json
pnpm-lock.yaml		pnpm-lock.yaml
postcss.config.mjs		postcss.config.mjs
tailwind.config.ts		tailwind.config.ts
tsconfig.json		tsconfig.json

Folders and files

Latest commit

History

Repository files navigation