Nakh Front-end

Welcome to the Nakh Front-end project! This repository contains the front-end code for Nakh, a modern and scalable chat application designed for real-time communication, conversations management, and seamless user experience.

Table of Contents

• Introduction
• Technologies Used
• Installation
• Usage
• Scripts
• Project Structure
• Per-Route Structure (App Router)
• Localization
• Contributing
• License

Introduction

Nakh is a real-time chat platform that provides a clean, fast, and responsive interface for messaging, conversations, contacts, and user presence. The front-end is designed with scalability, maintainability, and developer experience in mind, making it suitable for both small teams and large-scale applications.

Technologies Used

Installation

To get a local copy of the project up and running, follow these steps.

Install Bun

If you don't have Bun installed, follow the instructions here.

Clone the repository

git clone https://github.com/agroture/nakh.git
cd nakh

Install dependencies

bun install

Usage

To start the development server, you can specify a port:

PORT=3000 bun run dev
# or
bun run dev 3000

The app will be available at http://localhost:3000 (or your specified port).

Scripts

• Start Development Server bun run dev [port]

• Build for Production bun run build

• Check Code Formatting bun run format:check

• Fix Code Formatting bun run format:fix

Project Structure

The project uses the Next.js App Router structure under the /src directory.

/
├── public/
│   ├── img/          # Images (avatars, chat assets, etc.)
│   ├── fonts/
│   │   ├── fa/       # Persian fonts
│   │   ├── en/       # Latin fonts
│   │   └── mono/     # Monospaced fonts
│   ├── logo/         # Brand logos and icons
│   └── svg/
│       └── ui/       # UI-related SVG icons
├── serviceWorker/    # Service worker & offline support
├── src/
│   ├── app/          # App Router entrypoint (routes, layouts, etc.)
│   │   ├── (route folders)
│   │   ├── layout.tsx
│   │   └── page.tsx
│   ├── components/   # Shared, reusable components
│   ├── features/     # Feature-based modules (chat, auth, profile, etc.)
│   ├── ui/           # Atomic UI components
│   ├── config/       # App-wide configuration
│   ├── hooks/        # Global custom React hooks
│   ├── lib/          # Utilities built on external libraries
│   ├── locales/      # i18n translation files
│   ├── shared/       # Shared types, Zod schemas, enums
│   ├── styles/       # Global styles
│   └── utils/        # General utility functions
└── ...

Per-Route Structure (App Router)

Each route inside src/app follows a modular, feature-oriented structure.

Example for /src/app/chat:

/src/app/chat/
│
├── modules/
│   ├── components/
│   │   ├── index.tsx               # Barrel file
│   │   ├── ChatMainView.tsx        # Main chat view
│   │   └── ...other components
│   ├── generics/
│   │   ├── index.ts
│   │   ├── types.ts                # Chat-related types
│   │   ├── schema.ts               # Zod schemas (messages, rooms, etc.)
│   │   └── constants.ts            # Chat constants
│   ├── services/
│   │   ├── index.ts
│   │   └── ...API / socket calls
│   ├── utils/
│   │   ├── index.ts
│   │   └── ...route-only helpers
│   └── hooks/
│       ├── index.ts
│       └── ...chat-specific hooks
│
├── page.tsx                        # Route entry
├── layout.tsx                      # (Optional) Route layout
└── README.md                       # Route documentation

Notes:

• All folders inside modules are optional.
• components must contain a barrel file and a main view component named after the route.
• generics holds route-only types, schemas, and constants.
• services handles API, WebSocket, or real-time communication logic.
• Each route should include a README.md describing its structure and behavior.

Localization

Nakh supports multiple languages using JSON-based localization files located in the /messages directory.

How It Works

• Language files:

  • en.json
  • fa.json

• Each route has its own top-level key.

Example for the chat route:

// en.json
{
  "chat": {
    "navbar": {
      "title": "Chat",
      "newMessage": "New Message"
    },
    "main": {
      "placeholder": "Type a message...",
      "empty": "No messages yet"
    }
  }
}

// fa.json
{
  "chat": {
    "navbar": {
      "title": "چت",
      "newMessage": "پیام جدید"
    },
    "main": {
      "placeholder": "پیام خود را بنویسید...",
      "empty": "پیامی وجود ندارد"
    }
  }
}

Best Practices:

• Always update all language files together.
• Keep navbar and main sections consistent.
• Use descriptive and stable keys.

Contributing

Contributions are welcome and appreciated.

Git Commit Conventions

We use Conventional Commits:

• feat: New features
• fix: Bug fixes
• patch: Minor fixes
• style: Formatting or styling changes
• refactor: Code restructuring
• cleanup: Remove unused code
• perf: Performance improvements
• dependency: Dependency updates
• release: Release tagging
• build: Build or config changes
• chore: Maintenance tasks

To Contribute

1. Fork the repository.
2. Create your branch: git checkout -b feature/YourFeature
3. Commit your changes. Formatting and linting are handled automatically by Husky.
4. Push your branch: git push origin feature/YourFeature
5. Open a pull request.

Pre-commit Hooks

This project uses Husky to automatically run formatting and linting on each commit. Manual formatting or linting is not required.

License

Distributed under the MIT License. See LICENSE for more information.

---

If you want, I can also:

• tighten language further (more technical, less marketing),
• adapt it for real-time (WebSocket) emphasis,
• or align it with a monorepo / backend README for Nakh.