Forem: Alish Giri

A better architecture

Alish Giri — Tue, 05 May 2026 18:15:00 +0000

If you have not understood by now then let me remind you the time you or your team went down through all those codes you wrote few months or years ago and now you have to do that all over again.

This is a very common pattern with established systems. Improvement work is either done or skipped due to higher risk rate. And only selected portion of the work is pushed forward.

This is a where most systems go down the rabbit hole!

Every client I have worked with in the past wants to get things done fast. And until it's too late they will keep pushing. Technology changes fast so keeping up with it is the only way to progress otherwise we already know how fast things deprecate. And messy code cannot be upgraded without adding more messy code 🤮. This is what happened to a client of mine from Norway.

The only solution to this I have come up with is "A better architecture". If the foundation is strong then only few changes are required to make the upgrade. I do this in practice all the time and have been successful at doing this because of my constant need for improvement.

In two of my past projects I rewrote the entire code because I found something better 😅. Most will call me stupid and they will not be wrong. But the backbone on which I do these changes is rigorous integration testing. I write tests and this becomes my single source of truth for the quality I expect from my code. But now that I have all these experiences, even the major upgrade requires minor tweaks surprisingly due to better architectural understanding.

However, the most important factor we want from the code is higher flexibility. Because things will change. And we want to keep all of our hair intact.

Who cares about speed?

Alish Giri — Mon, 04 May 2026 18:15:00 +0000

After 8 years of software engineering, the one thing I am good at is something that nobody really cares about. This reality has hit me hard many times. Who cares about performance if it costs you slightly more investment. Who cares about architecture if it costs you more. Who cares about 0.35 second of improvement or even 2 seconds of faster load time for that matter.

This was a very strange reality I came across when I began the journey of building products few years back. If you don't find a way to exchange value within few weeks then you really need to start restructuring your path. People in business they are looking for ways to reduce cost and improve their time management. Noting else matters.

The speed and performance is added benefit that is invisible to the users. Slow load times is only a problem when they are fully invested in the system but before getting to a point where your app/system becomes a thing the speed and performance are irrelevant.

However, if the same product is already out there and have proven its worth in the market then now you can present your version of the system specifically focusing on the performance and speed. Because now you are solving problem in the industry that is not just app specific, it is performance and speed specific.

Why did I bring this up? You wonder.

Google wasn't the first search engine; it was just faster and more relevant.
Slack wasn't the first chat app; it was just more integrated and performant.
Stripe wasn't the first payment gateway; it was just the first one that didn't make developers want to quit their jobs.

Nobody cares until the performance and speed becomes a visible problem and that will only happen when the product has already been proven in the market.

One Intelligent Platform

Alish Giri — Mon, 04 May 2026 13:30:21 +0000

Every big organisation in some way utilizes technology but end up with a mess anyway. The solution they choose mostly just covers few problems with multiple systems and leaves out the rest in the hands of their team members. Now the team members are responsible for utilising the system to make the operation smooth.

But is your operation smooth right now?

That's the thing with systems. They are complex! The learning curve, the transition cost and the repetitive work is most of the time avoided and the long term pain is accepted because this is how traditionally we were working right?!

Soon this will evolve. The AI integration is making software intelligent. Not just static code and systems where human interaction was mandatory. The AI will independently work as an employee and will be able to manage your operation effectively.

I manage an AI employee (the early version one) and working on improving it. It's a lot of work and the learning curve is steep but no mountain is big if you are willing to take the first step and look at the subsequent next.

Two tutorials to master Riverpod!

Alish Giri — Fri, 03 Oct 2025 08:51:28 +0000

These two YouTube tutorials are all you need to learn how to use Riverpod in Flutter.

Part 2

Part 1

Flutter + AI: Build an AI Trainer App (2025 Tutorial)

Alish Giri — Sun, 01 Jun 2025 04:58:22 +0000

Do you want to build your own personal trainer using the power of AI?? Then rest assure I have got you covered!!! 💪🏻

Drop and give me 5 before you start!!! 😄

Flutter High Level Simplified Architecture with Riverpod

Alish Giri — Sat, 24 May 2025 02:52:28 +0000

If you have always wanted to switch to Riverpod, then I have got you covered.

I was using Provider for state management for a very long time in Flutter and honestly I was not happy with it. The setup always gave me a nightmare especially if I wanted to have multiple provider's state in a single screen. Furthermore, utilizing one provider in multiple places also required some additional setup that was getting quite annoying.

Despite these issues, I never dared to use Riverpod in production code. I attempted to understand it a few times and was surprised to find out how complex it felt at first. It was not until very recently and after several months of trials and errors that I finally cracked the code and wanted to share this setup with you guys.

I have also attached the entire demo project on the video description so that you can save it for later on. I did not add the link here because watching at least first three chapters is crucial to understanding how Riverpod works.

