Forem: Zakir Hossen

Building an In-App E-Signature Flow Without DocuSign (Laravel + React + Canvas)

Zakir Hossen — Wed, 15 Apr 2026 07:04:41 +0000

A customer of mine was printing offer letters, signing them with a pen, scanning them on a flatbed, and emailing them back. In 2026. Inside an app I built for him.

So last week I shipped a proper offer-letter workflow with an in-browser e-signature surface — no DocuSign, no third-party embed, no bolt-on fees. Just a <canvas>, a signed payload, and a stored PDF.

Here's what I learned. The stack is Laravel 12 + Inertia v2 + React 19 + Mantine + Tailwind v4, but most of this is transferable.

The problem in one paragraph

An offer letter flow has four moving parts: (1) a templated document with variables (name, salary, start date), (2) a public URL a candidate can open without logging in, (3) a signing surface that works on phone and desktop, and (4) a signed PDF that gets archived and is legally defensible. None of these are hard individually. The interesting part is where they collide.

1. The public signing URL — stop being clever

First instinct: JWTs. Signed URLs. Short expiry. A whole dance.

What I actually shipped: a random 64-char token on the offers table, looked up on a route-model-binding where('token', $token)->firstOrFail(). That's it.

// routes/web.php
Route::get('/offer/{token}', [CandidateOfferController::class, 'show']);
Route::post('/offer/{token}/accept', [CandidateOfferController::class, 'accept']);

The token is the secret. No login, no account creation, no email confirmation round-trip. The candidate clicks the link and sees the letter. That's the entire auth model for the candidate side.

If you're thinking "but what about security" — the token has ~380 bits of entropy, the route is HTTPS only, and every action is idempotent and logged. DocuSign's own "anyone with the link can sign" flow has the same threat model. Don't over-engineer this.

2. The signature canvas — dark mode will bite you

I used react-signature-canvas, which wraps the excellent signature_pad library. The naive integration:

<SignatureCanvas
  penColor="var(--mantine-color-text)"
  canvasProps={{ className: 'w-full h-48 border rounded' }}
/>

This silently fails in dark mode.

The <canvas> 2D context cannot resolve CSS custom properties. It sees var(--mantine-color-text) as a literal string, fails to parse it, and falls back to... nothing visible. The user draws, the strokes are captured, but they're rendered in a color the canvas can't compute. You get a "signature captured!" toast and a completely blank canvas.

The fix is to resolve the color at runtime:

import { useComputedColorScheme } from '@mantine/core';

const colorScheme = useComputedColorScheme('light', { getInitialValueInEffect: true });
const penColor = colorScheme === 'dark' ? '#f1f3f5' : '#1a1a1a';
const canvasBg = colorScheme === 'dark' ? '#1a1b1e' : '#ffffff';

<SignatureCanvas
  penColor={penColor}
  backgroundColor={canvasBg}
  canvasProps={{ className: 'w-full h-48 border rounded' }}
/>

Canvas doesn't know about CSS. Always pass hex. This cost me an embarrassing amount of debugging time.

3. Type-to-sign — the 40% of users who hate drawing

Half your users are on a laptop with a trackpad. Drawing a signature with a trackpad looks like a seismograph readout. You need a second input mode: type your name, render it in a cursive font.

const TYPED_FONT = '"Dancing Script", "Brush Script MT", "Lucida Handwriting", cursive';

function renderTypedSignature(canvas: HTMLCanvasElement, text: string) {
  const ctx = canvas.getContext('2d')!;
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  let fontSize = 64;
  ctx.font = `${fontSize}px ${TYPED_FONT}`;

  // Auto-fit: shrink until it fits
  while (ctx.measureText(text).width > canvas.width - 40 && fontSize > 24) {
    fontSize -= 2;
    ctx.font = `${fontSize}px ${TYPED_FONT}`;
  }

  ctx.textAlign = 'center';
  ctx.textBaseline = 'middle';
  ctx.fillStyle = penColor;
  ctx.fillText(text, canvas.width / 2, canvas.height / 2);
}

Two gotchas here:

1. Load the font explicitly. Don't assume Dancing Script is on the user's system. Load it via <Head> in Inertia:

<Head>
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link
    href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@600&display=swap"
    rel="stylesheet"
  />
</Head>

2. Export the same format as the drawn version. Call canvas.toDataURL('image/png') in both modes. Your backend then has a single format to handle. The user picks between Draw and Type via a <SegmentedControl>, and the output is identical from the server's perspective.

4. The signed payload — keep it boring

