Real-Time Chat App Frontend

This is the frontend for a real-time chat application built with Next.js, React, and Socket.IO. It provides a modern, responsive interface for users to engage in private one-on-one conversations and participate in group chats.

✨ Features

• User Authentication: Secure registration and login for users.
• One-to-One Chat: Real-time private messaging between users.
• Group Chat: Create, join, and message in group conversations.
• Real-time Updates:
  • Live message delivery.
  • User online/offline status indicators.
  • "User is typing..." indicators for both private and group chats.
• Message Status: See message read receipts (✓ for sent, ✓✓ for read).
• State Management: Global state for authentication is managed using Zustand.
• Responsive Design: A clean, mobile-friendly UI built with Tailwind CSS.

🛠️ Tech Stack

• Framework: Next.js 15
• UI Library: React 19
• Language: TypeScript
• Styling: Tailwind CSS
• Real-time Communication: Socket.IO Client
• State Management: Zustand
• HTTP Client: Axios

🚀 Getting Started

Follow these instructions to get a copy of the project up and running on your local machine for development and testing purposes.

Prerequisites

• Node.js (v20 or later)
• npm, yarn, or pnpm
• A running instance of the chat app backend.

Installation

1. Clone the repository:

   git clone https://github.com/VidhuPrakash/chat_app_frontend.git
   cd chat_app_frontend

2. Install dependencies:

   npm install
   # or
   yarn install
   # or
   pnpm install

3. Create an environment file: Create a .env.local file in the root of the project and add the URL of your backend server.

   # .env.local
   NEXT_PUBLIC_API_URL=http://localhost:5000

   Replace http://localhost:5000 with the actual URL where your backend is running.

4. Run the development server:

   npm run dev

Open http://localhost:3000 with your browser to see the application.

📂 Project Structure

The project follows a modular, feature-based architecture to keep the codebase organized and scalable.

src/
├── app/            # Next.js App Router: Contains all pages and layouts.
├── hooks/          # Custom React hooks (e.g., useDebounce).
├── lib/            # Core logic and utilities:
│   ├── api.ts      # Pre-configured Axios instance for API requests.
│   ├── socket.ts   # Socket.IO connection management.
│   ├── store.ts    # Zustand store for global state management (auth).
│   └── types.ts    # TypeScript type definitions.
├── module/         # Feature-based modules (chat, login, register).
│   ├── chat/
│   ├── login/
│   └── register/   # Each module contains components, services, and views.
└── theme/          # Global styles and Tailwind CSS configuration.

📜 Available Scripts

In the project directory, you can run:

• npm run dev: Starts the development server on http://localhost:3000.
• npm run build: Builds the application for production.
• npm run start: Starts the production server after a build.
• npm run lint: Lints the code using ESLint to find and fix problems.