Top 5 Headless Decoupled Web App Ideas Built on Laravel API Backends for Independent Web Developers and Indie Hackers
1. AI-Powered Content Generation & Curation Platform
This idea leverages Laravel’s robust API capabilities to serve as the backend for a headless application focused on AI-driven content creation and curation. The frontend could be a modern JavaScript framework (React, Vue, Svelte) or even a static site generator for SEO benefits. The core value proposition is automating content workflows for businesses and individuals.
Backend Architecture (Laravel API)
We’ll define API endpoints for user management, content generation requests, content storage, and retrieval. For AI integration, we’ll use external services like OpenAI’s API. Laravel’s Sanctum will handle API authentication for the headless frontend.
API Authentication with Sanctum
First, ensure Sanctum is installed and configured. For API-only applications, you’ll typically use token-based authentication.
composer require laravel/sanctum php artisan migrate
In config/sanctum.php, ensure api.only_vary is set to false if you’re not using session cookies for API requests.
Content Generation Endpoint
A controller to handle requests to an external AI service. We’ll use Guzzle for HTTP requests.
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Http;
use Illuminate\Support\Facades\Auth;
class ContentGeneratorController extends Controller
{
public function generate(Request $request)
{
$request->validate([
'prompt' => 'required|string',
'model' => 'nullable|string|in:text-davinci-003,gpt-3.5-turbo', // Example models
'max_tokens' => 'nullable|integer|min:50|max:2000',
]);
$user = Auth::user(); // Assuming token authentication is set up
try {
$response = Http::withHeaders([
'Authorization' => 'Bearer ' . env('OPENAI_API_KEY'),
'Content-Type' => 'application/json',
])->post('https://api.openai.com/v1/completions', [ // Or '/v1/chat/completions' for chat models
'model' => $request->input('model', 'text-davinci-003'),
'prompt' => $request->input('prompt'),
'max_tokens' => $request->input('max_tokens', 150),
'temperature' => 0.7, // Example parameter
]);
if ($response->successful()) {
$generatedContent = $response->json()['choices'][0]['text'] ?? 'Error generating content.';
// Optionally save to database
// $user->generatedContents()->create([...]);
return response()->json(['content' => trim($generatedContent)]);
} else {
return response()->json(['error' => 'Failed to generate content from AI service.', 'details' => $response->json()], $response->status());
}
} catch (\Exception $e) {
return response()->json(['error' => 'An unexpected error occurred.', 'details' => $e->getMessage()], 500);
}
}
}
</php>
Define the route in routes/api.php:
<?php
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\ContentGeneratorController;
Route::middleware('auth:sanctum')->post('/content/generate', [ContentGeneratorController::class, 'generate']);
</php>
Frontend Integration (Conceptual – JavaScript)
The frontend would make a POST request to the Laravel API endpoint, including the user’s API token in the Authorization header.
async function generateContent(prompt, model = 'text-davinci-003', maxTokens = 150) {
const token = localStorage.getItem('api_token'); // Or from secure storage
if (!token) {
throw new Error('Authentication token not found.');
}
try {
const response = await fetch('/api/content/generate', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${token}`,
'Accept': 'application/json',
},
body: JSON.stringify({ prompt, model, max_tokens: maxTokens }),
});
if (!response.ok) {
const errorData = await response.json();
throw new Error(`API Error: ${response.status} - ${errorData.message || JSON.stringify(errorData)}`);
}
const data = await response.json();
return data.content;
} catch (error) {
console.error('Error generating content:', error);
throw error; // Re-throw to be handled by caller
}
}
// Example usage in a React component:
// const [generatedText, setGeneratedText] = useState('');
// const handleGenerate = async () => {
// try {
// const text = await generateContent('Write a short blog post about headless CMS.');
// setGeneratedText(text);
// } catch (error) {
// // Handle error display
// }
// };
</javascript>
2. Real-time Collaborative Document Editor
This involves building a backend API with Laravel that supports real-time updates for a collaborative document editor. The frontend would be a rich text editor (like Quill, ProseMirror) communicating with the backend via WebSockets. Laravel Echo and Pusher (or a self-hosted alternative like Ably or Socket.IO) are key here.
Backend Setup (Laravel with Echo/WebSockets)
Install necessary packages:
composer require laravel/echo pusher npm install --save laravel-echo pusher-js # Or for Socket.IO # composer require laravel/echo laravel-websockets # npm install --save laravel-echo socket.io-client
Configure config/app.php to enable the App\Providers\BroadcastServiceProvider.
Set up your broadcasting driver in .env. For Pusher:
BROADCAST_DRIVER=pusher PUSHER_APP_ID=your_app_id PUSHER_APP_KEY=your_app_key PUSHER_APP_SECRET=your_app_secret PUSHER_APP_CLUSTER=your_app_cluster
Or for Laravel WebSockets (requires separate installation and configuration):
BROADCAST_DRIVER=laravel LARAVEL_WEBSOCKETS_HOST=127.0.0.1 LARAVEL_WEBSOCKETS_PORT=6001
Document Model and Events
Create a Document model and a corresponding Eloquent event to broadcast changes.
php artisan make:model Document -m php artisan make:event DocumentUpdated
In app/Models/Document.php:
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
use App\Events\DocumentUpdated;
class Document extends Model
{
use HasFactory;
protected $fillable = ['title', 'content'];
public function broadcastOn()
{
return new Channel('document.' . $this->id);
}
// Override the save method to dispatch the event
public function save(array $options = [])
{
$originalContent = $this->getOriginal('content');
$saved = parent::save($options);
if ($saved && $this->wasChanged('content') && $originalContent !== $this->content) {
DocumentUpdated::dispatch($this);
}
return $saved;
}
}
</php>
In app/Events/DocumentUpdated.php, implement the ShouldBroadcast interface and define the broadcast data.
<?php
namespace App\Events;
use App\Models\Document;
use Illuminate\Broadcasting\Channel;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
use Illuminate\Foundation\Events\Dispatchable;
class DocumentUpdated implements ShouldBroadcast
{
use Dispatchable, InteractsWithSockets, \Illuminate\Queue\SerializesModels;
public $document;
public function __construct(Document $document)
{
$this->document = $document;
}
public function broadcastOn()
{
return new Channel('document.' . $this->document->id);
}
public function broadcastWith()
{
return [
'document_id' => $this->document->id,
'content' => $this->document->content,
// Add other relevant fields like user ID who made the change
];
}
}
</php>
API Endpoint for Updates
An API endpoint to receive content updates from the frontend and trigger the broadcast.
<?php
namespace App\Http\Controllers;
use App\Models\Document;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth; // For user authentication if needed
class DocumentController extends Controller
{
public function update(Request $request, Document $document)
{
$request->validate([
'content' => 'required|string',
]);
// Optional: Check if authenticated user has permission to edit
// if (Auth::user()->cannot('update', $document)) {
// abort(403);
// }
$document->content = $request->input('content');
$document->save(); // This will trigger the DocumentUpdated event
return response()->json($document);
}
public function show(Document $document)
{
return response()->json($document);
}
}
</php>
Add routes to routes/api.php:
<?php
use App\Http\Controllers\DocumentController;
// Assuming authentication middleware is applied
Route::middleware('auth:sanctum')->put('/documents/{document}', [DocumentController::class, 'update']);
Route::middleware('auth:sanctum')->get('/documents/{document}', [DocumentController::class, 'show']);
</php>
Frontend Integration (Conceptual – JavaScript)
The frontend needs to connect to Echo, listen for events, and update the editor state. It also needs to send updates to the API.
import Echo from 'laravel-echo';
import Pusher from 'pusher-js'; // Or import io from 'socket.io-client';
// Initialize Echo
window.Pusher = Pusher;
window.Echo = new Echo({
broadcaster: 'pusher', // or 'socket.io'
key: 'your_app_key', // From .env
wsHost: window.location.hostname,
wsPort: 6001, // Default for Laravel WebSockets, or Pusher port
forceTLS: false, // Set to true if using WSS
// auth: { // For authenticated channels
// headers: {
// Authorization: `Bearer ${localStorage.getItem('api_token')}`
// }
// }
});
const documentId = 1; // Example document ID
// Listen for updates
window.Echo.channel(`document.${documentId}`)
.listen('DocumentUpdated', (e) => {
console.log('Document updated:', e);
// Update the editor content with e.content
// e.g., quillEditor.setContents(quillEditor.clipboard.convert(e.content));
});
// Function to send updates
async function saveDocumentContent(documentId, newContent) {
const token = localStorage.getItem('api_token');
if (!token) return;
try {
const response = await fetch(`/api/documents/${documentId}`, {
method: 'PUT',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${token}`,
'Accept': 'application/json',
},
body: JSON.stringify({ content: newContent }),
});
if (!response.ok) {
throw new Error('Failed to save document');
}
// Optionally handle response
} catch (error) {
console.error('Error saving document:', error);
}
}
// On editor change event:
// debounce(saveDocumentContent(documentId, editor.getContents()), 500); // Debounce to avoid excessive calls
</javascript>
3. Personalized E-commerce Recommendation Engine
A headless Laravel API can power a sophisticated recommendation engine. The API would expose endpoints for product catalog management, user interaction tracking (views, purchases, add-to-carts), and serving personalized recommendations. The frontend (e.g., a React storefront) consumes these recommendations.
Backend Data Models and Tracking
We need models for Products, Users, and User Interactions.
php artisan make:model Product -m php artisan make:model User -m # If not using default Auth User php artisan make:model UserInteraction -m
database/migrations/xxxx_xx_xx_xxxxxx_create_user_interactions_table.php:
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
return new class extends Migration
{
public function up(): void
{
Schema::create('user_interactions', function (Blueprint $table) {
$table->id();
$table->foreignId('user_id')->constrained()->onDelete('cascade');
$table->morphs('interactionable'); // For polymorphic relations (Product, etc.)
$table->string('type'); // e.g., 'view', 'add_to_cart', 'purchase', 'search'
$table->json('metadata')->nullable(); // e.g., search query, quantity
$table->timestamps();
});
}
public function down(): void
{
Schema::dropIfExists('user_interactions');
}
};
</php>
In app/Models/User.php, define the relationship:
<?php
namespace App\Models;
// ... other use statements
use Illuminate\Database\Eloquent\Relations\HasMany;
class User extends Authenticatable // or AuthenticatableContract
{
// ...
public function interactions(): HasMany
{
return $this->hasMany(UserInteraction::class);
}
}
</php>
API Endpoint for Tracking Interactions
An endpoint to receive interaction data from the frontend.
<?php
namespace App\Http\Controllers;
use App\Models\UserInteraction;
use App\Models\Product; // Example
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
class InteractionController extends Controller
{
public function track(Request $request)
{
$request->validate([
'interactionable_type' => 'required|string',
'interactionable_id' => 'required|integer',
'type' => 'required|string|in:view,add_to_cart,purchase,search',
'metadata' => 'nullable|array',
]);
$user = Auth::user();
if (!$user) {
// Handle anonymous users if necessary, perhaps with session IDs
return response()->json(['message' => 'User not authenticated'], 401);
}
// Ensure the interactionable_type is a valid model
$modelClass = 'App\\Models\\' . $request->input('interactionable_type');
if (!class_exists($modelClass) || !is_subclass_of($modelClass, \Illuminate\Database\Eloquent\Model::class)) {
return response()->json(['error' => 'Invalid interactionable type'], 422);
}
// Check if the interactionable item exists
if (!$modelClass::find($request->input('interactionable_id'))) {
return response()->json(['error' => 'Interactionable item not found'], 404);
}
$interaction = new UserInteraction();
$interaction->user_id = $user->id;
$interaction->type = $request->input('type');
$interaction->interactionable_type = $request->input('interactionable_type');
$interaction->interactionable_id = $request->input('interactionable_id');
$interaction->metadata = $request->input('metadata');
$interaction->save();
return response()->json(['message' => 'Interaction tracked successfully']);
}
}
</php>
Add route to routes/api.php:
<?php
use App\Http\Controllers\InteractionController;
Route::middleware('auth:sanctum')->post('/interactions/track', [InteractionController::class, 'track']);
</php>
API Endpoint for Recommendations
This endpoint would query the interaction data and apply recommendation logic (e.g., collaborative filtering, content-based filtering). For simplicity, we’ll outline a basic “users who bought this also bought” logic.
<?php
namespace App\Http\Controllers;
use App\Models\Product;
use App\Models\UserInteraction;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\DB;
class RecommendationController extends Controller
{
public function getRecommendations(Request $request)
{
$request->validate([
'product_id' => 'nullable|integer|exists:products,id',
'user_id' => 'nullable|integer|exists:users,id',
'limit' => 'nullable|integer|min:1|max:50',
]);
$userId = $request->input('user_id') ?? Auth::id();
$productId = $request->input('product_id');
$limit = $request->input('limit', 10);
if (!$userId && !$productId) {
return response()->json(['error' => 'Either user_id or product_id is required'], 422);
}
$recommendationsQuery = Product::query();
if ($productId) {
// "Customers who bought this also bought..."
$purchasedProductIds = UserInteraction::where('type', 'purchase')
->where('interactionable_id', $productId)
->where('interactionable_type', Product::class)
->pluck('user_id')->unique();
$relatedProductIds = UserInteraction::where('type', 'purchase')
->whereIn('user_id', $purchasedProductIds)
->where('interactionable_type', Product::class)
->where('interactionable_id', '!=', $productId)
->select('interactionable_id', DB::raw('COUNT(*) as count'))
->groupBy('interactionable_id')
->orderBy('count', 'desc')
->limit($limit)
->pluck('interactionable_id');
$recommendationsQuery->whereIn('id', $relatedProductIds);
} elseif ($userId) {
// General recommendations for a user (e.g., based on past purchases, views)
$purchasedProductIds = UserInteraction::where('user_id', $userId)
->where('type', 'purchase')
->where('interactionable_type', Product::class)
->pluck('interactionable_id');
$viewedProductIds = UserInteraction::where('user_id', $userId)
->where('type', 'view')
->where('interactionable_type', Product::class)
->pluck('interactionable_id');
// Simple logic: recommend products similar to past purchases or views
// More advanced: use ML libraries, content-based filtering on product attributes
$recommendationsQuery->whereIn('id', $purchasedProductIds)->orWhereIn('id', $viewedProductIds);
$recommendationsQuery->whereNotIn('id', $purchasedProductIds); // Don't recommend already bought items
$recommendationsQuery->orderByDesc('created_at'); // Example ordering
}
return $recommendationsQuery->take($limit)->get();
}
}
</php>
Add route to routes/api.php:
<?php
use App\Http\Controllers\RecommendationController;
Route::get('/recommendations', [RecommendationController::class, 'getRecommendations']);
</php>
Frontend Integration (Conceptual – JavaScript)
The frontend would call the /api/recommendations endpoint, potentially passing the current product ID or the logged-in user’s ID.
async function fetchRecommendations(productId = null, userId = null, limit = 10) {
const token = localStorage.getItem('api_token');
if (!token) return []; // Or handle auth error
let url = `/api/recommendations?limit=${limit}`;
if (productId) {
url += `&product_id=${productId}`;
}
if (userId) {
url += `&user_id=${userId}`;
}
try {
const response = await fetch(url, {
headers: {
'Authorization': `Bearer ${token}`,
'Accept': 'application/json',
},
});
if (!response.ok) {
throw new Error(`API Error: ${response.status}`);
}
return await response.json();
} catch (error) {
console.error('Error fetching recommendations:', error);
return [];
}
}
// Example usage:
// fetchRecommendations(currentProductId).then(recs => {
// displayRecommendations(recs);
// });
</javascript>
4. Customizable Quiz/Survey Platform
Build a backend API for creating, managing, and deploying quizzes or surveys. The API handles question types, branching logic, user responses, and result aggregation. The frontend is a user-facing interface for taking the quiz and an admin interface for creation.
Data Models
Models for Quizzes, Questions, Options, and Responses.
php artisan make:model Quiz -m php artisan make:model Question -m php artisan make:model Option -m php artisan make:model Response -m
Migrations for these models, including relationships (e.g., Quiz has many Questions, Question has many Options, Question has many Responses, Option has many Responses).
API Endpoints
Key endpoints:
POST /api/quizzes: Create a new quiz.GET /api/quizzes/{quiz}: Get quiz details (questions, options).POST /api/quizzes/{quiz}/responses: Submit user responses.GET /api/quizzes/{quiz}/results: Get aggregated results (requires authorization).
Example: Submitting Responses
<?php
namespace App\Http\Controllers;
use App\Models\Quiz;
use App\Models\Question;
use App\Models\Option;
use App\Models\Response;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\DB;
class QuizResponseController extends Controller
{
public function store(Request $request, Quiz $quiz)
{
$request->validate([
'responses' => 'required|array',
'responses.*.question_id' => 'required|integer|exists:questions,id',
'responses.*.option_id' => 'nullable|integer|exists:options,id', // Nullable for open-ended
'responses.*.answer_text' => 'nullable|string', // For open-ended
]);
// Optional: Check if quiz is active/published
// if (!$quiz->is_published) { ... }
DB::transaction(function () use ($request, $quiz) {
$userId = Auth::id(); // Or handle anonymous submissions
foreach ($request->input('responses') as $response_data) {
$question = Question::findOrFail($response_data['question_id']);
// Basic validation: Ensure question belongs to this quiz
if ($question->quiz_id !== $quiz->id) {
throw new \Exception("Question {$question->id} does not belong to Quiz {$quiz->id}.");
}
$response = new Response();
$response->user_id = $userId;
$response->quiz_id = $quiz->id;
$response->question_id = $question->id;
if (isset($response_data['option_id'])) {
$option = Option::findOrFail($response_data['option_id']);
// Basic validation: Ensure option belongs to this question
if ($option->question_id !== $question->id) {
throw new \Exception("Option {$option->id} does not belong to Question {$question->id}.");
}
$response->option_id = $option->id;
} elseif (isset($response_data['answer_text'])) {
$response->answer_text = $response_data['answer_text'];
} else {
// Handle cases where neither option_id nor answer_text is provided if required
throw new \Exception("Invalid response data for question {$question->id}.");
}
$response->save();
}
});
return response()->json(['message' => 'Responses submitted successfully']);
}
// Endpoint to get results (simplified)
public function results(Quiz $quiz)
{
// Authorization check: Ensure user has permission to view results
// if (Auth::user()->cannot('viewResults', $quiz)) { ... }
$results = [
'total_responses' => $quiz->responses()->count(),
'question_analysis' => [],
];
foreach ($quiz->questions as $question) {
$analysis = [
'question_id' => $question->id,
'question_text' => $question->text,
'option_distribution' => [],
'average_score' => null, // For scored quizzes
];
if ($question->type === 'multiple_choice') {
$optionCounts = $question->options()->withCount(['responses' => function ($q) use ($quiz) {
$q->where('quiz_id', $quiz->id');
}])
->get()
->mapWithKeys(fn($option) => [$option->text => $option->responses_count]);
$analysis['option_distribution'] = $optionCounts;
} elseif ($question->type === 'short_answer') {
$answers = $question->responses()
->where('quiz_id', $quiz->id')
->whereNotNull('answer_text')
->pluck('answer_text');
$analysis['sample_answers'] = $answers->take(5); // Show a few examples
}
// Add logic for scoring, branching, etc.
$results['question_analysis'][] = $analysis;
}
return response()->json($results);
}
}
</php>
Add routes to routes/api.php:
<?php
use App\Http\Controllers\QuizController; // For CRUD operations on quizzes
use App\Http\Controllers\QuizResponseController;
Route::apiResource('quizzes', QuizController::class); // Basic CRUD for quizzes
Route::post