Forem: Faisal Malik

Roles & Module-Based Permissions in VUE, Laravel & Tailwind

Faisal Malik — Thu, 15 Jan 2026 19:05:08 +0000

I recently built a role-based and module-based CMS using Laravel 12 for the backend and Vue 3 with Tailwind CSS for the frontend. The system supports fine-grained permissions, where users can have multiple roles, and their access is dynamically controlled based on assigned modules and components. Authentication is handled securely with Laravel Sanctum, and the frontend leverages the Composition API for a modern, reactive experience.

You can explore the full project on GitHub and try it out here: cms-permission-vue-laravel

Step 1: Set up Sanctum for API Authentication
We'll use the Spatie Laravel Permission package. It’s widely used and battle-tested.

1. Install Laravel Sanctum:

composer require laravel/sanctum

2. Publish config:

php artisan vendor:publish --provider="Laravel\Sanctum\SanctumServiceProvider"

3. Run migrations:

php artisan migrate

Step 2: Install Spatie Role & Permission

composer require spatie/laravel-permission
php artisan vendor:publish --provider="Spatie\Permission\PermissionServiceProvider"
php artisan migrate

Update User model:

use Spatie\Permission\Traits\HasRoles;

class User extends Authenticatable
{
    use HasRoles;
    ....
}

Step 3: Add Modules & Components
1. Module Migration

php artisan make:migration create_modules_table

Update Migration database/migrations/xxxx_xx_xx_xxxx_create_modules_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('modules', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->string('slug'); 
        });
    }

    public function down(): void
    {
        Schema::dropIfExists('modules');
    }
};

php artisan make:migration create_modules_components_table

2. Components Migration
Update Migration database/migrations/xxxx_xx_xx_xxxx_create_modules_components_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('modules_components', function (Blueprint $table) {
            $table->id();

            // Foreign key to modules table (optional)
            $table->unsignedBigInteger('module_id');

            $table->string('name');
            $table->string('slug'); // Not unique

            $table->timestamps();

            // Optional foreign key constraint
            $table->foreign('module_id')
                  ->references('id')
                  ->on('modules')
                  ->onDelete('cascade');
        });
    }

    public function down(): void
    {
        Schema::dropIfExists('modules_components');
    }
};

3. Alter Permission Migration

php artisan make:migration create_permission_alter_table

Update Migration database/migrations/xxxx_xx_xx_xxxx_create_permission_alter_table.php


<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

return new class extends Migration
{
    /**
     * Run the migrations.
     */
    public function up(): void
    {
        Schema::table('permissions', function (Blueprint $table) {
            // Example: Add new columns
            $table->unsignedBigInteger('module_id')->after('id');
            $table->unsignedBigInteger('component_id')->after('module_id');
            $table->string('label')->after('component_id');

        });
    }

    /**
     * Reverse the migrations.
     */
    public function down(): void
    {
        Schema::table('permissions', function (Blueprint $table) {
            // Drop the columns added in up()
            $table->dropColumn('module_id');
            $table->dropColumn('component_id');
            $table->dropColumn('label');
        });
    }
};

4. Create Models for Module, Components, Permissions

php artisan make:model Module
php artisan make:model ModuleComponent
php artisan make:model ModuleHasPermission

5. Create Seeder

php artisan make:seeder DatabaseSeeder

Copy & paste the below function in database/seeders/DatabaseSeeder.php

<?php

namespace Database\Seeders;

use App\Models\User;
use App\Models\Modules\Module;
use App\Models\Modules\ModuleComponent;
use App\Models\Modules\Permission;
use App\Models\Modules\ModuleHasPermission;
use Spatie\Permission\Models\Role;
use Illuminate\Support\Facades\Hash;
use Illuminate\Database\Seeder;

class DatabaseNewSeeder extends Seeder
{
    public function run(): void
    {
        // Create default user
        $user = User::factory()->create([
            'name' => 'Test Admin',
            'email' => 'admin@example.com',
            'password' => Hash::make('12345678'),
        ]);

        // ------------------
        // Create roles
        // ------------------
        $adminRole = Role::firstOrCreate(['name' => 'admin']);
        $userRole  = Role::firstOrCreate(['name' => 'user']);

        // Assign admin role to test user
        $user->syncRoles([$adminRole->name]);

        // ------------------
        // Modules + Components + Permissions
        // ------------------
        $modules = [
            'Users' => ['Details', 'Permissions'],
            'Tasks' => ['List'],
            'Settings' => ['Details']
        ];

        foreach ($modules as $moduleName => $components) {
            $module = Module::create([
                'name' => $moduleName,
                'slug' => strtolower($moduleName),
            ]);

            foreach ($components as $componentName) {
                $component = ModuleComponent::create([
                    'module_id' => $module->id,
                    'name' => $componentName,
                    'slug' => strtolower($componentName),
                ]);

                // Create permissions for each component
                $crudLabels = ['View', 'Add', 'Edit', 'Delete'];
                foreach ($crudLabels as $label) {
                    $permissionName = strtolower($moduleName) . '.' . strtolower($componentName) . '.' . strtolower($label);
                    $permission = Permission::create([
                        'module_id' => $module->id,
                        'component_id' => $component->id,
                        'label' => $label,
                        'name' => $permissionName,
                        'guard_name' => 'web',
                    ]);

                    ModuleHasPermission::create([
                        'permission_id' => $permission->id,
                        'model_id' => $user->id,
                        'model_type' => User::class,
                    ]);
                }
            }
        }
    }
}

