12X App — Real-Time Chat Application

12X is a full-stack real-time chat application that supports multiple chat rooms, user accounts, and live messaging using Socket.IO. Users can register, log in, join rooms, and chat instantly with others.

---

🚀 Features

🔐 Authentication

• User registration
• Secure login (JWT or session-based)
• Protected routes
• Logout functionality

💬 Chat System

• Real-time messaging using Socket.IO
• Create and join chat rooms
• Each room has its own message history
• See users inside a room
• Typing indicator (optional)
• Message timestamps

🏠 Frontend Features

• Modern, responsive UI
• Sidebar showing all rooms
• Main chat area with message history
• Input box for sending messages
• Smooth scroll & auto-scroll
• Online user counter per room

⚙️ Backend Features

• Node.js / Express.js REST API
• Socket.IO WebSocket server
• MongoDB/MySQL for storing users, rooms, and messages
• API endpoints for rooms, messages, and authentication
• Clean MVC structure

---

🛠 Tech Stack

Frontend

• Next.js / React
• Tailwind CSS
• Axios (API requests)
• Socket.IO Client

Backend

• Node.js
• Express.js
• Socket.IO
• MongoDB or MySQL
• JWT Authentication

---

📂 Folder Structure

12x-app/
│
├── backend/
│   ├── src/
│   │   ├── controllers/
│   │   ├── models/
│   │   ├── routes/
│   │   ├── sockets/
│   │   └── config/
│   ├── server.js
│   ├── package.json
│   └── .env
│
└── frontend/
    ├── pages/
    ├── components/
    ├── styles/
    ├── public/
    ├── package.json
    └── next.config.js

---

⚙️ Installation & Setup

1. Clone the repository

git clone https://github.com/your-username/12x-app.git
cd 12x-app

---

🔧 Backend Setup

cd backend
npm install

Create a .env file:

PORT=5000
MONGO_URI=your_database_url
JWT_SECRET=your_secret_key

Start backend server:

npm start

---

🎨 Frontend Setup

cd frontend
npm install
npm run dev

App runs on:

http://localhost:3000

---

🔌 Real-Time Events (Socket.IO)

Client Emits

• joinRoom — join a room
• chatMessage — send message

Server Emits

• message — broadcast new message
• roomUsers — update user list
• notification — system messages

---

📸 Screenshots

---

🧩 Future Improvements

• Direct private messages
• Image/file sharing
• Voice messages
• Room admin controls
• User profiles
• Message reactions