I hope it helps!

No one talks about GraphQL anymore!

Alish Giri — Sun, 06 Apr 2025 12:59:04 +0000

Let me jump right in, the perfect analogy for describing GraphQL is equivalent to what Typescript is to Javascript. In the REST API, payload and end-points are not typed whereas in GraphQL request and response are pre-determined using specified types and we all know the benefits of having typed languages. This is the core principle of GraphQL with other added benefits.

So why is no one talking about GraphQL anymore?

As you can see in the Postman report below, since the release of GraphQL in 2015 the popularity has just grown significantly. And every developer currently has interacted with GraphQL in one way or another. Due to this, almost all of the experienced developers nowadays find GraphQL as part of their career making it no longer a HOT topic of discussion.

Furthermore, like the way Typescript has become a mandatory thing for most Javascript projects. It is sensible to claim that having typed request/response API is going to be a permanent thing in the future.

Now the question is, will GraphQL be the leader in this space or a new technology will emerge, with much simpler implementation than GraphQL?

Learn more about GraphQL in this post -> Why choose GraphQL over REST API?

One script, one window, multiple attached commands

Alish Giri — Sat, 29 Mar 2025 08:40:08 +0000

Every time I started working on a project I had open up two to three different Terminal windows to start development work 🙄.

One to start the Docker, other to start the server and finally one more to run the frontend. And viewing logs on all these terminal one after the other was also getting annoying so I did some research and found something incredible 🚀.

You can create one script and chain different commands using & to run multiple attached sessions as shown below.

# package.json file

{
    ...
    scripts: {
        ...
        "run:dev": "docker-compose up & (cd path/to/server && ./run/server) & yarn start"
    }
}

The benefits of using this is just out of this world. You will be using one terminal window to view logs from multiple different projects.

And to kill the previous processes in the chain use the following syntax. Ctrl + C will only close the later one.

 # To list all the running processes. Explore how the name works.
ps aux | grep <app_name>

pkill <app_name> # For MacOS & Linux

taskkill -f -im mac-server # For Windows

Flutter Integration Test: Model Driven Architecture

Alish Giri — Mon, 24 Feb 2025 07:47:36 +0000

tl;dr

Please scroll to the last paragraph to get the link to the free video guides to start writing integration test for your Flutter project.

You know how sometimes we end up making changes to our code, and those changes affect parts of the project we didn’t even think about? Well, I’ve been there too. It happened to me when I launched my first commercial app in 2021.

Features change all the time, and it’s tough to make sure everything works after major or minor code changes. And even with unit and widget tests, they weren’t enough to help. It was getting really frustrating to keep the project and the tests in sync. There were just too many changes during development.

Despite all that trouble, I didn’t have the confidence that the app would work like it was supposed to. But then, after three years of experimenting and learning about the testing ecosystem, I came up with a solution: Model Driven Integration Test.

It’s not just about writing the tests; it’s about structuring them in a way that’s scalable and maintainable. And that’s given me a lot of confidence. I can make changes to the Flutter and backend projects without worrying about breaking anything. This testing style has been a lifesaver.

Sometimes, the tests would fail, and they would point out exactly where a feature was failing after making the changes. That was really helpful.

Isn’t that what we’re trying to achieve when we write tests? With every new release, we should have the confidence that 99% of the time, our code will work. And if a bug does appear, I just extend the tests to cover that issue, and now it’s even more stable than before.

I haven’t found any other way to make sure that every new release won’t be a pain. And I’d love to share this with you.

The first few free videos will give you everything you need to know to write integration test for your project and if you want to learn the Model Driven Architecture then you can choose to enroll in the course.

Checkout the course here!

You don't have to memorize get config commands!

Alish Giri — Tue, 28 Jan 2025 10:38:02 +0000

If you modify git configuration more that an average developer then the simplest way to edit git configuration is by opening up the file and modifying the contents directly.

This is super useful if you have two different GitHub accounts, one personal and the other for work. Where you have to update the config file to adjust the signing key, adding suffix to the origin url, along with other informations. This approach mentioned here can save you valuable time if you have a habit like mine to forget the git commands frequently 😄.

You can use the following command to locate your global git config file.

git config --list --show-origin

However, most of the time we want primary account to be the global config and for secondary account we want to have a project based configuration file.

For your current project .git/config is where the config file is stored and this file is a copy of global git config file.

Now, use one of the following command to open up a file and then modify the contents directly.

vim .git/config

nano .git/config

open .git/config -a <your_IDE>

This way you do not have to memorize all sorts of git commands.

SAMPLE CONFIG FILE

[core]
    repositoryformatversion = 0
    filemode = true
    bare = false
    logallrefupdates = true
    ignorecase = true
    precomposeunicode = true