Run the seeder:

php artisan db:seed --class=DatabaseSeeder

Step 5: Create Auth API
1. Create AuthController

php artisan make:controller AuthController

<?php

namespace App\Http\Controllers;
use App\Models\User;
use Illuminate\Support\Facades\Hash;
use Illuminate\Validation\ValidationException;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;

class AuthController extends Controller
{
    public function login(Request $request)
    {
        $request->validate([
            'email'=>'required|email',
            'password'=>'required'
        ]);

        $user = User::where('email', $request->email)->first();

        if (!$user || !Hash::check($request->password, $user->password)) {
            throw ValidationException::withMessages([
                'email' => ['Invalid credentials.']
            ]);
        }

        $token = $user->createToken('api-token')->plainTextToken;

        return response()->json([
            'user'=>$user,
            'token'=>$token
        ]);
    }
    public function show_permissions()
    {
        $auth = Auth::user(); 
        $admin['detail'] = $auth;
        $admin['roles'] = $auth->getRoleNames();
        $admin['permissions'] = $auth->getPermissionNames();
        return response()->json($admin, '201');
    }
    public function logout(Request $request)
    {
        $request->user()->currentAccessToken()->delete();
        return response()->json(['message'=>'Logged out']);
    }
}

2. Create UserController

php artisan make:controller UserController

<?php

namespace App\Http\Controllers;
use App\Models\User;
use Illuminate\Support\Facades\Hash;
use Illuminate\Validation\Rule;
use Illuminate\Validation\ValidationException;
use Illuminate\Http\Request;

class UserController extends Controller
{
   public function index()
    {  
        $users = User::get();
        return response()->json($users, 200);
    }

    public function store(Request $request)
    {
        $request->validate([
            'role'=>'required',
            'name'=>'required',
            'email'=>'required|email|unique:users',
            'password'=>'required|min:6'
        ]);

        $user = User::create([
            'name'=>$request->name,
            'email'=>$request->email,
            'password'=>Hash::make($request->password),
        ]);

        $user->assignRole($request->role); 

        return response()->json($user, 201);
    }

    public function update(int $id, Request $request)
    {

        $user = User::findOrFail($id);

        $request->validate([
            'role' => 'required|string', 
            'name'  => 'required|string|max:255',
            'email' => [
                'required',
                'email',
                Rule::unique('users')->ignore($user->id),
            ],
        ]);

        $user->update([
            'name'  => $request->name,
            'email' => $request->email,
        ]);

        $user->syncRoles([$request->role]);

        return response()->json($user, 201);
    }

    public function show(int $id)
    {
        $user = User::findOrFail($id); 
        $user->role = $user->getRoleNames();
        return response()->json($user, 201);
    }

    public function destroy(int $id)
    {
        $user = User::findOrFail($id);
        $delete =  $user->delete();

        return response()->json($delete, 201);
    }
}

3. Create ModuleController

php artisan make:controller ModuleController

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use App\Models\Modules\Module;
use App\Models\Modules\ModuleComponent;
use App\Models\Modules\Permission;
use App\Models\Modules\ModuleHasPermission;

class ModuleController extends Controller
{

    public function index()
    {
        $modules = Module::get();
        foreach($modules as $key => $row){
            $data['module_id'] = $row->id;
            $data['module_name'] = $row->label;
            $permissions = Permission::where('module_id', $row->id)->get();
            $data['module_permissions'] = $permissions;
        }             
        return response()->json($module, 201);
    }      
    public function permission(int $user)
    {
        $actions = array('View', 'Add', 'Edit', 'Delete');
        $modules = Module::get();
        foreach($modules as $key => $row){
            $data[$key]['module_id'] = $row->id;
            $data[$key]['module_name'] = $row->name;

            $components = ModuleComponent::where('module_id', $row->id)->get();
            $component = array();
            foreach($components as $i => $comp){
                $component[$i]['component_label'] = $comp->name;
                $action_arry = [];
                foreach($actions as $j => $action){
                    $permission = Permission::where('module_id', $row->id)->where('component_id', $comp->id)->where('label', $action)->first();
                    $per = array();
                    if(isset($permission->id)){
                        $per['per_id'] = $permission->id;
                        $per['per_label'] = $permission->label;
                        $per['per_name'] = $permission->name;
                        $admin_per = ModuleHasPermission::where('model_id', $user)->where('permission_id', $permission->id)->first();
                        if(isset($admin_per->model_id)){
                            $per['check'] = 1;
                        }else{
                            $per['check'] = 0;
                        }
                    }
                    $action_arry[$j] = $per;
                }
                $component[$i]['component_actions'] = $action_arry;
            }
            $data[$key]['module_permissions'] = $component;
        }             
        return response()->json($data, 201);
    }  

