TODO:

• Need to add implementation for the message hashing funtion
• Add the deploy version in the release

LinkUp: Real-time Chat Application

Welcome to LinkUp, a modern, full-stack real-time chat application designed for seamless communication. This project demonstrates a robust architecture featuring a Node.js/Express backend, a React frontend, MongoDB for data persistence, and Socket.IO for instant messaging. Connect with friends, send messages, and share media in a secure and intuitive environment. 💬🚀

✨ Features

• User Authentication: Secure user registration, login, and logout functionalities with JWT and cookie-based authentication.
• Real-time Messaging: Instant message delivery and reception powered by Socket.IO for a fluid chat experience.
• Private Conversations: Engage in one-on-one chats with other registered users.
• Media Sharing: Send and receive images within chats, leveraging Cloudinary for efficient media storage.
• User Profiles: Update and view user profiles, including profile picture customization.
• User Presence: See which users are currently online for improved connectivity awareness.
• Dynamic Theme Switching: Personalize your chat interface with a variety of themes powered by DaisyUI.
• Responsive Design: A sleek and intuitive user interface built with React, Tailwind CSS, and DaisyUI, optimized for various screen sizes.

🛠️ Technologies Used

Category	Technology	Description
Backend		JavaScript runtime for server-side logic
		Web application framework for Node.js APIs
		NoSQL database for flexible data storage
		MongoDB object modeling for Node.js
		Enables real-time, bidirectional communication
		Securely transmit information between parties as a JSON object
		Library for hashing passwords
		Cloud-based media management platform
Frontend		JavaScript library for building user interfaces
		Next-generation frontend tooling
		Small, fast, and scalable state-management solution
		Utility-first CSS framework for rapid UI development
		Tailwind CSS component library for beautiful UIs
		Declarative routing for React
		Promise-based HTTP client for the browser and Node.js
		Declarative and accessible toast notifications for React

⚙️ Getting Started

Follow these steps to set up and run LinkUp on your local machine.

Installation

1. Clone the Repository:

   git clone https://github.com/L-10-rush/LinkUp.git
   cd LinkUp

2. Install Backend Dependencies: Navigate into the backend directory and install the necessary packages.

   cd backend
   npm install

3. Install Frontend Dependencies: Navigate into the frontend directory and install the necessary packages.

   cd ../frontend
   npm install

Environment Variables

Before running the application, you need to set up environment variables for both the backend. Create a .env file in the backend directory with the following variables:

PORT=5001
MONGO_URI=your_mongodb_connection_string
JWT_SECRET=a_strong_jwt_secret_key
CLOUDINARY_CLOUD_NAME=your_cloudinary_cloud_name
CLOUDINARY_API_KEY=your_cloudinary_api_key
CLOUDINARY_API_SECRET=your_cloudinary_api_secret

• PORT: The port on which the backend server will run (e.g., 5001).
• MONGO_URI: Your MongoDB connection string. You can get one from MongoDB Atlas or by running a local MongoDB instance.
• JWT_SECRET: A secret key for signing JWTs. Generate a strong, random string for this.
• CLOUDINARY_CLOUD_NAME, CLOUDINARY_API_KEY, CLOUDINARY_API_SECRET: Credentials for your Cloudinary account, used for image storage.

🚀 Usage

To start both the frontend and backend servers:

1. From the root directory of the project, execute the following command:

   npm start

   This command will concurrently start the backend server and the frontend development server.

2. Access the Application: Open your web browser and navigate to http://localhost:5173 (or the port specified by your frontend Vite server).

3. Register/Login:

   • If you're a new user, navigate to the Sign Up page to create an account. Provide your full name, email, and password.
   • If you already have an account, proceed to the Sign In page and enter your credentials.

4. Start Chatting:

   • After logging in, you'll be redirected to the Home page. The sidebar will display a list of other registered users.
   • Select a user from the sidebar to start a new conversation.
   • Type your message in the input field and press Enter or click the send button. You can also attach images to your messages.

5. Update Profile:

   • Go to the Profile page to view your profile information.
   • Click the camera icon on your profile picture to upload a new one.

6. Change Theme:

   • Visit the Settings page to customize the application's theme. Select from a variety of themes to personalize your chat experience.

Backend API

This section provides a detailed breakdown of the LinkUp backend API, following the Dokugen documentation standard for clarity and precision.

Base URL

http://localhost:5001/api

Endpoints

POST /api/auth/signup

Overview: Registers a new user account. Request:

{
  "fullName": "Jane Doe",
  "email": "jane.doe@example.com",
  "password": "StrongPassword123"
}

Response:

{
  "_id": "65f0a0c4d8e9f0a1b2c3d4e5",
  "fullName": "Jane Doe",
  "email": "jane.doe@example.com",
  "profilePic": ""
}

Errors:

• 400 Bad Request: "All fields are required", "Password must be at least 6 characters", "Email already exits", "Invalid user data"
• 500 Internal Server Error: Server-side error during signup process

POST /api/auth/login

Overview: Authenticates a user and issues a JWT token. Request:

{
  "email": "jane.doe@example.com",
  "password": "StrongPassword123"
}

Response:

{
  "_id": "65f0a0c4d8e9f0a1b2c3d4e5",
  "fullName": "Jane Doe",
  "email": "jane.doe@example.com",
  "profilePic": ""
}

