DEV Community: Mirza Munawar

How I Built a 100/100 Lighthouse React SPA for Trading Education from Scratch 🚀" published

Mirza Munawar — Wed, 19 Aug 2026 10:49:09 +0000

Building a modern web application is easy. Building one that scores a perfect 100/100 on Google Lighthouse across Performance, Accessibility, Best Practices, and SEO? That requires obsessing over the details.

Recently, I launched
Order Block Trading
, an educational platform designed to teach retail traders how to navigate the markets using institutional concepts (Smart Money Concepts). But this post isn't about finance—it's about the technical journey, the bottlenecks I hit, and the architectural decisions that made this platform blazing fast.

Here’s a deep dive into how I built it, the performance traps I fell into, and how I fixed them.

🛠️ The Tech Stack
I wanted a stack that was lightweight, fast, and easy to deploy without massive cloud overhead.

Frontend: React (bootstrapped with Vite)
Backend: Node.js with Express
Database: SQLite (using better-sqlite3)
Styling: Vanilla CSS (No bloated UI frameworks)
Why SQLite? Because for a content-heavy application where read operations vastly outnumber write operations, SQLite is incredibly fast. Using better-sqlite3 allowed me to write raw, synchronous SQL queries without the overhead of heavy ORMs.

🏎️ The Quest for 100/100 Performance
The trading education space is notorious for slow, ad-heavy WordPress blogs. I wanted Order Block Trading Academy to feel frictionless. However, getting there required solving several major performance bottlenecks.

The React.lazy() Code Splitting Epiphany Initially, my entire React application was bundled into a single massive chunk. The public-facing site was fast enough, but I had built a robust Admin panel that included heavy dependencies like react-md-editor (for writing articles) and pdfjs-dist (for reading resources).

Because they were in the main bundle, a user visiting the homepage had to download megabytes of Markdown parser code just to view the hero section!

The Fix: I wrapped all my routes in React.lazy and Suspense.

javascript

import { lazy, Suspense } from 'react';
const Home = lazy(() => import('./pages/Home'));
const ManageArticles = lazy(() => import('./pages/admin/ManageArticles'));
// ... inside the router
}>

} />
} />

This instantly isolated the heavy Admin dependencies into separate chunks. The initial payload dropped drastically, and the homepage Time to Interactive (TTI) became virtually instantaneous.

The Promise.all Trap (A Lesson in FCP) In my global DataContext.jsx, I needed to fetch categories, articles, and forum threads on mount. Being a "smart" developer, I decided to fetch them in parallel to save time:

javascript

// The Bad Approach
const [resCats, resArts, resForums] = await Promise.all([
fetch('/api/categories'),
fetch('/api/articles'),
fetch('/api/forums') // This endpoint was heavy!
]);
setIsInitialized(true); // Unblocks the UI
This looked great on my local machine. But when I throttled the network to "Slow 4G" to simulate mobile users, my First Contentful Paint (FCP) spiked to 4.9 seconds!

By using Promise.all and blocking the UI (isInitialized), I forced the app to wait for the slowest API call (the heavy forums) before rendering anything. The Homepage didn't even need the forums data!

The Fix: I split the data fetching into Critical and Non-Critical blocks.

javascript

// 1. Fetch critical data needed for first paint
await Promise.all([fetch('/api/categories'), fetch('/api/articles')]);
setIsInitialized(true); // UNBLOCK THE UI IMMEDIATELY!
// 2. Fetch non-critical data in the background
fetch('/api/forums').then(...);
By letting the critical data unblock the UI, the FCP dropped to under 1 second on mobile.

Image Optimization & Layout Shifts (CLS) Images are always the silent killers of performance. I had several raw, unoptimized JPEGs in my src/assets folder totaling over 3MB. To fix this, I created a strict workflow:

Offloading: I wrote a Node script to interact with the ImgBB API, moving all heavy assets off my local server and onto a CDN.
Preventing CLS: I ensured every single tag had explicit width and height attributes to reserve space in the DOM before the image loaded, eliminating Cumulative Layout Shift (CLS).
🧠 Programmatic SEO: Automating Internal Linking
As the platform grew, I realized manually adding internal links to my 2000+ word Markdown articles was unsustainable. Internal linking is crucial for SEO, so I wrote a custom Node.js script to automate it.