    public function store(int $user, Request $request)
    {

        $modules = $request->all();
         foreach($modules as $key => $row){
            foreach($row['module_permissions'] as $i => $comp){
                foreach($comp['component_actions'] as $ind => $val){
                    if(isset($val['check']) && $val['check'] == 1){
                        $admin_per = ModuleHasPermission::where('model_id', $user)->where('permission_id', $val['per_id'])->first();
                        if(empty($admin_per)){
                            $per_create = ModuleHasPermission::create([
                                'model_id' => $user,
                                'permission_id' => $val['per_id'],
                                'model_type' => 'App\Models\User',
                            ]);
                        }
                    }
                    if(isset($val['check']) && $val['check'] == 0){
                        $admin_per = ModuleHasPermission::where('model_id', $user)->where('permission_id', $val['per_id'])->first();
                        if(isset($admin_per->model_id)){
                            $per_delete = ModuleHasPermission::where('model_id', $user)->where('permission_id', $val['per_id'])->delete();
                        }
                    }
                }
            }
        } 


        return response()->json($modules, 201);
    }  
}

4. Add routes routes/api.php:

<?php

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\AuthController;
use App\Http\Controllers\UserController;
use App\Http\Controllers\ModuleController;

Route::post('/register', [AuthController::class, 'register']);
Route::post('/login', [AuthController::class, 'login']);

Route::middleware('auth:sanctum')->group(function () {
    Route::post('/logout', [AuthController::class, 'logout']);
    Route::get("/users-permissions", [AuthController::class, "show_permissions"]);

    // Users
    Route::apiResource("/users", UserController::class);
    //Permissions
    Route::get("/users/{user}/permissions", [ModuleController::class, "permission"]);
    Route::post("/users/{user}/permissions", [ModuleController::class, "store"]);
});

Step 6: Set up Vue 3 Frontend

1. Create a Vue 3 project (in the same folder or another folder):

npm create vite@latest frontend
cd frontend
npm install
npm install axios pinia vue-router

2. Axios API Global Config
src/stores/api.js

import axios from 'axios';

axios.defaults.baseURL = 'http://127.0.0.1:8000/api';
axios.defaults.headers.common['Accept'] = 'application/json';

const token = localStorage.getItem('token');
if (token) {
  axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;
}

export default axios;

3. Set up Pinia Store

src/stores/auth.js

import { defineStore } from 'pinia';
import axios from 'axios';
import api from './api';

const api_url = 'http://127.0.0.1:8000';

export const useAuthStore = defineStore('auth', {
  state: () => ({
    user: null,
    token: localStorage.getItem('token') || null,
  }),

  getters: {
    isLoggedIn: (state) => !!state.token,
  },

  actions: {
    async login(credentials) {
        axios.get(api_url+'/sanctum/csrf-cookie')
        const res = await axios.post(api_url+'/api/login', credentials);

        this.user = res.data.user;
        this.token = res.data.token;

        localStorage.setItem('token', this.token);
        axios.defaults.headers.common['Authorization'] = `Bearer ${this.token}`;
    },
    async logout() {
      await api.post('/logout');

      this.user = null;
      this.token = null;

      localStorage.removeItem('token');
      delete axios.defaults.headers.common['Authorization'];
    },
  },
});

src/stores/permission.js


import { defineStore } from 'pinia'
import api from './api';

export const usePermissionStore = defineStore('permission', {
  state: () => ({
    user: null,
    roles: [],
    permissions: [],
    loaded: false,
  }),
  actions: {
    async fetchUser() {
      await api.get(`/users-permissions`)
      .then((resp) => {            
        this.user = resp.data.detail
        this.roles = resp.data.roles
        this.permissions = resp.data.permissions
        this.loaded = true
      })
    },
    can(check_permission) {
      return this.permissions.includes(check_permission)
    },
    canRole(check_role) {
      return this.roles.includes(check_role)
    }
  }
})