OfferSignature::create([
    'offer_id'       => $offer->id,
    'signer_name'    => $request->input('signer_name'),
    'signer_email'   => $request->input('signer_email'),
    'signature_data' => $request->input('signature_data'), // PNG dataURL
    'ip_address'     => $request->ip(),
    'user_agent'     => $request->userAgent(),
    'signed_at'      => now(),
]);

$offer->update([
    'status'      => OfferStatus::Accepted,
    'accepted_at' => now(),
]);

IP + user agent + timestamp is the legal audit trail. You don't need a blockchain. You don't need KBA. For employment offers, this is the standard the US ESIGN Act and EU eIDAS Simple Electronic Signature actually require. Ask a lawyer for your jurisdiction before you believe me, but the legal bar is much lower than the SaaS marketing suggests.

5. The signed PDF — generate it, store it, forget it

Once the candidate signs, kick off a job that:

Renders the letter HTML to PDF (I use spatie/browsershot).
Embeds the signature image at the bottom with the signer's name, typed timestamp, and IP.
Stores it in object storage (Cloudflare R2 in my case — free egress is the whole game).
Makes it downloadable from both the employer dashboard and the candidate's public URL.

class GenerateOfferPdfService
{
    public function generateAndStore(Offer $offer): string
    {
        $html = $this->renderHtml($offer);
        $pdf  = Browsershot::html($html)->format('A4')->pdf();

        $path = "offers/{$offer->id}/signed.pdf";
        Storage::disk('r2')->put($path, $pdf);

        return $path;
    }
}

6. The pipeline trigger — where the magic actually is

Here's the bit that separates "e-signature tool" from "offer-letter workflow." When the candidate signs, I also fire a state transition on the job application:

public function execute(Offer $offer, array $signatureData): void
{
    // ... create signature, update status ...

    $application = $offer->jobApplication;
    if ($application) {
        $hiredStage = $application->job->stages()
            ->where('slug', 'hired')
            ->first();

        if ($hiredStage) {
            $application->update(['status_id' => $hiredStage->id]);
        }
    }
}

The candidate slides from "Offer Sent" to "Hired" in the Kanban board the moment they sign. The employer doesn't touch anything. This one line of code is the reason "offer letter as a feature of the ATS" is 10x better than "offer letter as a standalone SaaS."

The lesson

The interesting part of building this wasn't any single piece. It was that the seams between pieces are where products actually differentiate. A standalone e-signature tool can't move a candidate to "Hired" because it doesn't know what a pipeline is. A standalone ATS can't reliably track a signed offer because it doesn't own the signing surface. Owning both means you get to delete five manual steps from the workflow, and nobody else can.

If you're building in a mature SaaS market and you can't find a differentiator — look at the integrations your users are duct-taping together, and build one of them natively. The seams are where the leverage lives.

I'm Zakir, solo founder of JuggleHire. We shipped this feature yesterday and launched it on Product Hunt today. If you want to see the flow in action or roast my code, the app is at jugglehire.com.

Non-technical write-up on the "why" is on my blog.

I Built an AI Changelog Tool in 3 Days — Looking for Beta Testers

Zakir Hossen — Tue, 17 Feb 2026 13:09:08 +0000

Hey Dev community! 👋

I just mass launched ShipTell after 3 days of intense building (9 hours today alone).

What is ShipTell?

An AI-powered changelog generator for developers and founders.

The flow:

Connect your GitHub repo
AI reads your commits/PRs
Generates a polished changelog
Publish to a public page or embed on your site

Why I Built This

I'm a solo founder running multiple SaaS products. I ship features constantly but always neglect changelogs.

Sound familiar?

Users deserve to know what's new. We deserve a tool that doesn't make it feel like a chore.

Tech Stack

• Laravel + React (Inertia.js)
• PostgreSQL
• GitHub OAuth
• AI for content generation
• Tailwind CSS

Looking for 10 Beta Users

If you:

• Ship code regularly
• Want to communicate updates to users
• Hate writing changelogs manually
I want your feedback.