[remote "origin"]
    url = <your_origin>
    fetch = +refs/heads/*:refs/remotes/origin/*
[user]
    name = <username>
    email = <your_email>
    signingkey = XXXXXXXXXXXXXXXX
[commit]
    gpgsign=true
[branch "prod"]
    remote = origin
    merge = refs/heads/prod
    vscode-merge-base = origin/prod
[branch "dev"]
    vscode-merge-base = origin/main
    remote = origin
    merge = refs/heads/dev
[lfs]
    repositoryformatversion = 0

Printing HTML best technique with sample receipt.

Alish Giri — Fri, 10 Jan 2025 13:30:28 +0000

I have been experementing with printing invoices using Javascript and Tailwindcss. After several trials and errors the following is the best configuration I found to get the optimal results.

(optional) Configure Tailwindcss

If you are using tailwindcss to style your invoice then you can set the following configuration to access to 'print' and 'screen' prefixes that you can use to hide/show content based on your requirements.

/** @type {import('tailwindcss').Config} */
export default {
    content: ['./src/**/*.{html,js,svelte,ts}'],
    theme: {
        extend: {
            screens: {
                print: { raw: 'print' },
                screen: { raw: 'screen' }
            },
            // ...
        }
    },
    plugins: []
};

Now you can utilize this as follows:

<div class="screen:bg-red-300 print:bg-white" />

Add this to your primary CSS file

/* This will hide the extra header and footer contents added by the browser. */
@media print {
    @page {
        margin: 0.3in 0.7in 0.3in 0.7in !important;
    }
}

/* Change this as you like */
@media screen {
    html,
    body {
        width: 100vw;
        height: 100vh;
        display: flex;
        overflow: auto;
        background-color: #982b44;
    }
}

Always use a separate route, do not use a pop up window.

Also, set the document title for better experience.

<head>
    ...
    <title>your-file-name</title>
    ...
</head>

document.title = "your-file-name"

Use join('') to hide the unnecessary commas, if you are looping through the items like below.

const tableRows = orders.map((item, index) => {
    // ...
    return `
    <tr class="border-b border-gray-200 break-inside-avoid break-before-auto">
        <td class="max-w-0 py-2 pl-4 pr-3 text-sm sm:pl-0">
            <div class="font-medium text-gray-900"><span class="mr-4 text-gray-500">${index + 1}.</span>${item.name}</div>
        </td>
        <td class="hidden px-3 py-2 text-right text-sm text-gray-500 sm:table-cell">${quantity}${weightUnit}</td>
        <td class="hidden px-3 py-2 text-right text-sm text-gray-500 sm:table-cell">${price}</td>
        <td class="py-2 pl-3 pr-4 text-right text-sm text-gray-500 sm:pr-0"><span class="text-xs">${item.currency}</span> ${total}</td>
    </tr>
    `;
});

and display this as,

<tbody>
    ${tableRows.join('')}
</tbody>

Sample Receipt


