https://github.com/aayush259/square

Square is a real-time chat application built using modern web technologies. It allows users to connect, chat, and manage profiles with seamless updates and an intuitive user interface.
https://github.com/aayush259/square

chat-application nextjs typescript

Last synced: 2 months ago
JSON representation

Square is a real-time chat application built using modern web technologies. It allows users to connect, chat, and manage profiles with seamless updates and an intuitive user interface.

• Host: GitHub
• URL: https://github.com/aayush259/square
• Owner: Aayush259
• Created: 2024-11-16T17:11:46.000Z (6 months ago)
• Default Branch: main
• Last Pushed: 2025-02-01T18:24:05.000Z (3 months ago)
• Last Synced: 2025-02-01T19:26:48.710Z (3 months ago)
• Topics: chat-application, nextjs, typescript
• Language: TypeScript
• Homepage: https://square-vl8y.onrender.com
• Size: 1.49 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 💬 Square - A Real-Time Chat Application

Square is a real-time chat application built using modern web technologies. It allows users to connect, chat, and manage profiles with seamless updates and an intuitive user interface.

## 🌟 Features

1. **User Management:**

   - **Signup:** Create an account with a name, email, and password. Email is unique for every user.

   - **Login:** Authenticate users securely using JWT.

   - User passwords are securely hashed using *bcrypt*.

   - **Profile Management:**

        - View profile with name, email, optional profile picture, bio, connections list, and joining date.

        - Update and Edit profile picture using Cloudinary for storage by clicking on profile picture.

        - Update bio by clicking on the *"Edit" (Pencil)* button.

        - Real-time profile updates reflected across all connections.

    - **Connections:**

        - Add new connections using their *unique email address*.

        - Display connections with profile picture, name, and last message with timestamp in sidebar.

        - Highlight unread messages with bold text and notification dots in sidebar.

        - Show real-time online status of connections in the chat window.

    - **Chat Features:**

        - **Messaging:**

            - Real-time send and receive messages using sockets.

            - Fetch chat history dynamically via the API with pagination. Messages are loaded 20 at a time as the user scrolls up.

            - Group messages by date with labels ("Today," "Yesterday," or specific dates).

            - Display read receipts (single white tick for sent, double blue tick for read).

            - Include timestamps for each message.

        - **Emojis:** Send emojis along with text messages using an emoji panel.

        - **Long-Press Actions:**

            - Soft delete messages (IDs stored in DB and filtered during fetch).

            -  Copy selected messages to the clipboard.

            - **Forward Messages:**

                - Forward messages to other connections via a popup interface.

                - Search and select connections to forward messages.

        - **Link Formatting:** Automatically detect and format links, emails, and phone numbers in messages. These are displayed as clickable links that open in a new tab.

    - **Notifications:** Notify users of new messages from other connections.

    - **Sidebar:**

        - Display user's name, optional profile picture, and a greeting based on the time of day with random emoji.

        - Sticky *Add Connection* button for quick connection management.

        - Connection list with live updates.

    - **Real-Time Features:**

        - Socket-based updates for: New messages, Profile changes, online status, sidebar updates.

## API Endpoints

- **Authentication Routes:**

    - `/auth/signup`: Register a new user.

    - `/auth/login`: Authenticate and generate a JWT.

    - `/auth/getUser`: Validate login and fetch user info.

- **Profile Management:**

    - `/auth/getProfileInfo`: Retrives user profile details.

    - `/auth/addConnection`: Add a new connection.

- **Messages:**

    - `/messages/getMessages`: Fetch chat history for a specific connection. Supports pagination with page and limit parameters. By default, returns 20 messages per request, dynamically loaded as the user scrolls up in the chat window.

    - `/messages/getLastMessages`: Fetch last messages for each connection.

    - `/messages/getUnreadMessages`: Retrieve unread messages.

- **Sockets:**

    - `/socket/connect`: Handle all real-time updates and interactions.

## 🚀 Usage

- Create an account or log in.

- Use the "Add Connection" button in the sidebar and add your friend using its email.

- Select a connection from the sidebar to open the chat window.

## 🛠️ Tech Stack

- Framework: Next JS with TypeScript

- Frontend: Tailwind CSS, React Icons, Redux Toolkit, Socket.io-client, uuid

- Backend: MongoDB, Socket.io, bcrypt, JWT, Cloudinary

## 📬 Feedback and Suggestions

Your feedback is valuable! If you have any suggestions, ideas, or improvements for this project, please feel free to open an issue or submit a pull request. Your contributions are welcomed and appreciated 🚀.