4. Vue Router with Auth Guard

src/router/index.js

import { createRouter, createWebHistory } from 'vue-router';
import { useAuthStore } from '../stores/auth';
import { usePermissionStore } from '../stores/permission'
import Login from '../views/Login.vue';
import Dashboard from '../views/Dashboard.vue';
import Task from '../views/Task.vue';

const routes = [
  { path: '/login', component: Login },
  {
    path: '/dashboard',
    component: Dashboard,
    meta: { 
      requiresAuth: true,
    },
  },
  {
    path: '/tasks',
    component: Task,
    meta: { 
      requiresAuth: true,
      permission: ['tasks.list.view']
    },
  },
  { path: '/', redirect: '/dashboard' },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

router.beforeEach(async (to, from, next) => {
  const auth = useAuthStore();
  const adminStore = usePermissionStore()

  // Load user/permissions if needed
  if (!adminStore.loaded && auth.isLoggedIn) {
    await adminStore.fetchUser()
  }

  if (to.matched.some(record => record.meta.requiresAuth)) {
    if (!auth.isLoggedIn) {
      next({
        path: '/login',
        query: { redirect: to.fullPath }
      });
    } else {
      // Check permission and role if defined
      const requiredRoles = to.meta.role
      const requiredPermissions = to.meta.permission
      if (requiredRoles && !requiredRoles.some(r => adminStore.canRole(r))) {
        next({ path: '/unauthorized' })
      } 
      else if (requiredPermissions && !requiredPermissions.some(p => adminStore.can(p))) {
        next({ path: '/unauthorized' })
      } else {
        next()
      }
    }
  } else if (to.matched.some(record => record.meta.guestOnly)) {
    if (auth.isLoggedIn) {
      next({ path: '/' }) // Redirect logged-in user away from guest-only pages
    } else {
      next()
    }
  } else {
    next()
  }
})

export default router;

5. Change main.js

src/main.js

import { createApp } from 'vue'
import { createPinia } from 'pinia';
import router from './router';
import './style.css'
import App from './App.vue'

createApp(App)
  .use(createPinia())
  .use(router)
  .mount('#app');

src/views/Login.vue


<template>

  <div class="min-h-screen flex items-center justify-center">
    <div class="w-full max-w-md bg-white p-8 rounded-xl shadow-lg">
      <h2 class="text-2xl font-bold text-center mb-6 text-gray-800 ">
        Login to your account
      </h2>

      <form @submit.prevent="submit" class="space-y-4">
        <div>
          <label class="block text-sm font-medium text-gray-600">Email</label>
          <input
            v-model="email"
            type="email"
            class=" text-black bg-gray-100 mt-1 w-full px-4 py-2 border-gray-300 border-1 rounded-lg focus:ring focus:ring-indigo-200"
            required
          />
        </div>

        <div>
          <label class="block text-sm font-medium text-gray-600">Password</label>
          <input
            v-model="password"
            type="password"
            class="text-black bg-gray-100 mt-1 w-full px-4 py-2  border-gray-300 border-1 rounded-lg focus:ring focus:ring-indigo-200"
            required
          />
        </div>

        <button
          type="submit"
          class="w-full bg-indigo-600 text-white py-2 rounded-lg hover:bg-indigo-700 transition mt-2"
        >
          Login
        </button>

        <p v-if="error" class="text-red-500 text-sm text-center">
          {{ error }}
        </p>
      </form>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { useAuthStore } from '@/stores/auth';
import { usePermissionStore } from '@/stores/permission'

const email = ref('');
const password = ref('');
const error = ref('');
const router = useRouter();
const auth = useAuthStore();
const permission = usePermissionStore();

const submit = async () => {
  try {
    await auth.login({ email: email.value, password: password.value });
    permission.fetchUser();
    router.push('/dashboard');
  } catch {
    error.value = 'Invalid credentials';
  }
};
</script>

7. Dashboard Screen
src/Dashboard.vue

<template>
  <div>
    <h1>Dashboard</h1>

    <h1 class="text-3xl font-bold mb-4">Welcome, {{ permissionStore.user?.name }}</h1>

    <p class="text-gray-600 mb-6" v-if="permissionStore.user?.roles[0]?.name">
      Roles: <span class="font-medium text-indigo-600 capitalize">{{ permissionStore.user?.roles[0]?.name }}</span>
    </p>

    <div class="bg-white p-8 rounded-xl shadow mb-5" v-if="permissionStore.canRole('admin')">
      <h1 class="text-3xl font-bold mb-6 text-indigo-700">Admin Panel</h1>
      <p>This is admin section.</p>
    </div>
    <div class="bg-white p-8 rounded-xl shadow mb-5" v-if="permissionStore.can('settings.details.view')">
      <h1 class="text-3xl font-bold mb-6 text-indigo-700">Setting Panel</h1>
      <p>This is settings section.</p>
    </div>
    <div class="bg-white p-8 rounded-xl shadow mb-5" v-if="permissionStore.can('tasks.list.view')">
      <h1 class="text-3xl font-bold mb-6 text-indigo-700">Task Panel</h1>
      <router-link to="/tasks" class="bg-indigo-600 text-white px-4 py-2 rounded hover:bg-indigo-700" v-if="permissionStore.can('tasks.list.view')" >
        View Tasks
      </router-link>
    </div>

    <button class='bg-indigo-600 text-white px-4 py-2 rounded hover:bg-indigo-700' @click="logout">Logout</button>
  </div>
</template>

<script setup>
import { useAuthStore } from '@/stores/auth';
import { usePermissionStore } from '@/stores/permission'
import { useRouter } from 'vue-router';

const auth = useAuthStore();
const permissionStore = usePermissionStore();
const router = useRouter();

const logout = async () => {
  await auth.logout();
  router.push('/login');
};
</script>

8. Task Screen
src/Task.vue

<template>
  <div>
    <div class="flex justify-between items-center mb-6">
      <h1 class="text-2xl font-bold">Tasks</h1>
      <button type="button" v-if="permissionStore.can('tasks.list.add')" class="bg-indigo-600 text-white px-4 py-2 rounded hover:bg-indigo-700" >+ Add Task</button>
    </div>

    <div class="bg-white shadow rounded-lg overflow-hidden">
      <table class="w-full">
        <thead class="bg-gray-800 text-white">
          <tr>
            <th class="px-4 py-3 text-left">Title</th>
            <th class="px-4 py-3 text-left">Action Date</th>
            <th class="px-4 py-3 text-left">Due Date</th>
            <th class="px-4 py-3 text-left">Status</th>
            <th class="px-4 py-3 text-left">Actions</th>
          </tr>
        </thead>

        <tbody>
          <tr
            v-for="task in tasks"
            :key="task.id"
            class="border-t border-t-gray-300 hover:bg-gray-50"
          >
            <td class="px-4 py-3">{{ task.title }}</td>
            <td class="px-4 py-3">{{ task.action_date }}</td>
            <td class="px-4 py-3">{{ task.due_date }}</td>
            <td class="px-4 py-3">{{ task.status }}</td>
            <td class="px-4 py-3 space-x-2">
             <button type="button" v-if="permissionStore.can('tasks.list.edit')" class="text-indigo-600 hover:underline" >Edit</button>
                <button type="button" @click="deleteTask" v-if="permissionStore.can('tasks.list.delete')" class="text-indigo-600 hover:underline" >Delete</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script setup>
const tasks = [
  {
    id: 1,
    title: 'Design login page UI',
    action_date: '05-01-2026',
    due_date: '07-01-2026',
    status: 'Pending',
  },
  {
    id: 2,
    title: 'Implement user authentication',
    action_date: '06-01-2026',
    due_date: '10-01-2026',
    status: 'In Progress',
  },
];



const deleteTask = async (id) => {
  if (!confirm('Delete this task?')) return;
};

</script>

Step 7: Test Everything
Run Laravel API:

php artisan serve

Run Vue 3 frontend:

npm run dev

Github:
Check out the full CMS Permission System built with Laravel 12, Vue 3, and Tailwind CSS on GitHub:
https://github.com/malickfaisal/cms-permission-vue-laravel
Explore the code, try it out, and see role-based & module-based permissions in action!

Build an AI-Powered Document Insights Tool with Django (Python), and React

Faisal Malik — Thu, 08 Jan 2026 18:37:44 +0000

Managing contracts, agreements, or any business documents can be time-consuming and prone to errors. What if you could automatically extract key information like parties, important dates, and clauses from PDFs, all powered by AI?

In this tutorial, I’ll show you how to build a document insights tool using Django (Python) for the backend, React for the frontend, and OpenAI GPT API for AI-powered document analysis.

Tech Stack

Backend: Django + Django REST Framework
Frontend: React + Axios
Database: SQLite
AI: OpenAI
PDF Parsing: PyPDF2

1. Backend
Step 1: Install Dependencies

pip install django djangorestframework PyPDF2 openai

Step 2: Django Model for Documents

In api/models.py:


from django.db import models

class Document(models.Model):
    file = models.FileField(upload_to='documents/')
    uploaded_at = models.DateTimeField(auto_now_add=True)
    extracted_text = models.TextField(blank=True, null=True)
    insights = models.JSONField(blank=True, null=True)

Run migrations:

python manage.py makemigrations
python manage.py migrate

Step 3: Serializer

In api/serializers.py:


from rest_framework import serializers
from .models import Document

class DocumentSerializer(serializers.ModelSerializer):
    class Meta:
        model = Document
        fields = ['id', 'file', 'uploaded_at', 'extracted_text', 'insights']

Step 4: Django API View Using OpenAI GPT

In api/views.py:


from rest_framework.views import APIView
from rest_framework.response import Response
from .models import Document
from .serializers import DocumentSerializer
from PyPDF2 import PdfReader
from openai import OpenAI

# Initialize OpenAI client
client = OpenAI(api_key="YOUR_OPENAI_API_KEY")

class UploadDocument(APIView):
    def post(self, request):
        file = request.FILES['file']
        doc = Document.objects.create(file=file)

        # Extract text from PDF
        reader = PdfReader(file)
        text = ""
        for page in reader.pages:
            text += page.extract_text() or ""
        doc.extracted_text = text

        # Prepare AI prompt
        prompt = f"""
        You are an AI assistant that extracts structured information from documents.
        For the following document text, provide:
        1. Parties involved
        2. Important dates
        3. Key clauses
        4. Any missing or inconsistent information
        Return as JSON.

        Document:
        {text}
        """

        # Call OpenAI API
        response = client.chat.completions.create(
            model="gpt-5-nano",  # use GPT-3.5 or GPT-4 if you have access
            messages=[{"role": "user", "content": prompt}]
        )

        # Save AI insights
        doc.insights = response.choices[0].message.content
        doc.save()

        serializer = DocumentSerializer(doc)
        return Response(serializer.data)

Step 5: URLs

In api/urls.py:


from django.urls import path
from .views import UploadDocument

urlpatterns = [
    path('upload-document/', UploadDocument.as_view(), name='upload-document'),
]

Include in project/urls.py:

from django.urls import path, include

urlpatterns = [
    path('api/', include('api.urls')),
]

Step 6: React Frontend

Install Axios:

npm install axios

Create a new file: src/pages/DocumentInsights.jsx


import React, { useState } from 'react';
import axios from 'axios';

export default function DocumentInsights() {
  const [file, setFile] = useState(null);
  const [insights, setInsights] = useState(null);

  const handleUpload = async () => {
    const formData = new FormData();
    formData.append("file", file);

    try {
      const { data } = await axios.post(
        "http://127.0.0.1:8000/api/upload-document/",
        formData
      );
      setInsights(JSON.parse(data.insights));
    } catch (error) {
      console.error(error);
    }
  };

  return (
    <div className="min-h-screen flex items-center justify-center">
      <div className=" bg-gray-100 rounded-lg shadow-md p-6 w-full max-w-lg">
        <h1 className="text-2xl font-semibold mb-4 text-center">
          AI Document Insights
        </h1>
        <div>
          <input  className="bg-white border rounded mb-4 p-4" type="file" onChange={(e) => setFile(e.target.files[0])} />
        </div>
        <div className='block'>
          <button className='px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600' onClick={handleUpload}>Upload</button>
        </div>
        {insights && (
          <div>
            <h2>Parties:</h2> {insights.parties.join(", ")}
            <h2>Dates:</h2> {insights.dates.join(", ")}
            <h2>Key Clauses:</h2> {insights.key_clauses.join(", ")}
            <h2>Missing Info:</h2> {insights.missing_info.join(", ")}
          </div>
        )}
      </div>
    </div>
  );
}

src/App.js

import DocumentInsights from "./pages/DocumentInsights";
import './App.css'

function App() {
  return (
    <div>
      <DocumentInsights />
    </div>
  );
}

export default App;

Make sure your backend allows CORS:

pip install django-cors-headers

In settings.py:

INSTALLED_APPS = [
    ....,
    'corsheaders',
]

MIDDLEWARE = [
    ...,
    'corsheaders.middleware.CorsMiddleware',
]

CORS_ALLOW_ALL_ORIGINS = True

Step 7: Test It

Run Django:

python manage.py runserver

Run React:

npm run dev

Open your browser, upload a PDF, and see AI-powered structured insights.

Build an E-Signature with React, TailwindCSS, and Django Python

Faisal Malik — Mon, 05 Jan 2026 16:05:27 +0000

Learn how to create a fully functional e-signature application using React for the frontend, TailwindCSS for styling, and Django REST Framework to save signatures as PNG images. Perfect for contracts, forms, or any web application needing digital signatures.

Introduction

Digital signatures are increasingly common in web apps for signing forms, agreements, or contracts online. In this tutorial, we will build an e-signature app where users can draw their signature on a canvas and save it on the server as an image file.

We’ll use:

React for the frontend
TailwindCSS for styling
react-signature-canvas for drawing the signature
Django as a backend to receive and save the signature

By the end, you’ll have a full-stack solution ready for integration into any project.

1️⃣ Frontend Setup: React + TailwindCSS
Step 1: Install dependencies

First, make sure you have a React app. If not:

npm install react-signature-canvas

(Optional but recommended)

npm install trim-canvas

Step 2: Create SignaturePad Component

Create a new file: src/pages/SignaturePad.jsx

import { useRef } from "react";
import SignatureCanvas from "react-signature-canvas";
export default function SignaturePage() {
  const sigRef = useRef(null);
  const clearSignature = () => {
    if (!sigRef.current) return;
    sigRef.current.clear();
  };
  const saveSignature = () => {
    if (!sigRef.current || sigRef.current.isEmpty()) {
      alert("Please sign first");
      return;
    }
    const canvas = sigRef.current.getCanvas();
    const dataUrl = canvas.toDataURL("image/png");
    console.log("Signature Base64:", dataUrl);
    // Needs to do: send to backend
  };
  return (

    <div className="min-h-screen flex items-center justify-center">
      <div className=" bg-gray-100 rounded-lg shadow-md p-6 w-full max-w-lg">
        <h1 className="text-2xl font-semibold mb-4 text-center">
          E-Signature
        </h1>
        <div className="bg-white border rounded mb-4">
          <SignatureCanvas
            ref={sigRef}
            penColor="black"
            canvasProps={{
              width: 500,
              height: 200,
              className: "w-full h-auto"
            }}
          />
        </div>
        <div className="flex justify-between">
          <button
            onClick={clearSignature}
            className="px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600"
          >
            Clear
          </button>
          <button
            onClick={saveSignature}
            className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
          >
            Save
          </button>
        </div>
      </div>
    </div>
  );
}

2️⃣ Backend Setup: Django REST Framework
Step 1: Install Django & DRF

pip install django djangorestframework

Create a Django project and app:

django-admin startproject e-sign
cd e-sign
python manage.py startapp api

Add rest_framework and your app to INSTALLED_APPS in settings.py

INSTALLED_APPS = [
    ....,
    'rest_framework',
    'api',
]

Step 2: Create API Endpoint

Create a view to save the signature:

# api/views.py
from django.shortcuts import render
from rest_framework.views import APIView
from rest_framework.response import Response
from rest_framework import status
import os
import base64
from django.conf import settings

class SaveSignature(APIView):
    def post(self, request):
        data_url = request.data.get("signature")
        if not data_url:
            return Response({"error": "No signature provided"}, status=status.HTTP_400_BAD_REQUEST)

        try:
            header, encoded = data_url.split(",", 1)
            binary_data = base64.b64decode(encoded)
        except Exception:
            return Response({"error": "Invalid signature format"}, status=status.HTTP_400_BAD_REQUEST)

        save_path = os.path.join(settings.BASE_DIR, "signatures")
        os.makedirs(save_path, exist_ok=True)
        # Save with unique filename
        import uuid
        file_name = os.path.join(save_path, f"{uuid.uuid4()}.png")

        with open(file_name, "wb") as f:
            f.write(binary_data)

        return Response({"message": f"Signature saved at {file_name}"}, status=status.HTTP_201_CREATED)

Explanation:

data_url.split(",", 1) separates the Base64 header from the actual data.
base64.b64decode converts the Base64 string back to binary data.
We save the signature in a signatures folder using a UUID filename to avoid collisions.

Step 3: Setup URLs

# api/urls.py
from django.urls import path
from .views import SaveSignature

urlpatterns = [
    path("save-signature/", SaveSignature.as_view(), name="save-signature"),
]

Step 4: Include the app URLs in the project urls.py

# e-sign/urls.py
from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path("admin/", admin.site.urls),
    path("api/", include("api.urls")),
]

