Build Your Own Creator CRM
In this tutorial, we'll build a full-featured creator management CRM using The Only API, React, and Next.js. By the end, you'll have a dashboard that manages multiple OnlyFans accounts from one interface.
Prerequisites
- Node.js 18+
- A The Only API account with Starter plan
- Basic React/Next.js knowledge
Project Setup
bash
npx create-next-app@latest creator-crm --typescript --tailwind
cd creator-crm
npm install @heroui/react framer-motionAPI Client Setup
Create a type-safe API client:
typescript
// lib/api-client.ts
const API_BASE = 'https://api.xcelerator.dev/v1';
export async function apiRequest(endpoint: string, options?: RequestInit) {
const response = await fetch(`${API_BASE}${endpoint}`, {
...options,
headers: {
'Authorization': `Bearer ${process.env.API_KEY}`,
'Content-Type': 'application/json',
...options?.headers,
},
});
if (!response.ok) {
throw new Error(`API Error: ${response.status}`);
}
return response.json();
}Dashboard Layout
Build a sidebar layout with account switching:
tsx
export default function DashboardLayout({ children }) {
const [selectedAccount, setSelectedAccount] = useState(null);
const { data: accounts } = useAccounts();
return (
<div className="flex h-screen">
<Sidebar accounts={accounts} onSelect={setSelectedAccount} />
<main className="flex-1 overflow-auto p-6">
{children}
</main>
</div>
);
}Key Features to Implement
- 1.Account overview — Display earnings, subscriber count, and recent activity
- 2.Message center — Unified inbox across all accounts with quick reply
- 3.Content calendar — Visual schedule for upcoming posts
- 4.Analytics — Charts for earnings, growth, and engagement trends
- 5.Automation rules — Set up auto-replies and scheduled messages
Webhook Integration
Set up webhooks for real-time updates in your CRM:
typescript
// app/api/webhooks/route.ts
export async function POST(request: Request) {
const event = await request.json();
switch (event.type) {
case 'message.received':
await handleNewMessage(event.data);
break;
case 'subscription.created':
await handleNewSubscriber(event.data);
break;
}
return Response.json({ received: true });
}Deployment
Deploy to Vercel for the best Next.js experience. Set your API key as an environment variable and configure webhook URLs to point to your production domain.
The full source code for this tutorial is available on our GitHub.