Try it free: shiptell.com (https://shiptell.com/)

Drop a comment if you're interested! 🚀

How I Built a SaaS with Laravel + React + Inertia.js (Full Stack Breakdown)

Zakir Hossen — Thu, 05 Feb 2026 08:56:20 +0000

I've been building JuggleHire—a hiring tool for small teams—for 2.5 years. Here's the stack and why I chose it.

The Stack

Backend:

Laravel 12 (PHP 8.3)
MySQL
Redis (queues + caching)
Laravel Horizon for queue management

Frontend:

React 19
Inertia.js v2 (the glue)
Mantine UI components
Tailwind CSS v4

Infrastructure:

DigitalOcean
Laravel Forge
GitHub Actions for CI/CD

Why Inertia.js?

I wanted SPA-like speed without building a separate API. Inertia lets me:

Use Laravel routing and controllers
Return React components instead of Blade views
Get client-side navigation without managing API endpoints
Keep authentication simple (session-based)

It's not perfect for every use case, but for a B2B SaaS with authenticated users, it's ideal.

The AI Features

Using OpenAI's API (GPT-4o-mini) for:

Candidate summaries
Match scores
Job description generation
Interview questions
Email templates

I built a credits system so users don't get unlimited API calls. 50,000 credits = ~500 candidate summaries.

Lessons Learned

Livewire → React migration was painful but worth it. The UI is way more responsive now.
Inertia v2's deferred props are game-changing. Load the page fast, fetch heavy data after.
AI features are table stakes now. Users expect them.
Solo founder = ruthless prioritization. I can't build everything.

Just Launched on Product Hunt

If you want to see it in action:

PH: https://www.producthunt.com/posts/jugglehire-2/
LTD: https://jugglehire.com/lifetime-deal (20 spots, $99)

Happy to answer questions about the stack or the build process.

I built a SaaS using Laravel, Livewire & Tailwind CSS

Zakir Hossen — Tue, 05 Mar 2024 15:34:59 +0000

Introduction

In the fast-paced world of modern business, finding and managing talent efficiently is a challenge that many entrepreneurs face. This is where JuggleHire, our innovative SaaS platform, steps in to revolutionize the hiring process. JuggleHire is a comprehensive solution designed by the visionary team at Templatecookie and Lomeyo, spearheaded by CEO & Founder Zakir from Dhaka, Bangladesh.

What is JuggleHire?

JuggleHire is a cutting-edge SaaS (Software as a Service) platform tailored to streamline and simplify the hiring process for businesses of all sizes. From talent acquisition to collaboration, JuggleHire is a one-stop solution that empowers entrepreneurs and hiring managers to build their dream teams efficiently.

Tech Stack Overview

Backend Framework - Laravel v10:
- Laravel has been the backbone of JuggleHire, providing a robust and elegant framework for our SaaS application.
Frontend Framework - Livewire v3, Alpine.js, and Tailwind CSS & Tailwind UI:
- The combination of Livewire, Alpine.js, and Tailwind CSS & Tailwind UI allows for a seamless and visually appealing user experience.
Database - MySQL:
- MySQL serves as our reliable database management system, ensuring data integrity and optimal performance.
Server Management - DigitalOcean:
- DigitalOcean is our preferred platform for server management, offering scalability and reliability in the cloud.
Web Server - Caddy Server:
- Caddy Server handles sub-domain routing and automatic SSL generation, enhancing the security and performance of JuggleHire.
Text Editor - Trix:
- Trix provides a user-friendly and feature-rich text editing experience within JuggleHire.
Charting - Chart.js:
- Chart.js enables dynamic and visually appealing charts, enhancing data visualization for better decision-making.
Analytics - Posthog:
- Posthog plays a pivotal role in tracking user behavior, providing valuable insights for continuous improvement.
Fonts - Google Font:
- Google Font contributes to the aesthetic appeal of JuggleHire, ensuring visually pleasing typography.
Additional JS Libraries:
- Moment.js for efficient date and time handling.
- Choices.js for select functionality.
- Tippy.js for tooltip integration.

Supporting Tools and Services

Customer Support and Chatbot - Clickconnector:
- Clickconnector streamlines customer support and engagement, providing a seamless chatbot experience.
Roadmap Software - ProductLift.dev:
- ProductLift.dev guides us through the product development roadmap with effective planning and collaboration.
Video Tutorial - Loom:
- Loom empowers us to create engaging video tutorials, facilitating a better understanding of JuggleHire's features.
Email Marketing - Loops.so:
- Loops.so executes targeted email marketing campaigns, fostering user engagement and retention.
Transaction Email - Postmark:
- Postmark ensures reliable delivery of transactional emails, enhancing communication efficiency within JuggleHire.
Caching - Redis:
- Redis provides robust caching mechanisms, optimizing the performance and responsiveness of JuggleHire.
Design and Collaboration - Figma & Figjam:
- Figma & Figjam serve as our virtual design studio, promoting collaboration and creativity among the design and development teams.

Conclusion

JuggleHire SaaS stands at the forefront of innovation, redefining the hiring landscape with a powerful tech stack and a user-centric approach. As we continue to evolve and enhance our platform, our commitment to revolutionizing the hiring experience remains steadfast. To learn more about JuggleHire, Visit JuggleHire