3️⃣ Connecting React to Django

Your saveSignature function in React sends a POST request with the signature in Base64 format. Django receives it, decodes it, and saves it as a PNG.

const saveSignature = async () => {
    if (!sigRef.current || sigRef.current.isEmpty()) {
      alert("Please sign first");
      return;
    }

    const canvas = sigRef.current.getCanvas();
    const dataUrl = canvas.toDataURL("image/png");

    try {
      const res = await fetch("http://127.0.0.1:8000/api/save-signature/", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ signature: dataUrl }),
      });

      const result = await res.json();
      console.log(result);
      alert(result.message);
    } catch (err) {
      console.error(err);
      alert("Failed to save signature");
    }
  };

Now, running both the frontend (npm run dev) and backend (python manage.py runserver) will allow users to draw, clear, and save signatures.

✅ Conclusion

In this tutorial, you learned how to:

Create a signature pad using react-signature-canvas
Build a Django REST API to save signatures as PNG images
Connect frontend and backend for a full-stack e-signature app
This setup can be used for contracts, forms, and any web app requiring digital signatures.

How to Add/Update Subscribers with Tags to Mailchimp Using PHP/Laravel

Faisal Malik — Tue, 16 Dec 2025 16:18:54 +0000

If you’re building a web app and need to add users to a Mailchimp audience programmatically, you can do it easily using PHP/Laravel and the Mailchimp API.
In this post, I’ll show you how to add or update a subscriber, apply tags, and store merge fields like first name and last name.