export function receiptGenerator(seller: any, order: any): string {
    const panNum = 'XXXXXXXX';
    const companyLogo = // your-company-logo
    const deliveryAddr = order.deliveryAddress;

    let vat = 0.0;
    let subTotal = 0;
    let currency = '';
    const tableRows = order.items.map((item, index) => {
        // ...
        return `
            <tr class="border-b border-gray-200 break-inside-avoid break-before-auto">
                <td class="max-w-0 py-2 pl-4 pr-3 text-sm sm:pl-0">
                    <div class="font-medium text-gray-900"><span class="mr-4 text-gray-500">${index + 1}.</span>${item.name}</div>
                </td>
                <td class="hidden px-3 py-2 text-right text-sm text-gray-500 sm:table-cell">${quantity}${weightUnit}</td>
                <td class="hidden px-3 py-2 text-right text-sm text-gray-500 sm:table-cell">${price}</td>
                <td class="py-2 pl-3 pr-4 text-right text-sm text-gray-500 sm:pr-0"><span class="text-xs">${item.currency}</span> ${total}</td>
            </tr>
        `;
    });
    return `
        <div class="mx-auto my-6 max-w-max rounded bg-white p-6 shadow-sm text-black">
            <div class="grid grid-cols-2 items-center">
                <div>
                <img width="100" height="100" alt="company-logo" src="${companyLogo}" />
                </div>

                <div class="text-right">
                <p>${seller.name}</p>
                <p class="text-sm text-gray-500">${seller.email}</p>
                <p class="mt-1 text-sm text-gray-500">${seller.phoneNumber}</p>
                <p class="mt-1 text-sm text-gray-500">VAT: ${panNum}</p>
                </div>
            </div>

            <!-- Client info -->
            <div class="mt-8 grid grid-cols-2 items-center">
                <div>
                <p class="font-bold text-gray-800">Bill to :</p>
                <p class="text-gray-500">
                    ${deliveryAddr.addressLine1}
                    <br />
                    ${deliveryAddr.state}, ${deliveryAddr.city} ${deliveryAddr.postcode}, ${deliveryAddr.country}
                </p>
                <p class="text-gray-500">info@email.com</p>
                </div>

                <div class="text-right">
                <p class="">
                    Invoice number:
                    <span class="text-gray-500">${displayInvoiceNumber(order.orderNumber)}</span>
                </p>
                <p class="text-sm">
                    Invoice Date: <span class="text-gray-500">${dateTime.objectIdToDate(order.id)}</span>
                    <br />
                    Due Date: <span class="text-gray-500">${dateTime.objectIdToDate(order.id)}</span>
                </p>
                </div>
            </div>

            <!-- Invoice Items -->
            <div class="-mx-4 mt-8 flow-root sm:mx-0">
                <table class="min-w-full break-inside-auto">
                    <colgroup class="break-inside-auto">
                        <col class="w-full sm:w-1/2" />
                        <col class="sm:w-auto" />
                        <col class="sm:w-auto" />
                        <col class="sm:w-1/5" />
                    </colgroup>
                    <thead class="border-b border-gray-300 text-gray-900 table-header-group">
                        <tr>
                            <th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-0">Items</th>
                            <th scope="col" class="hidden px-3 py-3.5 text-right text-sm font-semibold text-gray-900 sm:table-cell">Quantity</th>
                            <th scope="col" class="hidden px-3 py-3.5 text-right text-sm font-semibold text-gray-900 sm:table-cell">Price</th>
                            <th scope="col" class="py-3.5 pl-3 pr-4 text-right text-sm font-semibold text-gray-900 sm:pr-0">Amount</th>
                        </tr>
                    </thead>
                    <tbody>
                        ${tableRows.join('')}
                    </tbody>
                </table>
                <table class="min-w-full">
                    <colgroup>
                        <col class="w-full sm:w-1/2" />
                        <col class="sm:w-auto" />
                        <col class="sm:w-auto" />
                        <col class="sm:w-1/5" />
                    </colgroup>
                    <thead>
                        <tr>
                            <th scope="row" colspan="3" class="hidden pl-4 pr-3 pt-6 text-right text-sm font-normal text-gray-500 sm:table-cell sm:pl-0">Subtotal</th>
                            <th scope="row" class="pl-6 pr-3 pt-2 text-left text-sm font-normal text-gray-500 sm:hidden">Subtotal</th>
                            <td class="pl-3 pr-6 pt-2 text-right text-sm text-gray-500 sm:pr-0"><span class="text-xs">${currency}</span> ${Math.round(subTotal) / 100}</td>
                        </tr>
                        <tr>
                            <th scope="row" colspan="3" class="hidden pl-4 pr-3 pt-2 text-right text-sm font-normal text-gray-500 sm:table-cell sm:pl-0">Tax</th>
                            <th scope="row" class="pl-6 pr-3 pt-2 text-left text-sm font-normal text-gray-500 sm:hidden">Tax</th>
                            <td class="pl-3 pr-6 pt-2 text-right text-sm text-gray-500 sm:pr-0"><span class="text-xs">${currency}</span> ${Math.round(subTotal * vat * 100) / 100}</td>
                        </tr>
                        <tr>
                            <th scope="row" colspan="3" class="hidden pl-4 pr-3 pt-2 text-right text-sm font-normal text-gray-500 sm:table-cell sm:pl-0">Discount</th>
                            <th scope="row" class="pl-6 pr-3 pt-2 text-left text-sm font-normal text-gray-500 sm:hidden">Discount</th>
                            <td class="pl-3 pr-6 pt-2 text-right text-sm text-gray-500 sm:pr-0">-</td>
                        </tr>
                        <tr>
                            <th scope="row" colspan="3" class="hidden pl-4 pr-3 pt-2 text-right text-sm font-semibold text-gray-900 sm:table-cell sm:pl-0">Total</th>
                            <th scope="row" class="pl-6 pr-3 pt-2 text-left text-sm font-semibold text-gray-900 sm:hidden">Total</th>
                            <td class="pl-3  pt-2 text-right text-sm font-semibold text-gray-900 sm:pr-0"><span class="text-xs">${currency}</span> ${Math.round((subTotal + subTotal * vat) * 100) / 100}</td>
                        </tr>
                    </thead>
                </table>
            </div>

            <!--  Footer  -->
            <div class="mt-16 border-t-2 pt-4 text-center text-xs text-gray-500">Please pay the invoice before the due date. You can pay the invoice by logging in to your account from our client portal.</div>
        </div>
    `;
}

Hope this helps! Took me two days to make this perfect!

Launching my first game soon!

Alish Giri — Thu, 21 Nov 2024 10:10:26 +0000

After 7 years of software development I have decided to build my first game.