Web Messenger

A real-time web messenger application built with Golang (Fiber) backend and Vue.js 3 frontend.

📋 Project Overview

This is a modern, real-time messaging application featuring:

• Backend: Golang with Fiber v3 framework
• Frontend: Vue.js 3 with TypeScript and Vite
• Database: SQLite with GORM
• Real-time Communication: WebSocket support
• Markdown Support: Messages support Markdown formatting
• Modern UI: Telegram-inspired dark theme interface

🏗️ Architecture

Backend Structure

backend/
├── internal/
│   ├── cmd/              # Application entry point
│   ├── app/              # Application initialization
│   ├── domain/           # Business models and interfaces
│   ├── usecase/          # Business logic layer
│   ├── repository/       # Data access layer
│   └── delivery/         # HTTP handlers and WebSocket
├── data/                 # SQLite database (auto-created)
├── go.mod
└── go.sum

Frontend Structure

frontend/
├── src/
│   ├── features/         # Feature modules (chat)
│   ├── shared/           # Shared utilities and composables
│   ├── types/            # TypeScript type definitions
│   ├── App.vue
│   └── main.ts
├── public/
├── index.html
├── package.json
├── vite.config.ts
└── tsconfig.json

🚀 Getting Started

Prerequisites

• Go: 1.21 or higher
• Node.js: 20 or higher
• npm or yarn

Backend Setup

1. Navigate to the backend directory:

2. Install dependencies:

3. Run the backend server:

The backend server will start on

Frontend Setup

1. Navigate to the frontend directory:

2. Install dependencies:

3. Start the development server:

The frontend will be available at

📦 Building for Production

Backend

The backend is already compiled when you run

Frontend

The built files will be in the

🔧 Configuration

Backend

• Port: 8000 (configurable in
  backend/internal/app/app.go
  )
• Database: SQLite at
  backend/data/messenger.db
• WebSocket:
  /ws
  endpoint

Frontend

• Port: 3000 (configurable in
  frontend/vite.config.ts
  )
• API Proxy: Configured to proxy
  /api
  and
  /ws
  to backend

🎯 Features

Real-time Messaging

• WebSocket-based real-time message delivery
• Automatic reconnection with exponential backoff
• Ping/pong heartbeat mechanism

Message Features

• Markdown support (bold, italic, code, links, lists)
• Message history with pagination
• Character limit (2000 characters)
• Timestamp display

User Experience

• Username management with localStorage persistence
• Responsive design
• Dark theme
• Connection status indicator
• Auto-scroll to latest messages

📡 API Endpoints

Messages

• GET /api/v1/chat/default/messages?page=1&limit=50
  - Get message history
• POST /api/v1/chat/default/messages
  - Send a new message

WebSocket

• WS /ws
  - WebSocket connection for real-time updates

🔒 Security

• CORS enabled for all origins (configure for production)
• Input validation on all endpoints
• XSS protection via DOMPurify
• Message length limits

🧪 Testing

Backend

Frontend

📝 Development Notes

Backend

• Follows Clean Architecture principles
• Dependency injection via constructors
• No global state
• Graceful shutdown handling

Frontend

• Feature-driven architecture
• Composition API with
  <script setup>
• TypeScript for type safety
• Composables for reusable logic
• No barrel files to avoid circular dependencies

🐛 Troubleshooting

Backend Issues

• Ensure Go 1.21+ is installed
• Check that port 8000 is not in use
• Verify database permissions in
  backend/data/

Frontend Issues

• Ensure Node.js 20+ is installed
• Clear
  node_modules
  and reinstall if needed
• Check that backend is running on port 8000

📄 License

This project is provided as-is for educational purposes.

🤝 Contributing

Contributions are welcome! Please follow the existing code style and architecture patterns.

📞 Support

For issues or questions, please refer to the code documentation or create an issue in the repository.