Bindra Examples

Comprehensive real-world examples demonstrating Bindra's features and integration patterns.

💡 Tip: All examples are TypeScript-based and production-ready. You can copy and adapt them for your projects.

---

📋 Table of Contents

• Quick Start
• Basic Examples
• Framework Integrations
• Advanced Examples
• Features Matrix
• Running Examples

---

🚀 Quick Start

Run an Example Locally

# Clone the repository
git clone https://github.com/mohamad-j/Bindra.git
cd Bindra

# Navigate to an example
cd examples/01-basic-crud

# Install dependencies (if needed)
pnpm install

# Run the example
npx ts-node index.ts

Use Bindra in Your Project

# Install Bindra
npm install bindra
# or
pnpm add bindra

import { DataSource } from 'bindra';

interface User {
  id: number;
  name: string;
  email: string;
}

const users = new DataSource<User>({
  url: 'https://api.example.com/users'
});

// Fetch and use
await users.fetch();
console.log(users.data);

---

📚 Basic Examples

1. Basic CRUD Operations

Location: examples/01-basic-crud

Learn the fundamentals of Create, Read, Update, and Delete operations.

What You'll Learn:

• Creating a DataSource
• Fetching data from APIs
• Creating new records
• Updating existing records
• Deleting records
• Navigation (next, prev, goto)

Features Used:

• ✅ CRUD operations
• ✅ Navigation
• ✅ Event listeners
• ✅ TypeScript types

Code Preview:

const users = new DataSource<User>({
  url: 'https://api.example.com/users'
});

// Fetch all users
await users.fetch();

// Create a user
const newUser = await users.create({
  name: 'Alice',
  email: 'alice@example.com'
});

// Update
await users.update(newUser.id, { name: 'Alice Smith' });

// Delete
await users.delete(newUser.id);

---

2. Real-time Collaboration

Location: examples/02-real-time-collaboration

Build a collaborative editing system with WebSocket support.

What You'll Learn:

• WebSocket integration
• Real-time data synchronization
• Auto-reconnection
• Handling connection states
• Broadcasting updates

Features Used:

• ✅ CRUD operations
• ✅ WebSocket/Real-time
• ✅ Caching
• ✅ Security (XSS, CSRF)
• ✅ Event system

Code Preview:

const documents = new DataSource<Document>({
  url: '/api/documents',
  realtime: {
    enabled: true,
    url: 'wss://api.example.com/ws',
    events: ['document.updated', 'document.created']
  },
  cache: {
    enabled: true,
    ttl: 60000
  }
});

// Automatically receives real-time updates
documents.on('realtime:message', (update) => {
  console.log('Document updated:', update);
});

---

3. Pagination & Infinite Scroll

Location: examples/03-pagination-infinite-scroll

Implement various pagination strategies including infinite scroll.

What You'll Learn:

• Offset-based pagination
• Cursor-based pagination
• Infinite scroll implementation
• Load more functionality
• Page navigation

Features Used:

• ✅ CRUD operations
• ✅ Pagination (offset & cursor)
• ✅ Caching
• ✅ Query API

Code Preview:

const products = new DataSource<Product>({
  url: '/api/products',
  pagination: {
    enabled: true,
    pageSize: 20,
    strategy: 'offset'
  },
  cache: {
    enabled: true,
    ttl: 300000
  }
});

// Load first page
await products.fetch();

// Load more (infinite scroll)
await products.fetchMore();

// Check state
console.log(`Page ${products.currentPage} - Has more: ${products.hasMore}`);

---

🎨 Framework Integrations

4. React Integration

Location: examples/frameworks/react-example

Complete React integration with custom hooks and components.

What You'll Learn:

• Creating React hooks for Bindra
• Component integration
• State management with Bindra
• Form handling with validation
• Real-time updates in React

Features Used:

• ✅ All CRUD operations
• ✅ WebSocket integration
• ✅ Pagination
• ✅ Validation
• ✅ Caching

Code Preview:

