Volo - Premium Messaging Experience

Volo Messenger

The Future of Real-Time Communication
Explore the docs »

View Demo · Report Bug · Request Feature

---

📋 Table of Contents

• About The Project
  • Built With
• Key Features
• Getting Started
  • Prerequisites
  • Installation
• Roadmap
• Contributing
• License
• Contact

---

💎 About The Project

Volo is not just another messaging app. It is a re-imagination of digital connection, prioritizing speed, security, and aesthetic excellence.

Built on the latest "Bleeding Edge" stack of Next.js 14 and React 18, Volo offers a seamless, native-like experience on the web. The interface features a bespoke Neon Dark Mode with glassmorphism elements, ensuring that your chats look as good as they feel.

🔧 Built With

• Framework: Next.js 14 (App Router & Server Actions)
• Database: MongoDB (NoSQL Scalability)
• ORM: Prisma (Type-safe Database Access)
• Real-time Engine: Pusher (WebSockets)
• Authentication: NextAuth.js (OAuth + Credentials)
• Styling: Tailwind CSS + Headless UI

---

🚀 Key Features

Feature	Description
🎨 Premium UI/UX	A deeply immersive Dark Mode with neon accents (Cyan/Violet) and frosted glass aesthetic.
⚡ Real-time Sync	Instant message delivery, new conversation alerts, and live typing indicators.
🔒 Secure Auth	Enterprise-grade authentication via Google, GitHub, or secure Credentials.
📸 Media Sharing	Cloud-optimized image uploading and rendering via Cloudinary.
👥 Group Chats	Create, manage, and administer group conversations with ease.
📱 Mobile First	A fully responsive design that adapts perfectly to any device size.
👀 Read Receipts	Know exactly when your messages are seen with avatar-based indicators.

---

🏁 Getting Started

To get a local copy up and running, follow these simple steps.

Prerequisites

• Node.js (v18.17.0 or higher)
• npm or yarn
• MongoDB Instance (Atlas recommended)

Installation

1. Clone the repo

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

2. Install NPM packages

   npm install

3. Configure Environment Create a .env file in the root directory:

   DATABASE_URL="mongodb+srv://<username>:<password>@cluster.mongodb.net/test"
   NEXTAUTH_SECRET="super_secret_key"
   NEXTAUTH_URL="http://localhost:3000"
   
   # Social Providers
   GITHUB_ID="your_github_client_id"
   GITHUB_SECRET="your_github_client_secret"
   GOOGLE_CLIENT_ID="your_google_client_id"
   GOOGLE_CLIENT_SECRET="your_google_client_secret"
   
   # Cloudinary
   NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME="your_cloud_name"
   
   # Pusher
   NEXT_PUBLIC_PUSHER_APP_KEY="your_pusher_key"
   PUSHER_APP_ID="your_pusher_app_id"
   PUSHER_SECRET="your_pusher_secret"
   NEXT_PUBLIC_PUSHER_CLUSTER="mt1"

4. Sync Database

   npx prisma generate
   npx prisma db push

5. Start Development Server

   npm run dev

---

🗺️ Roadmap

• Core Messaging: Real-time text and One-on-One chats.
• Group Chats: Multi-user conversations.
• Media Support: Image sharing.
• Volo Rebrand: Complete UI overhaul with Neon/Glass theme.
• Voice/Video Calls: WebRTC integration.
• File Sharing: Support for documents and zip files.
• E2E Encryption: Signal protocol implementation.

See the open issues for a full list of proposed features.

---

🤝 Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

---

📄 License

Distributed under the MIT License. See LICENSE for more information.

---

✉️ Contact

Your Name - @your_twitter - email@example.com

Project Link: https://github.com/RohitBit-25/volo-messenger