create-callie-app

🚀 Create full-stack apps with Callie-PHP backend + CallieSignal behavioral awareness + your favorite frontend framework

Quick Start

npx create-callie-app my-project

Or with a specific frontend:

npx create-callie-app my-project --frontend react
npx create-callie-app my-project --frontend vue
npx create-callie-app my-project --frontend vanilla

What's Included

📦 Project Structure

my-project/
├── backend/          # Callie-PHP API
│   ├── core/         # Callie framework core
│   ├── routes/       # API routes
│   ├── config/       # Configuration
│   └── index.php     # Entry point
│
├── frontend/         # Your chosen framework
│   ├── src/
│   │   ├── callieSignal.js  # Behavioral awareness library
│   │   ├── api.js           # API client
│   │   └── main.js          # Entry point
│   └── package.json
│
├── instruction/      # AI coding guide
│   └── guide.md      # For AI/vibe coding assistance
│
└── package.json      # Root scripts

🎯 CallieSignal - Behavioral Awareness

Every frontend template includes CallieSignal, a powerful behavioral tracking library:

import CallieSignal from './callieSignal.js';

// Initialize
CallieSignal.init({
    endpoint: '/api/callie/signal',
    debug: true,
    storageType: 'session'
});

// Enable auto-tracking (page views, clicks, inputs)
CallieSignal.enableAutoTracking();

// Define rules
CallieSignal.when('page_view', 3, 'returning_visitor');
CallieSignal.when('click', 10, 'high_engagement');

// Listen for signals
CallieSignal.on('high_engagement', (data) => {
    console.log('User is highly engaged!', data);
});

// Detection methods
CallieSignal.detectHesitation('user_hesitating', 5000);
CallieSignal.trackFormAbandonment('#signup-form');
CallieSignal.detectExitIntent();
CallieSignal.trackScrollDepth();
CallieSignal.detectRageClicks();

⚡ Callie-PHP Backend

Lightweight, powerful PHP API framework:

// routes/api.php
$app->get('/users', function() {
    return response()->json(db('users')->all());
});

$app->post('/users', function($request) {
    return response()->json(db('users')->insert($request->all()));
});

Frontend Options

| Framework | Command | |-----------|---------| | Vanilla JS | npx create-callie-app my-app --frontend vanilla | | React | npx create-callie-app my-app --frontend react | | Vue | npx create-callie-app my-app --frontend vue |

Development

After creating your project:

cd my-project
npm install
cd frontend && npm install
npm run dev

This starts:

• Backend: http://localhost:8000
• Frontend: http://localhost:5173

Features

• ✅ Zero Config - Works out of the box
• ✅ Full Stack - Backend + Frontend + Behavioral Tracking
• ✅ CallieSignal - Built-in behavioral awareness
• ✅ Modern Stack - Vite, ES Modules, Hot Reload
• ✅ AI Ready - Includes guide for AI coding assistance
• ✅ Lightweight - No heavy dependencies

Requirements

• Node.js >= 18.0.0
• PHP >= 8.0 (for backend)

Links

• Callie-PHP Documentation
• GitHub Repository
• Report Issues

License

MIT © Callie Team