The challenge: How do you replace keywords (like "Order Block" or "Fair Value Gap") with markdown links, without accidentally corrupting existing links or image tags?

I avoided complex regex negative lookaheads and used a simpler approach: splitting the string by Markdown links first.

javascript

// Extract all text, split by markdown links/images
const parts = articleContent.split(/(!?[.?](.?))/g);
for (let i = 0; i < parts.length; i++) {
// Only apply keyword replacement to plain text (even indices)
if (i % 2 === 0) {
parts[i] = parts[i].replace(/\b(Order Blocks?)\b/gi, 'Order Block');
}
}
const newContent = parts.join('');
This script ran through my entire SQLite database in milliseconds, flawlessly hyperlinking every technical term to its respective guide.

🎯 Conclusion
Building Order Block Trading Academy reminded me that performance is a feature. You don't always need Next.js or a massive cloud architecture to build a fast application. A raw React SPA, powered by Vite and a clean Express/SQLite backend, can achieve perfect Lighthouse scores if you respect the fundamentals:

Don't block the critical rendering path.
Code-split aggressively.
Automate your SEO and image optimizations.
If you’re interested in checking out the speed (or learning a bit about institutional trading), check out the live platform here: [Link to Project]

I'd love to hear your thoughts on these optimization strategies in the comments! 👇

https://orderblocktrading.com

PDF Editor with Signature: Top 5 Free PDF Signature Tools in 2026

Mirza Munawar — Tue, 11 Aug 2026 16:50:22 +0000

Whether you are dealing with employment contracts, lease agreements, purchase orders, or school permission slips, you will regularly find yourself needing to do two things: edit a PDF's content or forms, and place a signature on it.

Unfortunately, many of the tools that rank as a "pdf editor signature" utility are deceptively paid. They let you upload your file, spend 10 minutes typing in form fields, and then demand a credit card or add an ugly watermark over your signature before letting you download the signed document.

In this guide, we review the top 5 completely free tools that let you edit and sign PDFs without forcing you into expensive subscriptions or violating your document privacy.

How We Evaluated the Tools
To find the best free PDF editors with signature support, we tested dozens of applications against four key criteria:

Free Tier Usability: Are there hidden costs, daily task limits, or watermarks applied to the output PDF?
Data Privacy: Does the tool upload your sensitive legal contracts to a remote cloud server, or does it process files locally?
Editing Features: Can you fill out forms, insert text blocks, and draw or type clean signatures?
Cross-Platform Compatibility: Does it work seamlessly on Windows, macOS, Android, and iOS?

MyDigitSign — Best for Browser-Based Privacy & Signing (100% Free) MyDigitSign was built specifically to solve the data privacy issues inherent in traditional online PDF signing tools. Most websites force you to upload your confidential files to their servers. MyDigitSign operates on a local-first client-side architecture: all PDF parsing, editing, and signature placement happen inside your browser using WebAssembly. Your documents never cross the internet.

Why We Recommend It:
100% Free: No daily limits, no account registrations, and no credit cards.
Absolute Privacy: Since files are processed locally, it is ideal for corporate agreements, NDAs, tax forms, and medical records.
Rich Signature Options: Draw your signature freehand, type your name in cursive, or upload a scanned PNG image of your physical signature.
Form Filling: Easily add text blocks, checkmarks, and custom dates to fill out any form before signing.
Limitations:
Focuses on form filling, signature, merging, and compression. It does not support modifying existing PDF text (e.g. deleting a paragraph in the original document layout).

Sejda PDF — Best for Direct Text Editing (With Limits) Sejda is one of the few web-based editors that actually lets you click on existing text in a PDF and modify it. It also includes an excellent signature tool that lets you draw, type, or upload signatures.

Why We Recommend It:
Allows full editing of original PDF text, not just adding new text overlays.
Clean, modern interface that is easy to navigate on desktop and mobile.
Integration with cloud drives like Google Drive and Dropbox.
Limitations:
The free tier is heavily restricted: you are limited to 3 tasks per day, documents up to 50MB, and files under 200 pages.
Your files are uploaded to Sejda's servers (though they claim to delete them after 2 hours).