Step 1: Set Up Your Mailchimp API Key

You can generate your API key from the Mailchimp dashboard:

Go to Account → Extras → API Keys
Create a new key and copy it

Example:

$apiKey = 'YOUR_API_KEY';

Step 2: Get Your Audience (List) ID

To find your audience ID:

Navigate to Audience → Audience settings
Copy the Audience ID

Example:

$listId = 'YOUR_LIST_ID';

Step 3: Identify Your Server Prefix

Your Mailchimp server prefix is visible in the Mailchimp dashboard URL.

Example:

https://us18.admin.mailchimp.com/...
So your server prefix would be:
$server = 'us18';

Step 4: Prepare the Subscriber Data

Next, collect user data (usually from a form request) and define any tags you want to apply.

$email = $request->email;
$tags = ['Tag 1']; // You can add multiple tags
$data = [
    'email_address' => $email,
    'merge_fields' => [
        'FNAME' => $request->fname,
        'LNAME' => $request->lname,
    ],
    'status_if_new' => 'subscribed',
    'tags' => $tags
];
$jsonData = json_encode($data);

Step 5: Build the Mailchimp API URL

Mailchimp identifies list members using an MD5 hash of the lowercase email address.

$url = 'https://' . $server . '.api.mailchimp.com/3.0/lists/' 
     . $listId . '/members/' . md5(strtolower($email));

