Sect 💬

A modern, privacy-focused, real-time messaging web application built with React, Node.js, Express, TypeScript, MongoDB, and Socket.io.

---

🚀 Key Features

• ⚡ Real-Time Messaging: Instant bidirectional communication powered by Socket.io for low-latency messaging.
• 🔐 Secure Authentication: JWT-based session authentication with HTTP-only cookies and bcrypt-hashed passwords.
• 👥 Direct Conversations: 1-on-1 private chat rooms with automated conversation management, conversation list previews, and timestamp tracking.
• 🔍 Instant User Search: Debounced search to quickly discover registered users and start conversations.
• 🎨 Modern & Responsive UI: Clean interface built using Tailwind CSS, Radix UI components, Lucide icons, and responsive layouts.
• 📦 Reliable State Management: Client-side state managed with Zustand and session persistence.
• 🛡️ Full-Stack Type Safety: End-to-end type safety across both frontend and backend using TypeScript and schema validation with Zod.

---

🛠️ Tech Stack

Frontend

• Framework: React 19 + TypeScript + Vite
• Styling: Tailwind CSS & Radix UI primitives
• State Management: Zustand
• Data Fetching & Networking: Axios & TanStack React Query
• Form Handling: React Hook Form & Zod
• Real-Time Client: Socket.io Client
• Icons & Notifications: Lucide React & Sonner

Backend

• Runtime: Node.js (ES Modules)
• Framework: Express 5 with TypeScript
• Database & ODM: MongoDB with Mongoose
• WebSockets: Socket.io
• Security & Utilities: jsonwebtoken, cookie-parser, bcryptjs, cors, zod

---

📁 Project Structure

sect/
├── backend/                  # Express & Socket.io backend service
│   ├── src/
│   │   ├── config/           # Environment and app configuration (Zod parsed)
│   │   ├── controllers/      # Route controllers (Auth, Conversations, Messages)
│   │   ├── lib/              # Database connection (Mongoose) & Socket instance
│   │   ├── middlewares/      # Route protection & JWT verification
│   │   ├── models/           # Mongoose data models (User, Conversation, Message)
│   │   ├── routes/           # Express API endpoints
│   │   ├── utils/            # JWT token generation, async error handlers
│   │   ├── app.ts            # Express application setup
│   │   └── server.ts         # Server entrypoint and listener
│   ├── package.json
│   └── tsconfig.json
│
├── frontend/                 # React + Vite frontend client
│   ├── src/
│   │   ├── components/       # UI components (ChatArea, MessageArea, Sidebar, SearchModal)
│   │   ├── hooks/            # Custom hooks (e.g., useDebounce)
│   │   ├── lib/              # Axios instance, socket client, validation schemas
│   │   ├── pages/            # Page views (LandingPage, AuthPage, Chats, NotFound)
│   │   ├── store/            # Zustand state stores (useAuthStore, useChatStore)
│   │   ├── App.tsx           # Application routing and theme provider
│   │   └── main.tsx          # Client entrypoint
│   ├── package.json
│   └── vite.config.ts

---

⚙️ Getting Started

Prerequisites

• Node.js (v18 or higher recommended)
• MongoDB database instance (local or MongoDB Atlas)

---

1. Backend Setup

1. Navigate to the backend directory:

   cd backend

2. Install dependencies:

   npm install

3. Configure environment variables by creating a .env file in the backend/ directory:

   PORT=3000
   DB_URL=mongodb+srv://<username>:<password>@<cluster>.mongodb.net/sect
   NODE_ENV=DEVELOPMENT
   JWT_SECRET=your_jwt_secret_key

4. Start the backend development server:

   npm run dev

   The backend server will run on http://localhost:3000.

---

2. Frontend Setup

1. Navigate to the frontend directory:

   cd frontend

2. Install dependencies:

   npm install

3. Configure environment variables by creating a .env file in the frontend/ directory:

   VITE_API_BASE_URL="http://localhost:3000/api"

4. Start the Vite development server:

   npm run dev

   The frontend application will run locally (typically at http://localhost:5173).

---

📡 API Endpoints Overview

Authentication (/api/auth)

• POST /api/auth/signup - Register a new account
• POST /api/auth/login - Authenticate user & set JWT cookie
• POST /api/auth/logout - Clear authentication cookie
• GET /api/auth/check - Validate existing session token

Conversations & Messages (/api/conversations)

• GET /api/conversations - Retrieve all user conversations
• GET /api/conversations/search - Search users by username query
• GET /api/conversations/messages/:receiverId - Fetch message history with a user
• POST /api/conversations/send/:receiverId - Send a message to a user

---

📄 License

This project is licensed under the ISC License.