PDF24 Creator — Best Free Offline Toolkit (No Limits) PDF24 is a German-developed suite of PDF utilities that is completely free with zero limitations. It is available as both a web version and a downloadable offline desktop application for Windows.

Why We Recommend It:
100% free with no file size, page, or daily limits.
The desktop version operates completely offline, providing excellent privacy.
Includes dozens of additional tools: OCR, page extraction, conversion, and compression.
Limitations:
The user interface is dated and can feel clunky compared to modern web apps.
The offline desktop installer is only available for Windows (Mac users must use the web version).

iLovePDF — Best User Experience & Speed iLovePDF is one of the most popular PDF platforms in the world. It provides a beautiful interface and extremely fast processing for everyday tasks like merging, splitting, and signing PDFs.

Why We Recommend It:
Beautiful, polished interface that makes signing documents a breeze.
Allows you to request signatures from others (though this is limited on the free tier).
Excellent mobile apps for iOS and Android.
Limitations:
Free tier imposes limits on file sizes and the number of signatures.
Requires uploading your document to their servers for processing.

Okular — Best Open-Source Offline Editor Okular is a universal document viewer developed by the KDE open-source community. It is free, open-source, and runs on Linux, Windows, and macOS. It supports digital signatures using cryptographic certificates.

Why We Recommend It:
Completely free and open-source with no tracking or advertising.
Supports advanced cryptographic digital signatures (using PKCS#12 certificates).
Runs offline on your machine for complete security.
Limitations:
Steep learning curve; the interface is designed like a traditional desktop document editor.
No web-based version; must be installed locally.
How to Edit & Sign PDF Online Free (Using MyDigitSign)
If you have a form that you need to fill out and sign right now, here is the easiest way to do it for free without uploading your document:

Go to Free PDF Editor.
Select your PDF file from your device.
Use the Text tool to click anywhere on the document and type in your name, date, address, or other form details.
Click the Sign button. Draw your signature or type it in cursive.
Position the signature onto the signing line, adjust the size, and click Download. Your browser instantly generates the completed PDF locally.
Summary: Which Tool is Best For Your Needs?
To choose the right tool, match it to your specific situation:

For maximum privacy and everyday signing: Use MyDigitSign. It is free, fast, and does not upload your document to any servers.
If you need to change original text in the PDF: Use Sejda PDF (keeping in mind the 3-tasks-per-day limit).
If you need an offline toolkit for Windows: Download PDF24 Creator.

free web tools massimage.com

Mirza Munawar — Wed, 29 Jul 2026 19:32:53 +0000

check it out- 100% free web tools https://mydigitsign.com/blog/how-to-ask-someone-to-sign-nda

Mirza Munawar — Wed, 29 Jul 2026 19:31:19 +0000

How to Ask Someone to Sign an NDA (3 Email Templates + Tips) | MyDigitSign

Asking someone to sign a Non-Disclosure Agreement (NDA) can feel awkward. Whether you are hiring a freelancer, discussing a joint venture, or interviewing ...

mydigitsign.com

What is the best free tool to sign a PDF online without creating an account?

Mirza Munawar — Mon, 27 Jul 2026 05:43:53 +0000

If you need a fast and secure way to sign on document online without dealing with paywalls or forced account registrations.

Most online PDF signers (like DocuSign or Adobe) offer a "free trial" but eventually lock you out or force you to upload your sensitive documents to their cloud servers. MyDigitSign is different because it is a 100% client-side tool. This means your browser does all the work locally, and your files never actually leave your computer.

If you are looking for where to get digital signature certificate services quickly, here is why MyDigitSign is the best option right now:

No Account Required: You literally just open the website and start signing. No email signup, no credit cards.
It's Actually Free: You can generate a free signing certificate and download your finalized PDF without hitting a hidden paywall.
Total Privacy: Because your files aren't uploaded to external servers, your sensitive data (like NDAs or tax forms) stays private.
Customizable: You can type your name to generate a cursive digit sign, use your mouse/touchscreen to draw it, or just upload a picture of your physical signature.
You can try it out directly at MyDigitSign It is by far the fastest and safest tool available for handling quick digital paperwork.

Why I Built a 100% Private PDF Signer (No Server Uploads)

Mirza Munawar — Sun, 19 Jul 2026 11:35:49 +0000

I recently had to sign a rental agreement. Like most people, I looked for an online tool to get it done quickly. But as soon as I dragged my PDF into the browser, a warning light went off in my head.

Why am I uploading my lease, complete with my address, ID details, and signature, to some random company's server?

Even worse, after uploading, the site blocked me with a paywall. It wanted me to create an account and subscribe just to place one signature.

I got frustrated. So, I decided to build my own solution: MyDigitSign.

Here is why I made it entirely client-side, how it works under the hood, and how you can build something similar.

The Privacy Problem with Online Signing

Most PDF signature websites work like this:

You upload your document to their backend server.
The server processes the document.
The frontend lets you position your signature.
The server merges the file and lets you download it.

This setup is a security nightmare. If that company gets breached, your private legal documents are exposed.

With MyDigitSign, I wanted a strict rule: Zero server uploads.

The app runs on Next.js, but the backend server never touches your files. The moment you load the page, the entire signature engine runs locally inside your browser. Your documents stay on your computer.

How it Works (Under the Hood)

The application uses standard browser APIs and Next.js to handle the heavy lifting.

1. Creating the Signature

I built a clean signature pad that gives users three options to create a digital signature certificate:

Draw: Use your mouse or touchscreen to draw a signature on an HTML5 canvas.
Type: Type your name and map it to elegant cursive web fonts.
Upload: Import an existing image of your signature.

The signature is then exported as a transparent PNG.

2. Local Rendering

When you select a document, the app renders it directly in your browser. We load the signature image as a draggable, resizable layer on top of the document. You can place the pdf editor signature exactly where you want it.

3. Client-Side Export

When you click download, the app modifies the document data structure locally inside the browser. It injects the signature image at the exact coordinates you chose and triggers a native file download.

Is it Legally Binding?

This was my biggest concern. Are electronic signatures acceptable for real contracts?

After researching the legal frameworks, the answer is a clear yes. Under major laws like the ESIGN Act in the US and eIDAS in the European Union, self-generated electronic signatures are legally valid for the vast majority of business, freelance, and personal agreements.

You do not need a paid service to sign document for free online.

Try It Out

MyDigitSign is completely free, does not require any registration, and is open-source.

Live Web App: https://mydigitsign.com
Source Code: GitHub Repository

If you need to edit and sign PDF files privately, give it a try. I would love to hear your feedback in the comments!

MyDigitSign — Free Online PDF Signer & Digital Signature Tool (No Uploads) Sign PDFs online free. 100% client-side digital signature tool. Draw, type, or upload signatures. Your confidential files never leave your device. https://mydigitsign.com/

Mirza Munawar — Mon, 06 Jul 2026 07:42:49 +0000

MyDigitSign — Free Online PDF Signer & Digital Signature Tool

Sign PDFs and documents online for free. Draw, type, or upload your signature. 100% browser-based — your files never leave your device. No account required.

mydigitsign.com

Simple, secure digital document signing and management.

Mirza Munawar — Sat, 04 Jul 2026 07:05:43 +0000

Enterprise e-signature software is often bloated, expensive, and hard to use. SignFlow is a lightweight alternative that lets you upload, sign, and manage certificates securely without the steep learning curve.
https://mydigitsign.com/

Why Client-Side Signing is the Future of PDF Security

Mirza Munawar — Wed, 01 Jul 2026 07:20:43 +0000

Hi ,

I hope this email finds you well.

I’ve been reading your articles on [Blog Name] about digital security and modern workspace utilities, and I really enjoyed your recent post on [mention a recent article title].

I’m a developer and security enthusiast, and I wanted to pitch an article that I think would highly benefit your audience:

Title: Why Client-Side Signing is the Future of Document Security (And How it Protects Your Data)

In this article, I will cover:

The hidden risks of standard cloud-based PDF signing platforms (data exposure in transit).
How HTML5 Canvas and libraries like pdfjs/pdf-lib compile signatures 100% locally in-browser.
Easy best practices for businesses to verify document integrity.

It's a highly actionable, technical-yet-accessible read (~600 words) with zero sales pitches. I've already drafted a clean version of the post.

Would you be open to reviewing the draft for a guest post placement on [Blog Name]?

Best regards,

[Mirza Ali]

Developer, MyDigitSign

https://mydigitsign.com