npm package: @nakmiers/connectify
Description: A React component library that connects passionate IT professionals through an animated water pool visualization
Latest version: 0.1.1

# 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

```bash
npm install connectify
# or
yarn add connectify
# or
pnpm add connectify
```

## 🚀 Quick Start

```tsx
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:

```typescript
{
  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:

```typescript
(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

```tsx
<Connectify
  info={{
    name: 'My Portfolio',
    websiteUrl: 'https://myportfolio.com',
    description: 'Software Engineer',
  }}
/>
```

### With Custom Styling

```tsx
<Connectify
  info={userInfo}
  className='my-custom-class'
  width={800}
  height={500}
/>
```

### With Click Handler

```tsx
<Connectify
  info={userInfo}
  onAvatarClick={user => {
    window.open(user.portfolioUrl || user.websiteUrl, '_blank')
  }}
/>
```

### Disable Auto-Refresh

```tsx
<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

```json
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

```json
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)

```json
Response:
{
  "success": true
}
```

## 🛠️ Development

### Building the Library

```bash
npm run build
```

### Development Mode

```bash
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