{"id":25278230,"url":"https://github.com/rishibakshii/nextjs-chat-app","last_synced_at":"2025-03-15T18:09:14.758Z","repository":{"id":234491279,"uuid":"788595304","full_name":"RishiBakshii/nextjs-chat-app","owner":"RishiBakshii","description":"🔒 Next.js 15 Chat App – Real-time, end-to-end encrypted (E2EE) messaging with Socket.IO, OAuth, group chats, reactions \u0026 file sharing. Secure, fast, and privacy-first! 🚀","archived":false,"fork":false,"pushed_at":"2025-02-12T14:57:00.000Z","size":3103,"stargazers_count":95,"open_issues_count":3,"forks_count":8,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-02-12T15:45:12.510Z","etag":null,"topics":["aggregate-pipelines","chat-app","cloudinary","docker-compose","end-to-end-encryption","firebase-push-notifications","framer-motion","google-auth","mern-chat","next-js-15","passport-js","react-hook-form","realtime","redux-toolkit","rtk-query","socket-io","tailwind","typescript","web-crypto-api","zod"],"latest_commit_sha":null,"homepage":"https://mernchat.in","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/RishiBakshii.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-04-18T18:09:34.000Z","updated_at":"2025-02-12T14:59:23.000Z","dependencies_parsed_at":"2024-05-03T16:01:46.083Z","dependency_job_id":"3799e606-e732-4ce1-a16c-09b3431e50c0","html_url":"https://github.com/RishiBakshii/nextjs-chat-app","commit_stats":null,"previous_names":["rishibakshii/realtime-chat-app","rishibakshii/baatchit-modern-chat-application","rishibakshii/baatchit","rishibakshii/baatchit-chat-application","rishibakshii/mern-chat-e2ee","rishibakshii/mern-chat","rishibakshii/nextjs-chat-app"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RishiBakshii%2Fnextjs-chat-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RishiBakshii%2Fnextjs-chat-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RishiBakshii%2Fnextjs-chat-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RishiBakshii%2Fnextjs-chat-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/RishiBakshii","download_url":"https://codeload.github.com/RishiBakshii/nextjs-chat-app/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243769980,"owners_count":20345217,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["aggregate-pipelines","chat-app","cloudinary","docker-compose","end-to-end-encryption","firebase-push-notifications","framer-motion","google-auth","mern-chat","next-js-15","passport-js","react-hook-form","realtime","redux-toolkit","rtk-query","socket-io","tailwind","typescript","web-crypto-api","zod"],"created_at":"2025-02-12T17:23:07.842Z","updated_at":"2025-03-15T18:09:14.751Z","avatar_url":"https://github.com/RishiBakshii.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# **Mernchat – Secure, End-to-End Encrypted (E2EE) Real-Time Messaging** 🗨️  \n\n**[Mernchat](https://mernchat.in)** is a **secure, real-time messaging platform** built with **Next.js 15, Socket.IO, and end-to-end encryption (E2EE)** to ensure **privacy-first communication**. Designed for seamless **group chats, reactions, file sharing, and OAuth login**, this app is the perfect solution for **secure online conversations**.\n\n\n![Next.js-chat-app Screenshot](next-js-frontend/public/images/og/og-image.png)\n![Next.js-chat-app Screenshot](next-js-frontend/public/images/dekstop-screenshots/group-chat-creation.png)  \n![Next.js-chat-app Screenshot](next-js-frontend/public/images/dekstop-screenshots/recent-calls.png)\n![Next.js-chat-app Screenshot](next-js-frontend/public/images/dekstop-screenshots/poll-creation.png)  \n![Next.js-chat-app Screenshot](next-js-frontend/public/images/dekstop-screenshots/sending-gif.png)  \n![Next.js-chat-app Screenshot](next-js-frontend/public/images/dekstop-screenshots/uploading-attachments.png)\n\n\n\u003c!-- ## **Responsive Design 📱**\n\n\u003cdiv\u003e\n\u003cimg style=\"object-fit: contain;\" src=\"next-js-frontend/public/images/mobile-screenshots/home-screen.png\"/\u003e\n\u003cimg style=\"object-fit: contain;\" src=\"next-js-frontend/public/images/mobile-screenshots/call-history.png\"/\u003e\n\u003cimg style=\"object-fit: contain;\" src=\"next-js-frontend/public/images/mobile-screenshots/incoming-call.png\"/\u003e\n\u003cimg style=\"object-fit: contain;\" src=\"next-js-frontend/public/images/mobile-screenshots/ongoing-call.png\"/\u003e\n\u003cimg style=\"object-fit: contain;\" src=\"next-js-frontend/public/images/mobile-screenshots/chat-view.png\"/\u003e\n\u003cimg style=\"object-fit: contain;\" src=\"next-js-frontend/public/images/mobile-screenshots/reaction-and-unsend-feature.png\"/\u003e\n\u003cimg style=\"object-fit: contain;\" src=\"next-js-frontend/public/images/mobile-screenshots/add-caption-on-photo.png\"/\u003e\n\u003cimg style=\"object-fit: contain;\" src=\"next-js-frontend/public/images/mobile-screenshots/chat-details.png\"/\u003e\n\u003c/div\u003e\n\n\n--- --\u003e\n\n---\n## **🚀 Features**  \n\n### 💬 **Chat \u0026 Messaging**  \n- **Real-time Messaging** – Instantly send and receive messages.  \n- **Voice Notes** – Record and send encrypted voice messages in private chats (not encrypted in group chats). \n- **Typing Indicators** – See when someone is typing (supports multiple users typing simultaneously in group chats).\n- **Message Editing** – Edit messages after sending (with an edit indicator).  \n- **Message Reactions** – React to messages with emojis (double-tap to like/unlike).  \n- **Message Deletion** – Delete messages after sending.  \n- **Message Replies** – Reply to specific messages in a chat, whether sent by you or others.\n\n\n### 📞 **Audio \u0026 Video Calling**\n- **Peer-to-Peer Calls** – High-quality, voice and video calls (powered by Webrtc).\n- **Call History** – View and manage past call logs.\n\n### 📢 **Notifications \u0026 Presence**  \n- **Push Notifications** – Stay updated with real-time alerts (powered by Firebase).  \n- **User Presence** – See who’s online in real time.\n\n### 🤝 **Social Features**  \n- **Friends System** – Add friends and chat with them.  \n- **Group Chats** – Create and participate in group conversations.  \n- **Polling** – Create polls with single/multiple voting options.  \n\n### 📁 **Media \u0026 File Sharing**  \n- **GIF Support** – Send animated GIFs (powered by Tenor).  \n- **File Sharing** – Send and receive files securely.  \n\n### 🔒 **Privacy \u0026 Security**  \n- **End-to-End Encryption (E2EE)** – Secure messages with advanced encryption.  \n- **Private Key Recovery** – Retrieve your encryption key with MFA-protected email verification.  \n\n### 🛠️ **Other Features**  \n- **OAuth Integration** – Sign in with Google \u0026 GitHub.  \n- **PWA Support** – Install next-js-chat-app as a Progressive Web App for a native-like experience.  \n\n---\n\n## 🔐 Privacy \u0026 Encryption Commitment  \n\nAt this project [Mernchat](https://mernchat.in), i have taken **privacy and security** seriously. The app is **built, designed, and structured** with user privacy in mind, ensuring that **certain messages remain completely inaccessible—even to me as a developer**.  \n\n### **End-to-End Encryption (E2EE)**  \nPrivate **one-on-one text messages and voice notes** are **end-to-end encrypted** using **AES-256-GCM + ECDH**. This means:  \n\n✅ **No one—including me as the developer—can access your private chats or private voice notes.**  \n✅ **Text messages sent in private chats (between two users) and voice notes sent in private chats (between two users) are encrypted at the sender’s device and only decrypted on the recipient’s device.**  \n✅ **Even if I access the database directly, I cannot read or retrieve private messages or private voice notes in plain text/data**  \n\nFor **full transparency**, here’s a snapshot of how private messages and private voice notes are stored in the database—fully encrypted and unreadable to anyone, including myself.  \n\n### This is how your private chat text messages that are e2ee looks like in database\n![](next-js-frontend/public/images/privacy/e2ee-messages-in-database.png)\n\n### This is how your private chat voice notes that are also e2ee looks like\n\n##### Here each file in this folder `encrypted-audio` represents a single e2ee voice note\n![](next-js-frontend/public/images/privacy/encrypted-audio-cloudinary-folder.png)\n##### And this is how your encrypted voice note data looks like\n![](next-js-frontend/public/images/privacy/encrypted-voice-note-data.png)\n\n### **What’s Not E2EE?**  \nWhile all data is stored securely, end-to-end encryption is **only applied to private text messages and private voice notes**. The following are **not** end-to-end encrypted:  \n\n❌ **Group chats**  \n❌ **Audio \u0026 video calls (powered by webrtc)**  \n❌ **Media files (images, videos, GIFs, documents, attachments, etc.)**  \n\nThese features are still securely transmitted and stored, but they do not follow the same encryption standard as private messages and private voice notes.  \n\nAt [Mernchat](https://mernchat.in), i am committed to transparency and security. As i continue improving, my aim is to enhance encryption features for even greater privacy in future updates.\n\n\n## **Who Can Use This Chat App?**  \n\n✔️ **Startups \u0026 Teams** – Secure \u0026 private team collaboration 🔐  \n✔️ **Developers** – Learn how to build a **real-time chat app** 👨‍💻  \n✔️ **Open-Source Enthusiasts** – Contribute \u0026 improve the project 🚀  \n✔️ **Personal Use** – Chat privately with friends \u0026 family 💬  \n\n---\n\n## **🛠️ Tech Stack**  \n\n### **Frontend**  \n- **⚛️ Next.js 15 + React 19** – Modern full-stack React framework.  \n- **🛠️ Redux Toolkit + React-Redux** – Efficient global state management.  \n- **🔗 React Hook Form + Zod** – Form handling \u0026 schema validation.  \n- **🔄 Socket.IO Client** – Real-time communication.  \n- **📅 Date-fns** – Date \u0026 time utilities.  \n- **🎥 Framer Motion + Lottie-React** – Animations \u0026 dynamic UI effects.  \n- **🔥 Firebase** – Push notifications \u0026 backend integration.  \n- **💅 Tailwind CSS** – Responsive \u0026 scalable UI.  \n- **🚀 Nodemailer** – Email handling.  \n- **🔐 bcryptjs + jose** – Authentication \u0026 encryption.  \n- **💬 Emoji-Picker-React + Gif-Picker-React** – Interactive media in chat.  \n- **🛠️ Prisma ORM** – Database management.  \n\n### **Backend**  \n- **🟢 Node.js + Express** – Scalable backend API.  \n- **🔄 Socket.IO** – Real-time bidirectional communication.  \n- **🗄️ Prisma ORM** – Type-safe database management.  \n- **🔐 JWT Authentication (jsonwebtoken)** – Secure authentication.  \n- **☁️ Cloudinary** – Cloud storage for images \u0026 files.  \n- **📧 Nodemailer** – Email notifications \u0026 MFA verification.  \n- **🔑 Passport.js + Google OAuth** – OAuth-based authentication.  \n- **🔥 Firebase Admin SDK** – Push notifications.  \n- **🛡️ Helmet** – Security headers for protection.  \n- **📝 Morgan** – HTTP request logging.  \n- **🍪 Cookie-Parser** – Secure cookie handling.  \n- **🛠️ Multer** – File uploads.  \n- **🔄 CORS** – Cross-origin requests.  \n- **🛠️ UUID** – Unique ID generation.  \n- **⚙️ dotenv** – Environment variable management.  \n\n---\n\n## **🚀 Getting Started**  \n\n### **1️⃣ Clone the Repository**  \n```bash\ngit clone https://github.com/RishiBakshii/nextjs-chat-app\ncd nextjs-chat-app\n```\n\n### **2️⃣ Set Up Environment Variables**  \n\n#### **Backend Configuration**  \n1. Navigate to the **backend** folder.  \n2. Rename `.env.development.example` to `.env.development`.  \n3. Rename `.env.production.example` to `.env.production`.  \n4. Replace the placeholder values with actual credentials.  \n5. Create a `firebase-admin-cred.json` file inside `backend/src/` (root level of `src`). This file should contain your Firebase service account credentials required for Firebase push notifications.\n6. 📝 **Example `backend/src/firebase-admin-cred.json` file**, Paste your own cred here provided by firebase  \n```json\n{\n    \"type\": \"service_account\",\n    \"project_id\": \"your-project-id\",\n    \"private_key_id\": \"your-private-key-id\",\n    \"private_key\": \"-----BEGIN PRIVATE KEY-----\\nYOUR_PRIVATE_KEY\\n-----END PRIVATE KEY-----\\n\",\n    \"client_email\": \"your-client-email\",\n    \"client_id\": \"your-client-id\",\n    \"auth_uri\": \"https://accounts.google.com/o/oauth2/auth\",\n    \"token_uri\": \"https://oauth2.googleapis.com/token\",\n    \"auth_provider_x509_cert_url\": \"https://www.googleapis.com/oauth2/v1/certs\",\n    \"client_x509_cert_url\": \"your-client-x509-cert-url\",\n    \"universe_domain\": \"googleapis.com\"\n}\n```\n---\n\n#### **Frontend Configuration**  \n1. Navigate to the **frontend** folder.  \n2. Rename `.env.development.example` to `.env.development`.  \n3. Rename `.env.production.example` to `.env.production`.  \n4. Replace the placeholder values with actual credentials.  \n\n🚨 **Important Notes:**  \n- Never expose sensitive credentials to client side by prefixing them with `NEXT_PUBLIC_`.  \n- Ensure the correct Firebase cred and API URLs are set.  \n---\n\n### **3️⃣ Install Dependencies \u0026 Run the Application**  \n\n#### **Start the Backend First**  \n```bash\ncd backend\nnpm install\nnpm run dev\n```\nThe backend will start at **http://localhost:8000**.  \n\n---\n\n#### **Then Start the Frontend**  \n```bash\ncd next-js-frontend\nnpm install\nnpm run dev\n```\nVisit **http://localhost:3000** in your browser.\n\n---\n### **4️⃣ Database Setup \u0026 Migrations**  \n\n#### **Available Database Commands**  \nThese scripts are defined in `package.json` under the **next-js-frontend** folder:  \n\n```json\n{\n  \"db:push:dev\": \"dotenv -e .env.development -- npx prisma db push\",\n  \"db:push:prod\": \"dotenv -e .env.production -- npx prisma db push\",\n  \"migrate:dev\": \"dotenv -e .env.development -- npx prisma migrate deploy\",\n  \"migrate:prod\": \"dotenv -e .env.production -- npx prisma migrate deploy\"\n}\n```\n\n#### **Push the Schema (Non-Migratory Approach)**  \nIf you just need to sync the database schema without migrations:  \n- **Development:**  \n  ```bash\n  npm run db:push:dev\n  ```\n- **Production:**  \n  ```bash\n  npm run db:push:prod\n  ```\n\n#### **Run Migrations (For Versioned Changes)**  \nIf you are making structural changes and need to apply existing migrations:  \n- **Development:**  \n  ```bash\n  npm run migrate:dev\n  ```\n- **Production:**  \n  ```bash\n  npm run migrate:prod\n  ```\n\n🚀 **Note:**  \n- `db push` is useful when setting up the database initially or for quick schema changes **without** migration tracking.  \n- `migrate deploy` ensures **existing** migrations are applied in production and development.  \n\n---\n\n\n## **💡 Contribution Guide**  \nContributions are welcome! To contribute:  \n1. **Fork** the repository.  \n2. **Create a branch**:  \n   ```bash\n   git checkout -b feature-branch\n   ```  \n3. **Commit your changes**:  \n   ```bash\n   git commit -m \"Add new feature\"\n   ```  \n4. **Push to GitHub**:  \n   ```bash\n   git push origin feature-branch\n   ```  \n5. **Open a Pull Request** 🚀  \n\n---\n\n## **📧 Contact**  \nFor feedback or queries, reach out:  \n🔗 **[LinkedIn @Rishi Bakshi](https://www.linkedin.com/in/rishi-bakshi/)**\n\u003cbr/\u003e\n📩 **[rishibakshiofficial@gmail.com](mailto:rishibakshiofficial@gmail.com)**  \n\n---\n\n![GitHub Repo stars](https://img.shields.io/github/stars/RishiBakshii/nextjs-chat-app?style=social)  \n![GitHub forks](https://img.shields.io/github/forks/RishiBakshii/nextjs-chat-app?style=social)  \n![GitHub issues](https://img.shields.io/github/issues/RishiBakshii/nextjs-chat-app)  \n![GitHub license](https://img.shields.io/github/license/RishiBakshii/nextjs-chat-app)  \n![Contributions welcome](https://img.shields.io/badge/contributions-welcome-brightgreen.svg)  \n\n---\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frishibakshii%2Fnextjs-chat-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frishibakshii%2Fnextjs-chat-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frishibakshii%2Fnextjs-chat-app/lists"}