// Custom hook
function useDataSource<T>(config: DataSourceConfig<T>) {
  const [data, setData] = useState<T[]>([]);
  const [loading, setLoading] = useState(false);
  
  useEffect(() => {
    const ds = new DataSource<T>(config);
    
    const unsubData = ds.data$.subscribe(setData);
    const unsubLoading = ds.loading$.subscribe(setLoading);
    
    ds.fetch();
    
    return () => {
      unsubData();
      unsubLoading();
    };
  }, []);
  
  return { data, loading };
}

// Usage in component
function UserList() {
  const { data, loading } = useDataSource<User>({
    url: '/api/users'
  });
  
  return loading ? <Spinner /> : <List items={data} />;
}

---

5. Vue Integration

Location: examples/frameworks/vue-example

Vue 3 Composition API integration with composables.

What You'll Learn:

• Creating Vue composables
• Reactive data binding
• Component integration
• Form validation with Vue

Features Used:

• ✅ CRUD operations
• ✅ Pagination
• ✅ Validation
• ✅ Real-time updates

Code Preview:

<script setup lang="ts">
import { useDataSource } from './composables';

const { data, loading, create, update, remove } = useDataSource<User>({
  url: '/api/users'
});
</script>

<template>
  <div v-if="loading">Loading...</div>
  <ul v-else>
    <li v-for="user in data" :key="user.id">
      {{ user.name }}
    </li>
  </ul>
</template>

---

🔥 Advanced Examples

Future Examples (Coming Soon)

The following advanced examples are planned:

6. Caching Strategies

• TTL-based caching
• Manual cache invalidation
• Stale-while-revalidate pattern
• Cache warming strategies

7. Form Validation

• Field-level validation
• Custom validators
• Async validation
• Error handling and display
• Form submission with validation

8. Batch Operations

• Bulk create operations
• Bulk update operations
• Bulk delete operations
• Transaction-like behavior
• Error handling for batch ops

9. Optimistic Updates

• Instant UI feedback
• Automatic rollback on error
• Conflict resolution
• Retry strategies

---

📊 Features Matrix

Compare features across all examples:

Example	CRUD	Real-time	Pagination	Validation	Caching	Batch	Security
Basic CRUD	✅	-	-	-	-	-	-
Real-time Collab	✅	✅	-	-	✅	-	✅
Pagination	✅	-	✅	-	✅	-	-
React Integration	✅	✅	✅	✅	✅	-	-
Vue Integration	✅	-	✅	✅	-	-	-
Caching	✅	-	-	-	✅	-	-
Validation	✅	-	-	✅	-	-	✅
Batch Ops	✅	-	-	-	-	✅	-
Optimistic	✅	-	-	-	-	-	-

Legend:

• ✅ Covered extensively
• ➖ Not applicable

---

🏃 Running Examples

Prerequisites

# Node.js 16+ required
node --version

# Install pnpm (if not already installed)
npm install -g pnpm

Run Specific Example

# Basic CRUD
cd examples/01-basic-crud
npx ts-node index.ts

# Real-time Collaboration
cd examples/02-real-time-collaboration
npx ts-node index.ts

# Pagination
cd examples/03-pagination-infinite-scroll
npx ts-node index.ts

Run React Example

cd examples/frameworks/react-example

# Install dependencies
pnpm install

# Start dev server
pnpm dev

Run Vue Example

cd examples/frameworks/vue-example

# Install dependencies
pnpm install

# Start dev server
pnpm dev

---

📖 Learn More

Documentation

• Getting Started - Begin with Bindra
• API Reference - Complete API documentation
• DataSource API - Detailed DataSource reference
• Migration Guide - Upgrade from v1.x

Additional Resources

• GitHub Repository - Source code
• npm Package - Install Bindra
• Issues - Report bugs
• Discussions - Ask questions

---

🤝 Contributing Examples

Want to contribute an example? We'd love your help!

1. Fork the repository
2. Create an example in examples/
3. Add documentation (README.md)
4. Update this file with your example
5. Submit a pull request

See Contributing Guide for details.

---

💡 Example Ideas

Have an idea for an example? Open a discussion or issue!

Potential examples:

• Authentication & authorization
• File upload with progress
• Complex forms with nested validation
• Shopping cart with optimistic updates
• Chat application with typing indicators
• Dashboard with real-time analytics
• Search with debounce and caching
• Offline-first with sync

---

Happy coding with Bindra! 🚀