Flowfull Clients

Appearance

Starter Kits ​

Get started quickly with our official starter kits. These are production-ready templates that include authentication, routing, and best practices for building applications with Pubflow.

🚀 Available Starter Kits ​

TanStack Start (React) ​

A complete React application using TanStack Start with Pubflow integration.

Repository: github.com/pubflow/flowfull-client

Features:

  • ✅ Complete authentication system (login, registration, password reset)
  • ✅ TanStack Router with file-based routing
  • ✅ Protected routes with automatic redirects
  • ✅ Professional UI with Tailwind CSS + shadcn/ui
  • ✅ Dynamic theming and branding
  • ✅ Offline support with network detection
  • ✅ Advanced components (BridgeList, AdvancedFilter)
  • ✅ Debug tools for development
  • ✅ TypeScript support
  • ✅ i18n internationalization ready

Tech Stack:

  • React 19
  • TanStack Start + Router
  • @pubflow/react
  • Tailwind CSS 4
  • shadcn/ui components
  • Vite

Quick Start:

bash
# Clone the repository
git clone https://github.com/pubflow/flowfull-client.git
cd flowfull-client

# Install dependencies
npm install

# Configure environment
cp .env.example .env.local
# Edit .env.local with your Flowfull backend URL

# Start development server
npm run dev

Environment Variables:

env
# API Configuration
VITE_API_BASE_URL=http://localhost:8787
VITE_BRIDGE_BASE_PATH=/bridge
VITE_AUTH_BASE_PATH=/auth

# Branding Configuration
VITE_APP_NAME=Your App Name
VITE_APP_LOGO=https://your-domain.com/logo.png
VITE_PRIMARY_COLOR=#006aff
VITE_SECONDARY_COLOR=#4a90e2

Compatible with:

  • TanStack Start
  • Remix
  • Vite + React
  • Any React-based framework

React Native Expo ​

A complete React Native application using Expo with Pubflow integration.

Repository: github.com/pubflow/create-pubflow-rn

Features:

  • ✅ Complete authentication system (login, registration, password recovery)
  • ✅ Expo Router with file-based routing
  • ✅ Protected routes with automatic redirects
  • ✅ Professional UI with native components
  • ✅ Offline support with network detection
  • ✅ Secure storage with Expo SecureStore
  • ✅ Image upload with Expo ImagePicker
  • ✅ User profile management
  • ✅ Bridge components (BridgeView, BridgeList, BridgeForm)
  • ✅ Debug utilities for development
  • ✅ TypeScript support
  • ✅ Cross-platform (iOS, Android, Web)

Tech Stack:

  • React Native 0.79
  • Expo SDK 53
  • @pubflow/react-native
  • Expo Router
  • Expo SecureStore
  • React Hook Form + Zod

Quick Start:

bash
# Clone the repository
git clone https://github.com/pubflow/create-pubflow-rn.git
cd create-pubflow-rn

# Install dependencies
npm install

# Configure environment
# Create .env file with your configuration

# Start development server
npx expo start

Environment Variables:

env
EXPO_PUBLIC_BRIDGE_URL=http://localhost:8787
EXPO_PUBLIC_LOG_MODE=development

Compatible with:

  • Expo (recommended)
  • Bare React Native

🎯 Choosing a Starter Kit ​

Use TanStack Start if you need: ​

  • Web application
  • SEO and server-side rendering
  • Desktop-first experience
  • Complex routing and data loading
  • Integration with existing React ecosystem

Use React Native Expo if you need: ​

  • Mobile application (iOS/Android)
  • Native device features (camera, storage, notifications)
  • Cross-platform mobile app
  • App store distribution
  • Mobile-first experience

📦 What's Included ​

All starter kits include:

Authentication ​

  • Login with email/password
  • Account registration
  • Password recovery
  • Session management
  • Automatic token refresh
  • Protected routes

UI Components ​

  • Professional, production-ready design
  • Responsive layouts
  • Form validation with Zod
  • Loading states and error handling
  • Offline indicators
  • User profile components

Developer Experience ​

  • TypeScript for type safety
  • Hot reload for fast development
  • Debug utilities
  • Environment-based configuration
  • Code organization best practices

Pubflow Integration ​

  • Pre-configured @pubflow packages
  • Bridge API integration
  • Authentication flow
  • Session storage
  • API client setup

🛠️ Customization ​

All starter kits are designed to be customized:

  1. Branding: Update colors, logos, and app name via environment variables
  2. Routes: Add new routes using file-based routing
  3. Components: Extend or replace UI components
  4. API: Add custom API endpoints and business logic
  5. Styling: Customize themes and styles

🤝 Community Starter Kits ​

Want to create a starter kit for another framework? We welcome community contributions!

See Build Your Own Client for guidance on creating Pubflow integrations for other frameworks.

📚 Next Steps ​

After setting up your starter kit:

  1. Configure your Flowfull backend - See Flowfull Documentation
  2. Customize the UI - Update branding and styling
  3. Add your features - Build your application logic
  4. Deploy - Deploy to production

Need help? Contact us at support@pubflow.com