Messecure - Secure Web Messaging Application 🚀

Messecure is a modern, secure, and scalable web messaging application built using Next.js 14, powered by the Matrix protocol and Synapse server. It leverages the latest technology to ensure end-to-end encrypted communication, making it perfect for private and team-based messaging.

✨ Features

• Real-time messaging with Matrix protocol 🔄
• End-to-end encryption for secure conversations 🔐
• User-friendly web interface with dynamic UI components 🖥️
• Scalable infrastructure using Docker and Docker Compose 🐳

---

📦 Dependencies

Core Technologies

• Next.js 14: A React-based framework for building fast and scalable web applications ⚡
• Matrix Protocol: An open standard for secure, decentralized communication 🔗
• Synapse Server: A homeserver implementation for the Matrix protocol 🏠

Additional Dependencies

• PostgreSQL 14: Used as the database backend for the Synapse server 🗄️
• Various npm packages for UI components and utility functions (e.g., matrix-js-sdk, next-auth, react-hook-form)

---

🐳 Dockerization

Messecure is fully containerized using Docker and Docker Compose to simplify deployment and scaling. The application consists of three main services:

1. Synapse: The Matrix homeserver.
2. PostgreSQL: The database for Synapse.
3. Messecure App: The Next.js frontend application.

Docker Compose Configuration

Below is the docker-compose.yml configuration:

version: '3.8'

services:
  synapse:
    image: matrixdotorg/synapse:latest
    container_name: messecure-synapse
    depends_on:
      - postgres
    volumes:
      - ./synapse/homeserver.yaml:/data/homeserver.yaml
      - ./synapse/data:/data
    environment:
      SYNAPSE_SERVER_NAME: localhost
      SYNAPSE_REPORT_STATS: 'yes'
    ports:
      - "8008:8008"
    restart: unless-stopped

  postgres:
    image: postgres:14-alpine
    container_name: messecure-db
    environment:
      POSTGRES_USER: synapse
      POSTGRES_PASSWORD: aComplexPassphraseNobodyCanGuess
    volumes:
      - postgres_data:/var/lib/postgresql/data
    restart: unless-stopped

  messecure:
    build:
      context: .
      dockerfile: Dockerfile
      target: runner
    container_name: messecure-app
    ports:
      - "3000:3000"
    depends_on:
      - synapse
      - postgres
    environment:
      NODE_ENV: production
    restart: unless-stopped

volumes:
  postgres_data:
    driver: local

---

🛠️ Installation and Deployment

Prerequisites

• Docker and Docker Compose installed on your system 🐳
• Node.js (v20 or higher) for local development 🌐

Steps to Install and Run

1. Clone the repository:

   git clone https://github.com/yourusername/messecure.git
   cd messecure

2. Configure Synapse:

   • Edit synapse/homeserver.yaml with your desired settings.

3. Build and run the Docker containers:

   docker-compose up --build

4. Access the application:

   • Synapse Admin Interface: http://localhost:8008
   • Messecure Frontend: http://localhost:3000

Local Development

1. Install dependencies:

   npm install

2. Run the application in development mode:

   npm run dev

3. Open your browser at http://localhost:3000.

---

🔐 Notes

• Replace sensitive environment variables with your own secure values.
• To deploy in production, use a reverse proxy like Nginx for SSL termination and domain setup.

---

Enjoy secure and modern communication with Messecure! ✉️🔒

---

Project Structure

Here is an overview of the main folders and files in the project :

messecure-frontend/
├── .env                  # Environment variables file
├── .eslintignore         # Files ignored by ESLint
├── .eslintrc.json        # ESLint configuration
├── .github/              # GitHub Action Workflow
├── .gitignore            # Files ignored by Git
├── .idea/                # IDE configurations (JetBrains)
├── .next/                # Files generated by Next.js
├── Dockerfile            # Dockerfile for the application
├── README.md             # Project documentation
├── app/                  # File of routes and Next.js pages
├── components/           # Reusable application components
├── config/               # Custom application configuration
├── contexts/             # React contexts
├── docker-compose.yml    # Docker Compose configuration
├── hooks/                # React custom hooks
├── lib/                  # Internal application libraries
├── package.json          # JavaScript Dependencies list
├── public/               # Public files folder (images, static assets)
├── services/             # Matrix service
├── styles/               # CSS/Tailwind files for styles
├── synapse/              # Synapse media folder
└── types/                # Global types for TypeScript

---

✨ Main Folders Description

• app/ : Main structure of Next.js pages and routes.
• components/ : Modular and reusable React components.
• services/ : Centralised management for Matrix API calls.
• styles/: Style configuration via TailwindCSS and theme management.