Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rishibakshii/nextjs-chat-app
🔒 Next.js 15 Chat App – Real-time, end-to-end encrypted (E2EE) messaging with Socket.IO, OAuth, group chats, reactions & file sharing. Secure, fast, and privacy-first! 🚀
https://github.com/rishibakshii/nextjs-chat-app
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
Last synced: about 5 hours ago
JSON representation
🔒 Next.js 15 Chat App – Real-time, end-to-end encrypted (E2EE) messaging with Socket.IO, OAuth, group chats, reactions & file sharing. Secure, fast, and privacy-first! 🚀
- Host: GitHub
- URL: https://github.com/rishibakshii/nextjs-chat-app
- Owner: RishiBakshii
- Created: 2024-04-18T18:09:34.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2025-02-12T14:57:00.000Z (about 7 hours ago)
- Last Synced: 2025-02-12T15:45:12.510Z (about 7 hours ago)
- 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
- Language: TypeScript
- Homepage: https://mernchat.in
- Size: 2.96 MB
- Stars: 95
- Watchers: 2
- Forks: 8
- Open Issues: 3
-
Metadata Files:
- Readme: readme.md
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# **Next.js Chat App – Secure, End-to-End Encrypted (E2EE) Real-Time Messaging** 🗨️
**Next.js Chat App** 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**.
---
## **🚀 Features**
### 🔒 **Privacy & Security**
- **End-to-End Encryption (E2EE)** – Secure messages with advanced encryption.
- **Private Key Recovery** – Retrieve your encryption key with MFA-protected email verification.
### 💬 **Chat & Messaging**
- **Real-time Messaging** – Instantly send and receive messages.
- **Message Editing** – Edit messages after sending (with an edit indicator).
- **Message Reactions** – React to messages with emojis (double-tap to like/unlike).
- **Message Deletion** – Delete messages after sending.
- **Typing Indicators** – See when someone is typing.
- **Message Seen Status** – Know when your message is read.
### 📢 **Notifications & Presence**
- **Push Notifications** – Stay updated with real-time alerts.
- **User Presence** – See who’s online in real time.
### 🤝 **Social Features**
- **Friends System** – Add friends and chat with them.
- **Group Chats** – Create and participate in group conversations.
- **Polling** – Create polls with single/multiple voting options.
### 📁 **Media & File Sharing**
- **GIF Support** – Send animated GIFs (powered by Tenor).
- **File Sharing** – Send and receive files securely.
### 🛠️ **Other Features**
- **OAuth Integration** – Sign in with Google & GitHub.
- **PWA Support** – Install next-js-chat-app as a Progressive Web App for a native-like experience.
---
## **Who Can Use This Chat App?**
✔️ **Startups & Teams** – Secure & private team collaboration 🔐
✔️ **Developers** – Learn how to build a **real-time chat app** 👨💻
✔️ **Open-Source Enthusiasts** – Contribute & improve the project 🚀
✔️ **Personal Use** – Chat privately with friends & family 💬
---
## **🛠️ Tech Stack**
### **Frontend**
- **⚛️ Next.js 15 + React 19** – Modern full-stack React framework.
- **🛠️ Redux Toolkit + React-Redux** – Efficient global state management.
- **🔗 React Hook Form + Zod** – Form handling & schema validation.
- **🔄 Socket.IO Client** – Real-time communication.
- **📅 Date-fns** – Date & time utilities.
- **🎥 Framer Motion + Lottie-React** – Animations & dynamic UI effects.
- **🔥 Firebase** – Push notifications & backend integration.
- **💅 Tailwind CSS** – Responsive & scalable UI.
- **🚀 Nodemailer** – Email handling.
- **🔐 bcryptjs + jose** – Authentication & encryption.
- **💬 Emoji-Picker-React + Gif-Picker-React** – Interactive media in chat.
- **🛠️ Prisma ORM** – Database management.
### **Backend**
- **🟢 Node.js + Express** – Scalable backend API.
- **🔄 Socket.IO** – Real-time bidirectional communication.
- **🗄️ Prisma ORM** – Type-safe database management.
- **🔐 JWT Authentication (jsonwebtoken)** – Secure authentication.
- **☁️ Cloudinary** – Cloud storage for images & files.
- **📧 Nodemailer** – Email notifications & MFA verification.
- **🔑 Passport.js + Google OAuth** – OAuth-based authentication.
- **🔥 Firebase Admin SDK** – Push notifications.
- **🛡️ Helmet** – Security headers for protection.
- **📝 Morgan** – HTTP request logging.
- **🍪 Cookie-Parser** – Secure cookie handling.
- **🛠️ Multer** – File uploads.
- **🔄 CORS** – Cross-origin requests.
- **🛠️ UUID** – Unique ID generation.
- **⚙️ dotenv** – Environment variable management.
---
## **🚀 Getting Started**
### **1️⃣ Clone the Repository**
```bash
git clone https://github.com/RishiBakshii/nextjs-chat-app
cd nextjs-chat-app
```
### **2️⃣ Set Up Environment Variables**
#### **Backend Configuration**
1. Navigate to the **backend** folder.
2. Copy `.env.example` and rename it to `.env`.
3. Replace the placeholder values with actual credentials.
4. Make sure `backend/src/firebase-admin-cred.json` is correctly set up for Firebase authentication.
📝 **Example (`backend/.env`)**:
```ini
NODE_ENV=DEVELOPMENT
PORT=8000
JWT_SECRET=your-secure-jwt-secret
DATABASE_URL=your-database-url
FIREBASE_CREDENTIALS_PATH=./src/firebase-admin-cred.json
```
---
#### **Frontend Configuration**
1. Navigate to the **frontend** folder.
2. Copy `.env.development.example` and rename it to `.env.development`.
3. Copy `.env.production.example` and rename it to `.env.production`.
4. Fill in your API keys and URLs.
📝 **Example (`frontend/.env.development`)**:
```ini
NEXT_PUBLIC_TENOR_API_KEY=your-tenor-api-key
NEXT_PUBLIC_FIREBASE_API_KEY=your-firebase-api-key
NEXT_PUBLIC_BASE_URL=http://localhost:8000/api/v1
NEXT_PUBLIC_CLIENT_URL=http://localhost:3000
```
🚨 **Important Notes:**
- Never expose sensitive credentials in `NEXT_PUBLIC_` variables.
- Ensure the correct Firebase and API URLs are set.
---
### **3️⃣ Install Dependencies & Run the Application**
#### **Start the Backend First**
```bash
cd backend
npm install
npm run dev
```
The backend will start at **http://localhost:8000**.
---
#### **Then Start the Frontend**
```bash
cd frontend
npm install
npm run dev
```
Visit **http://localhost:3000** in your browser.
---
## **💡 Contribution Guide**
Contributions are welcome! To contribute:
1. **Fork** the repository.
2. **Create a branch**:
```bash
git checkout -b feature-branch
```
3. **Commit your changes**:
```bash
git commit -m "Add new feature"
```
4. **Push to GitHub**:
```bash
git push origin feature-branch
```
5. **Open a Pull Request** 🚀
---
## **📧 Contact**
For feedback or queries, reach out:
📩 **[[email protected]](mailto:[email protected])**
---
---