How I Built a Zero-Registration Free Invoice Maker for Freelancers

Tushar Imran — Mon, 29 Dec 2025 06:07:27 +0000

As a developer and freelancer, I’ve always found it annoying to sign up for a complex accounting tool just to send a simple invoice. Most "free" tools have hidden limits or watermarks that ruin the professional look.

To solve this for myself and the community, I built FreeOnlineInvoiceMaker.com.

Why did I build this?
The goal was simple: Speed and Privacy.

No Sign-up: You don't need to give your email or create an account.
Privacy First: Your data stays in your browser session while you generate the PDF.
Professional Output: Clean, minimalist PDF designs that look great for clients.

The Tech Stack
I used Laravel for the backend logic because of its robustness and ease of handling PDF generation. I wanted the UI to be extremely lightweight so that even on a slow connection, a freelancer could generate an invoice in under 60 seconds.

Key Features:

Instant PDF download.
Custom logo upload.
Supports multiple currencies.
100% Free with no hidden catch.

I’m sharing this tool today to get some feedback from this amazing community. If you are a freelancer, please give it a try for your next billing!

Check it out here: https://freeonlineinvoicemaker.com

I'd love to hear your thoughts: What other features should I add? (e.g., Tax calculations, recurring items, etc.)

Make a Laravel Blade App Feel Like a Single Page Application (SPA) — Without Vue or React!

Tushar Imran — Sat, 26 Apr 2025 09:36:46 +0000

In a recent project, I wanted to keep my Laravel Blade setup super lightweight — no Vue, no React, no heavy front-end frameworks.
But I still wanted smooth page transitions like a real SPA, without full-page reloads every time users clicked a link.

So, I decided to build a simple AJAX page loader that:

Loads only the page content inside the <main> tag.
Updates the URL without reloading the browser.
Shows a loading spinner while fetching.
Supports browser back and forward buttons!

The result?
✔Lightning-fast page loads.
✔Smooth user experience.
✔Very little JavaScript code.

Let’s dive into how I built it!

Step 1: Write a Small JavaScript

In my app.js, I added a simple AJAX fetch system.

resources/js/app.js

document.addEventListener('DOMContentLoaded', () => {
    const mainElement = document.querySelector('main');

    function showLoader() {
        mainElement.innerHTML = `
            <div class="flex justify-center items-center h-40">
                <div class="animate-spin rounded-full h-10 w-10 border-t-2 border-b-2 border-blue-500"></div>
            </div>
        `;
    }

    function loadPage(url, push = true) {
        showLoader();

        fetch(url, {
            headers: {
                'X-Requested-With': 'XMLHttpRequest'
            }
        })
        .then(response => response.text())
        .then(html => {
            const parser = new DOMParser();
            const doc = parser.parseFromString(html, 'text/html');

            const newContent = doc.querySelector('main')?.innerHTML;
            if (newContent) {
                mainElement.innerHTML = newContent;
                if (push) {
                    history.pushState(null, '', url);
                }
            }
        })
        .catch(err => {
            console.error('Page load failed', err);
            mainElement.innerHTML = `<div class="text-center text-red-500 p-4">Page failed to load.</div>`;
        });
    }

    document.body.addEventListener('click', e => {
        const link = e.target.closest('a[data-link]');
        if (link) {
            e.preventDefault();
            const url = link.getAttribute('href');
            loadPage(url);
        }
    });

    window.addEventListener('popstate', () => {
        loadPage(location.pathname, false);
    });
});

Step 2: Update Blade Links

Every link you want to load via AJAX should have the data-link attribute:

<a href="/dashboard" data-link>Dashboard</a>
<a href="/profile" data-link>Profile</a>
<a href="/settings" data-link>Settings</a>

When users click, the page content will update instantly inside <main>, without a full browser reload!

Step 3: (Optional) Improve UX with a Spinner Loader

Before fetching a page, I display a simple CSS spinner using Tailwind CSS:

<div class="flex justify-center items-center h-40">
    <div class="animate-spin rounded-full h-10 w-10 border-t-2 border-b-2 border-blue-500"></div>
</div>

This gives users feedback that something is happening — no more "dead time" during slow network requests.

Final Result

✔Fast, smooth page loads.
✔Real URL updates (so users can bookmark/share pages).
✔Browser Back and Forward buttons work correctly.
✔Tiny JavaScript — no extra libraries needed!
✔Laravel Blade templates still do all the heavy lifting

All with just plain Laravel, Blade, and a little JavaScript!

If you're building a Laravel app and don't want the complexity of a full frontend framework, I highly recommend trying this out!