Step 6: Send the PUT Request Using cURL

We’ll use a PUT request so the subscriber is created if new or updated if they already exist.

$ch = curl_init($url);
curl_setopt($ch, CURLOPT_USERPWD, 'user:' . $apiKey);
curl_setopt($ch, CURLOPT_HTTPHEADER, ['Content-Type: application/json']);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_TIMEOUT, 10);
curl_setopt($ch, CURLOPT_CUSTOMREQUEST, 'PUT');
curl_setopt($ch, CURLOPT_POSTFIELDS, $jsonData);
$response = curl_exec($ch);
$httpCode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
curl_close($ch);
if ($httpCode == 200) {
    echo "Subscriber added or updated successfully!";
} else {
    echo "Error: " . $response;
}

Step 7: One Complete PHP Example

Below is the full working PHP example that adds or updates a subscriber in Mailchimp, applies tags, and saves merge fields like first and last name.

<?php
// Mailchimp configuration
$apiKey = 'YOUR_API_KEY';          // Mailchimp API key
$listId = 'YOUR_LIST_ID';          // Audience ID
$server = 'us18';                  // Server prefix (e.g. us18)

// Subscriber data (example from form request)
$email = $request->email;
$fname = $request->fname;
$lname = $request->lname;

// Tags
$tags = ['Tag 1'];

