Flowfull Clients

Appearance

What are Flowfull Clients? ​

Flowfull Clients are frontend libraries that make it incredibly easy to connect your web or mobile app to a Flowfull backend. Think of them as the bridge between your user interface and your custom API - they handle all the complex HTTP requests, session management, and data fetching so you can focus on building great features.

Understanding the Pubflow Ecosystem ​

To understand Flowfull Clients, let's first understand where they fit in the Pubflow ecosystem:

1. Flowless - Authentication Service ​

A managed authentication backend service at pubflow.com. It handles:

  • User registration and login
  • Session management
  • Social authentication (Google, Facebook, etc.)
  • Token-based authentication
  • Email/SMS verification
  • Password recovery

You don't deploy Flowless - it's a managed service maintained by Pubflow.

2. Flowfull - Your Backend ​

Your custom backend built with the Flowfull framework. It contains:

  • Your business logic (products, orders, users, etc.)
  • Custom API endpoints
  • Database models
  • Background jobs
  • File uploads

You deploy Flowfull - it's your application backend.

3. Flowfull Clients - Frontend Libraries (This Documentation) ​

The client libraries that make it easy to connect your frontend to both Flowless and Flowfull backends.

Currently Available:

  • @pubflow/flowfull-client - Universal HTTP client that works everywhere (React, React Native, Next.js, Node.js, Bun)

Future Plans:

  • @pubflow/react - React-specific hooks and components
  • @pubflow/react-native - React Native-specific integration
  • @pubflow/nextjs - Next.js-specific integration with SSR support

Build Your Own or Request One

We're planning to release framework-specific packages with built-in hooks and components. For now, @pubflow/flowfull-client is the default universal client. You can also build your own client or request a new one!

Why Use Flowfull Clients? ​

🚀 Simple and Straightforward ​

No complex setup or boilerplate. Just create a client and start making requests:

typescript
import { createFlowfull } from '@pubflow/flowfull-client';

const api = createFlowfull('https://api.example.com');
const users = await api.get('/users');

🔐 Automatic Session Management ​

Sessions are automatically stored and sent with every request. No need to manually handle tokens:

typescript
// Login (session is automatically stored)
await api.post('/auth/login', { email, password });

// All future requests automatically include the session
const profile = await api.get('/profile'); // Session sent automatically!

📱 Works Everywhere ​

One library that works across all platforms:

  • ✅ React (Vite, Create React App, etc.)
  • ✅ React Native (Expo, bare React Native)
  • ✅ Next.js (App Router, Pages Router, Server Components)
  • ✅ Node.js/Bun (Server-side usage)
  • ✅ Any JavaScript environment

🎯 Type-Safe ​

Full TypeScript support with type inference:

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

const users = await api.get<User[]>('/users');
// users is typed as User[]

⚡ Powerful Query Builder ​

Build complex queries with an intuitive API:

typescript
const users = await api.query('/users')
  .filter('status', 'active')
  .filter('role', 'admin')
  .orderBy('created_at', 'desc')
  .limit(10)
  .execute();

🛠️ Developer-Friendly ​

  • Simple, intuitive API
  • Comprehensive documentation
  • Helpful error messages
  • Easy to debug

How It Works ​

1. Install the Package ​

bash
npm install @pubflow/flowfull-client

2. Create Your API Client ​

typescript
import { createFlowfull } from '@pubflow/flowfull-client';

export const api = createFlowfull('https://api.example.com');

3. Make Requests ​

typescript
// GET request
const users = await api.get('/users');

// POST request
const newUser = await api.post('/users', {
  name: 'John Doe',
  email: 'john@example.com'
});

// PUT request
const updated = await api.put('/users/123', { name: 'Jane Doe' });

// DELETE request
await api.delete('/users/123');

4. Use the Query Builder ​

typescript
const activeAdmins = await api.query('/users')
  .filter('status', 'active')
  .filter('role', 'admin')
  .orderBy('name', 'asc')
  .limit(20)
  .execute();

Platform-Specific Storage ​

Flowfull Client automatically detects your platform and uses the appropriate storage:

PlatformStorage Used
BrowserlocalStorage
React NativeAsyncStorage
Next.js ServerManual session management
CustomBring your own storage adapter

Quick Example ​

Here's a complete example of using Flowfull Client in a React app:

typescript
import { createFlowfull } from '@pubflow/flowfull-client';
import { useState, useEffect } from 'react';

// Create API client
const api = createFlowfull('https://api.example.com');

function UserList() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    async function fetchUsers() {
      try {
        const data = await api.get('/users');
        setUsers(data);
      } catch (error) {
        console.error('Error:', error);
      } finally {
        setLoading(false);
      }
    }

    fetchUsers();
  }, []);

  if (loading) return <div>Loading...</div>;

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

Next Steps ​

Ready to get started?

Check out the Getting Started guide to install and start using Flowfull Client in your project.

Quick Links:

Need Help? ​