Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/asirwad/chatgram-nextjs-express-socketio

This project aims to create a clone of the Telegram messaging application using Next.js 13 and Express. It provides a web-based interface for users to send and receive messages and interact with the Telegram.
https://github.com/asirwad/chatgram-nextjs-express-socketio

express-api livekit-sdk mongodb nextjs nodejs socket-io zustand

Last synced: 4 days ago
JSON representation

Host: GitHub
URL: https://github.com/asirwad/chatgram-nextjs-express-socketio
Owner: Asirwad
Created: 2025-02-05T06:25:11.000Z (8 days ago)
Default Branch: main
Last Pushed: 2025-02-07T13:19:35.000Z (6 days ago)
Last Synced: 2025-02-07T14:26:11.512Z (6 days ago)
Topics: express-api, livekit-sdk, mongodb, nextjs, nodejs, socket-io, zustand
Language: TypeScript
Homepage:
Size: 3.73 MB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

        # Chatgram: Telegram Clone

![Next.js](https://img.shields.io/badge/Next.js-000000?logo=nextdotjs&logoColor=white)

![Node.js](https://img.shields.io/badge/Node.js-339933?logo=nodedotjs&logoColor=white)

![MongoDB](https://img.shields.io/badge/MongoDB-47A248?logo=mongodb&logoColor=white)

![TypeScript](https://img.shields.io/badge/TypeScript-3178C6?logo=typescript&logoColor=white)

![Tailwind CSS](https://img.shields.io/badge/Tailwind_CSS-06B6D4?logo=tailwindcss&logoColor=white)

A full-stack Telegram clone featuring real-time messaging and video calling capabilities.

![Demo Screenshot](https://github.com/alishirani1384/chatgram/blob/main/demo.gif)

## ✨ Features

### Core Functionality

| Category              | Features                                                                 |

|-----------------------|--------------------------------------------------------------------------|

| **Authentication**    | JWT-based registration & login, Session persistence                     |

| **Real-Time Chat**    | WebSocket messaging, Message history, Typing indicators                 |

| **Multimedia**        | Video calling (WebRTC), File attachments, Emoji support                 |

| **UI/UX**             | Responsive design, Dark/Light themes, Message animations                |

## 🚀 API Documentation

### Participant Token Generation

**Endpoint**  

`GET /api/get-participant-token`

**Request Parameters**

```json

{

  "userId": "string",

  "roomId": "string"

}

```

**Response**

```json

{

  "token": "eyJhbGci...",

  "expiresAt": "2025-02-07T18:30:00Z"

}

```

## 🛠️ Tech Stack

| Category  | Technologies                                                                 |

|-----------|------------------------------------------------------------------------------|

| **Frontend** | Next.js 13, TypeScript, Tailwind CSS, Zustand, React-Query, shadcn/ui       |

| **Backend**  | Node.js, Express, Socket.IO, MongoDB, Redis, JWT                           |

| **DevOps**   | Docker, GitHub Actions, ESLint, Prettier                                    |

## 📦 Installation

### ⚙️ Server

```bash

# Clone repository

git clone https://github.com/Asirwad/ChatGram-NextJS-Express-SocketIO.git

cd ChatGram-NextJS-Express-SocketIO/server

# Install dependencies

npm install

# Configure environment

cp client/.env.example client/.env.local

cp server/.env.example server/.env

# Start development

npm run dev

```

### 🪶 Client

```bash

cd ChatGram-NextJS-Express-SocketIO/client

# Install dependencies

npm install

# Start development

npm run dev

```

## 🌐 Environment Variables

| Variable                | Description                         | Example              |

|-------------------------|-------------------------------------|----------------------|

| `NEXT_PUBLIC_API_URL`   | Backend API base URL                | http://localhost:3001 |

| `MONGODB_URI`           | MongoDB connection string           | mongodb://localhost:27017 |

| `JWT_SECRET`            | JWT signing key                     | super_secret_key_123 |

## 📁 Project Structure

```

ChatGram-NextJS-Express-SocketIO/

├── client/            # Next.js frontend

│   ├── src/app/       # App router

│   └── src/components # UI components

└── server/            # Express backend

    ├── models/        # MongoDB models

    └── routes/        # API endpoints

```