A not so secure, real-time desktop messenger application built with React, Electron, and Next.js.
4dc is a messaging platform designed with a focus on data privacy, real-time synchronization, and distinct user management. It combines the native experience of a desktop application (via Electron) with a scalable cloud backend (Next.js & Firebase).
- Registration: Secure sign-up using Email, Password, and Username.
- Identity: Every user is assigned a unique system
userId, allowing Usernames to be non-unique/flexible. - Authentication: Managed via Firebase Authentication.
- Add by ID: Users connect by sharing their unique
userId. - Friendship Flow: Strict request-based system. A user must accept a contact request before any messages can be exchanged.
- Chat Types: Support for both 1-on-1 Direct Messages and Group Chats.
- Real-time: Instant message delivery via Firestore real-time listeners.
- Persistence: Messages are stored in a NoSQL structure (Firestore) for history and syncing.
- Encryption: Messages are encrypted before storage.
- Access Control: Only the intended recipient or group members can decrypt and read messages.
- Data Safety: No sensitive data is exposed unencrypted in the frontend. Private keys and secrets are managed server-side via the Firebase Admin SDK.
- Core: Electron (v39)
- Build Tool: Vite (via Electron Forge)
- Frontend: React (v19)
- Styling: Tailwind CSS (v3) +
clsx/tailwind-merge - Icons: Lucide React
- Crypto:
crypto-js(AES Encryption) - Routing: React Router DOM
- Framework: Next.js 16 (App Router)
- Styling: Tailwind CSS (v4)
- Animations: Framer Motion
- Server Logic: Firebase Admin SDK
- Database: Google Firestore (NoSQL)
- Auth: Firebase Authentication
Follow these steps to set up the project locally.
- Node.js (v20 or higher recommended)
- npm or yarn
- A Firebase Project (Google Account required)
- Go to the Firebase Console.
- Create a new project.
- Authentication: Enable "Email/Password".
- Firestore Database: Create a database in "Test Mode".
- Settings:
- Get your Web App Config (API Key, etc.) for the Client.
- Generate a Service Account Private Key (JSON) for the Backend.
git clone https://github.com/Stiwyy/4dc.git
cd 4dc
The backend handles the API and the landing page.
- Navigate to the backend folder:
cd backend
npm install
- Create a
.env.localfile:
FIREBASE_PROJECT_ID=your-project-id
FIREBASE_CLIENT_EMAIL=your-service-account-email
FIREBASE_PRIVATE_KEY="-----BEGIN PRIVATE KEY-----\n..."
- Start the server:
npm run dev
Runs on http://localhost:3000
The desktop application.
- Open a new terminal and navigate to the frontend folder:
cd frontend
npm install
- Create a
.envfile (Vite requiresVITE_prefix for exposed vars, but check your implementation if you use standardREACT_APP_orVITE_):
VITE_FIREBASE_API_KEY=your-api-key
VITE_FIREBASE_AUTH_DOMAIN=your-project.firebaseapp.com
VITE_FIREBASE_PROJECT_ID=your-project-id
# Add other firebase config vars here
- Start the Electron app:
npm start
(This runs electron-forge start)
To create a distributable executable (exe, deb, etc.):
npm run make
The project is split into two main components:
- The Backend (Next.js): Handles the marketing website (download page) and the API routes.
- The Client (Electron + React): The actual application installed by the user.
Data Structure (Firestore):
users: User profiles and public keys.chats: Metadata for conversations (participants, types).messages: Encrypted message content linked to chats.
Do not actually use this seriously. This is a joke project.
Distributed under the GPL-3.0 License. See LICENSE for more information.