// Prepare data
$data = [
    'email_address' => $email,
    'merge_fields' => [
        'FNAME' => $fname,
        'LNAME' => $lname,
    ],
    'status_if_new' => 'subscribed',
    'tags' => $tags
];

// Convert data to JSON
$jsonData = json_encode($data);

// Mailchimp API endpoint
$url = 'https://' . $server . '.api.mailchimp.com/3.0/lists/' 
     . $listId . '/members/' . md5(strtolower($email));

// Initialize cURL
$ch = curl_init($url);
curl_setopt($ch, CURLOPT_USERPWD, 'user:' . $apiKey);
curl_setopt($ch, CURLOPT_HTTPHEADER, ['Content-Type: application/json']);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_TIMEOUT, 10);
curl_setopt($ch, CURLOPT_CUSTOMREQUEST, 'PUT');
curl_setopt($ch, CURLOPT_POSTFIELDS, $jsonData);

// Execute request
$response = curl_exec($ch);
$httpCode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
curl_close($ch);

// Handle response
if ($httpCode === 200) {
    echo "Subscriber added or updated successfully!";
} else {
    echo "Mailchimp API Error: " . $response;
}

Notes

PUT ensures the subscriber is created if they don’t exist, or updated if they do.
Tags help segment users for campaigns and automations.
merge_fields allow you to store additional user data like first and last names.

Conclusion

With just a few lines of PHP, you can integrate Mailchimp subscriptions into your web app, manage audience tags, and keep subscriber data organized automatically. This approach works perfectly for partners, customers, and any segmented email campaigns.