Thanks to visit codestin.com
Credit goes to github.com

Skip to content

The app provides a seamless real-time chatting experience with features like instant messaging, file sharing (images, PDFs, and docs), and emoji reactions. Users can edit or delete their messages for better control over conversations. It supports offline notifications, ensuring no one misses important messages.

Notifications You must be signed in to change notification settings

aakashdixit22/chat-frontend

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

15 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

💬 ConnZen – Real-Time Chat Application

ConnZen is a powerful real-time chat application that enables users to communicate seamlessly with features like instant messaging, file sharing, emoji reactions, and offline notifications. Built with a modern tech stack—React.js, Node.js, Express.js, Socket.IO, and Twilio API—ConnZen delivers a responsive, engaging, and user-friendly chat experience.


✨ Key Features

  • 🔄 Real-Time Messaging – Instant message delivery using WebSockets (Socket.IO)
  • 📎 File Sharing – Upload and share images, PDFs, and documents
  • 😀 Emoji Reactions – Express yourself with emoji responses
  • ✏️ Edit & Delete Messages – Full control over your conversation history
  • 🔕 Offline Notifications – Get notified via Twilio SMS when offline
  • 🛡️ Secure & Responsive UI – Optimized design for all screen sizes

🧱 Tech Stack

🔹 Frontend

  • React.js
  • Tailwind CSS / CSS Modules (optional)
  • Socket.IO Client

🔹 Backend

  • Node.js
  • Express.js
  • Socket.IO
  • Twilio API (for SMS notifications)

🚀 Getting Started

📁 Clone the Repository

git clone https://github.com/your-username/connzen.git
cd connzen

🔧 Backend Setup

cd backend
npm install

Create a .env file in the backend directory:

PORT=5000
TWILIO_ACCOUNT_SID=your_twilio_sid
TWILIO_AUTH_TOKEN=your_twilio_token
TWILIO_PHONE_NUMBER=your_twilio_number

Start the backend server:

npm start

🎨 Frontend Setup

cd ../frontend
npm install
npm start

🔗 API & WebSocket Overview

REST API Endpoints

  • POST /api/messages – Send a message
  • GET /api/messages – Retrieve chat history

WebSocket Events

  • message – Broadcast new message
  • file-upload – Handle file transfers
  • edit-message – Edit an existing message
  • delete-message – Remove a message
  • typing – Typing indicator

📸 Screenshots

(Add screenshots or screen recordings of the UI here)


🛠️ Planned Enhancements

  • 🧑‍🤝‍🧑 Group chat functionality
  • 🔐 User authentication with JWT or OAuth
  • 🧵 Threaded messages and replies
  • 🌍 Multi-language support

👨‍💻 Contributing

Contributions are welcome! Fork the repo, create a feature branch, and submit a pull request.


📬 Contact


📄 License

This project is licensed under the MIT License. See the LICENSE file for more details.


Let me know if you'd like me to auto-fill your LinkedIn/GitHub links or generate a matching LICENSE file!

About

The app provides a seamless real-time chatting experience with features like instant messaging, file sharing (images, PDFs, and docs), and emoji reactions. Users can edit or delete their messages for better control over conversations. It supports offline notifications, ensuring no one misses important messages.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published