Errors:

• 400 Bad Request: "Invalid credentials"
• 500 Internal Server Error: Server-side error during login process

POST /api/auth/logout

Overview: Logs out the authenticated user by clearing the JWT cookie. Request: (No request body) Response:

{
  "message": "Logged out successfully"
}

Errors:

• 500 Internal Server Error: Server-side error during logout process

PUT /api/auth/update-profile

Overview: Updates the authenticated user's profile picture. Requires authentication. Request:

{
  "profilePic": "data:image/jpeg;base64,/9j/4AAQSkZJ..."
}

Response:

{
  "_id": "65f0a0c4d8e9f0a1b2c3d4e5",
  "fullName": "Jane Doe",
  "email": "jane.doe@example.com",
  "profilePic": "https://res.cloudinary.com/your-cloud/image/upload/v1/profile_pic_url.jpg",
  "createdAt": "2024-03-12T10:00:00.000Z",
  "updatedAt": "2024-03-12T10:00:00.000Z",
  "__v": 0
}

Errors:

• 400 Bad Request: "Profile pic is required"
• 401 Unauthorized: "Unauthorized - No Token Provided", "Unauthorized - Invalid Token"
• 404 Not Found: "User not found"
• 500 Internal Server Error: Server-side error during profile update

GET /api/auth/check

Overview: Checks if a user is authenticated and returns their profile information. Requires authentication. Request: (No request body) Response:

{
  "_id": "65f0a0c4d8e9f0a1b2c3d4e5",
  "fullName": "Jane Doe",
  "email": "jane.doe@example.com",
  "profilePic": "https://res.cloudinary.com/your-cloud/image/upload/v1/profile_pic_url.jpg",
  "createdAt": "2024-03-12T10:00:00.000Z",
  "updatedAt": "2024-03-12T10:00:00.000Z",
  "__v": 0
}

Errors:

• 401 Unauthorized: "Unauthorized - No Token Provided", "Unauthorized - Invalid Token"
• 404 Not Found: "User not found"
• 500 Internal Server Error: Server-side error during authentication check

GET /api/messages/users

Overview: Retrieves a list of all users, excluding the authenticated user. Requires authentication. Request: (No request body) Response:

[
  {
    "_id": "65f0a0c4d8e9f0a1b2c3d4e5",
    "fullName": "John Doe",
    "email": "john.doe@example.com",
    "profilePic": "https://randomuser.me/api/portraits/men/1.jpg"
  },
  {
    "_id": "65f0a0c4d8e9f0a1b2c3d4e6",
    "fullName": "Alice Smith",
    "email": "alice.smith@example.com",
    "profilePic": "https://randomuser.me/api/portraits/women/2.jpg"
  }
]

Errors:

• 401 Unauthorized: "Unauthorized - No Token Provided", "Unauthorized - Invalid Token"
• 500 Internal Server Error: Server-side error during user retrieval

GET /api/messages/:id

Overview: Fetches all messages exchanged between the authenticated user and a specified user. Requires authentication. Request: (No request body, id is a path parameter representing the receiverId) Response:

[
  {
    "_id": "65f0a0c4d8e9f0a1b2c3d4e7",
    "senderId": "65f0a0c4d8e9f0a1b2c3d4e5",
    "receiverId": "65f0a0c4d8e9f0a1b2c3d4e6",
    "text": "Hello there!",
    "image": null,
    "createdAt": "2024-03-12T10:00:00.000Z",
    "updatedAt": "2024-03-12T10:00:00.000Z"
  },
  {
    "_id": "65f0a0c4d8e9f0a1b2c3d4e8",
    "senderId": "65f0a0c4d8e9f0a1b2c3d4e6",
    "receiverId": "65f0a0c4d8e9f0a1b2c3d4e5",
    "text": "Hi! How are you?",
    "image": "https://res.cloudinary.com/your-cloud/image/upload/v1/message_image.png",
    "createdAt": "2024-03-12T10:01:00.000Z",
    "updatedAt": "2024-03-12T10:01:00.000Z"
  }
]

Errors:

• 401 Unauthorized: "Unauthorized - No Token Provided", "Unauthorized - Invalid Token"
• 500 Internal Server Error: Server-side error during message retrieval

POST /api/messages/send/:id

Overview: Sends a new message to a specified user. Supports text and image messages. Requires authentication. Request:

{
  "text": "This is a test message.",
  "image": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII="
}

Response:

{
  "_id": "65f0a0c4d8e9f0a1b2c3d4e9",
  "senderId": "65f0a0c4d8e9f0a1b2c3d4e5",
  "receiverId": "65f0a0c4d8e9f0a1b2c3d4e6",
  "text": "This is a test message.",
  "image": "https://res.cloudinary.com/your-cloud/image/upload/v1/uploaded_message_image.png",
  "createdAt": "2024-03-12T10:02:00.000Z",
  "updatedAt": "2024-03-12T10:02:00.000Z"
}

Errors:

• 401 Unauthorized: "Unauthorized - No Token Provided", "Unauthorized - Invalid Token"
• 500 Internal Server Error: Server-side error during message sending

✒️ Author Info

• Your Name: [K1ngM0nk]
• Email: [mondalaniket2005@gmail.com]

🏅 Badges