Connectify 🌊

A beautiful React component library that connects passionate IT professionals through an animated water pool visualization. When developers install and use this library on their websites, they automatically connect to a global network of users who are also using Connectify.

✨ Features

• 🌊 Water Pool Animation: Beautiful animated visualization with floating avatar circles
• 🌐 Global Connectivity: Automatically connects to users worldwide using the library
• 🎨 Fully Customizable: Extensive props for customization
• ⚡ Lightweight: Optimized for performance
• 📱 Responsive: Works on all screen sizes
• 🎭 Smooth Animations: Fluid, water-like motion effects

📦 Installation

npm install connectify
# or
yarn add connectify
# or
pnpm add connectify

🚀 Quick Start

import React from 'react'
import { Connectify } from 'connectify'
import 'connectify/dist/index.css' // Import Tailwind styles

function App() {
  return (
    <Connectify
      info={{
        name: 'John Doe',
        websiteUrl: 'https://johndoe.dev',
        description: 'Full Stack Developer',
        avatar: 'https://johndoe.dev/avatar.jpg',
        portfolioUrl: 'https://johndoe.dev',
      }}
      apiUrl='https://api.connectify.dev'
      width='100%'
      height='400px'
      onAvatarClick={user => {
        console.log('Clicked user:', user)
      }}
    />
  )
}

Important: You must import the CSS file for Tailwind styles to work!

📚 Props

info (required)

Object describing the user/website:

{
  name: string;              // User's name or website name
  websiteUrl?: string;       // Website URL
  avatar?: string;           // Avatar URL or website favicon
  description?: string;      // Short description
  location?: string;         // User's location
  tags?: string[];          // Tags or skills
  portfolioUrl?: string;    // Portfolio URL
}

apiUrl (optional)

API endpoint URL for fetching global users. Default: "https://api.connectify.dev"

apiKey (optional)

API key for authentication (if your server requires it)

width (optional)

Component width. Default: "100%". Can be a string or number.

height (optional)

Component height. Default: "400px". Can be a string or number.

maxAvatars (optional)

Maximum number of avatars to display. Default: 20

animationSpeed (optional)

Animation speed multiplier. Default: 1 (1 = normal, 2 = double speed, 0.5 = half speed)

clickable (optional)

Enable click interaction on avatars. Default: true

onAvatarClick (optional)

Callback function when an avatar is clicked:

(user: UserInfo) => void

className (optional)

Custom CSS class name for styling

autoRefresh (optional)

Enable auto-refresh of user list. Default: true

refreshInterval (optional)

Refresh interval in milliseconds. Default: 30000 (30 seconds)

showLoading (optional)

Show loading state. Default: true

loadingComponent (optional)

Custom loading component to display while fetching data

🎨 Examples

Basic Usage

<Connectify
  info={{
    name: 'My Portfolio',
    websiteUrl: 'https://myportfolio.com',
    description: 'Software Engineer',
  }}
/>

With Custom Styling

<Connectify
  info={userInfo}
  className='my-custom-class'
  width={800}
  height={500}
/>

With Click Handler

<Connectify
  info={userInfo}
  onAvatarClick={user => {
    window.open(user.portfolioUrl || user.websiteUrl, '_blank')
  }}
/>

Disable Auto-Refresh

<Connectify info={userInfo} autoRefresh={false} />

🔌 API Integration

The library automatically handles:

• User registration when the component mounts
• Fetching global users from the API
• Periodic heartbeat updates to show user is active
• Auto-refresh of the user list

Expected API Endpoints

Your server should implement these endpoints:

POST /users/register

Register a new user/website

Request Body:
{
  "name": "John Doe",
  "websiteUrl": "https://johndoe.dev",
  "avatar": "https://...",
  "description": "...",
  ...
}

Response:
{
  "success": true,
  "userId": "unique-user-id"
}

GET /users

Get global users list

Query Parameters:
- limit: number (optional)

Response:
{
  "users": [
    {
      "id": "user-id",
      "name": "John Doe",
      "avatar": "https://...",
      "websiteUrl": "https://...",
      ...
    }
  ]
}

POST /users/:userId/heartbeat

Update user heartbeat (optional)

Response:
{
  "success": true
}

🛠️ Development

Building the Library

npm run build

Development Mode

npm run dev

📝 License

MIT

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

💡 Vision

Connectify aims to connect passionate IT professionals around the world, creating a visual network that shows the global community of developers, designers, and tech enthusiasts who share a love for technology.

Made with ❤️ for the IT community