Most small cafes and food businesses don't fail because of bad food - they struggle because of inefficient operations.

Manual order tracking, missed entries, inconsistent billing, and lack of insights create friction every single day.

I wanted to solve this.

So I built a cross-platform POS (Point of Sale) app using Flutter - focused on speed, simplicity, and real-world usability.

The Problem

In many small setups:

• Orders are tracked manually or loosely
• Missed orders = lost revenue
• No visibility into daily sales or top items
• Billing is inconsistent
• Printing is unreliable or unavailable
• Apps don't work across devices (Android, desktop, etc.)

What they need is not a "complex ERP system".

They need:
Fast. Simple. Reliable.

The Solution

A lightweight POS system that handles:

• Order creation (with variants)
• Billing & receipt printing
• Sales tracking
• Backdated entries (for missed orders)
• Works across multiple platforms

Built entirely using Flutter, with Supabase as backend

Core Features

1. Smart Order Management

• Add items quickly with search & suggestions
• Support for variants (e.g., Steamed & Fried)
• Same item with different variants treated separately
• Custom items supported (non-menu entries)

This allows flexibility without breaking structure.

2. Accurate Pricing Engine

Each order item calculates:
Total = Quantity x (Base Price + Variant Price Delta)

This ensures:

• Transparent billing
• Correct totals even with customizations

3. Receipt Printing (ESC/POS)

One of the most importatnt parts of any POS
The app supports:

• Bluetoot / USB printers
• 58mm / 72mm / 80mm thermal printing
• QR-based payments (UPI)
• Structured receipts with:
  • Items
  • Variants
  • Totals
  • Branding

And importantly:
Reliable printing with chunked writes (avoiding buffer crashes)

4. Sales & Analytics Dashboard

Not just order-taking -- decision-making

The app provides:

• Revenue for selected date range
• Total orders
• Average order value
• Top-selling items

This helps answer:
What sells the most?
What earns the most?

5. Backdated Orders

In real operations:
Orders get missed.

So the app allows:

• Selecting a custom date while creating/editing orders
• Logging past entries acurately

This is critical for

• Daily reconciliation
• Accounting accuracy

6. Intelligent Search & Suggestions

Typing: "Cola"
Matches: "Coca Cola"
With:

• Highlighted matches
• Price autofill
• Fast entry workflow

7. Adaptive UI (Speed-first Design)

Designed for fast interaction:

• Draggable cart (collapsed -> expanded)
• Sticky total bar
• Variant selection sheets
• Minimal navigation

Everything is optimized for:
Tap -> Decide -> Complete

8. Dark Mode & Theming

• Fully theme-driven UI
• Consistent design system
• Works across light/dark modes

9. Accesibility Handling

Instead of breaking layouts on large font sizes:

• Text scaling is clamped intelligently
• Layouts use flexible constraints
• Critical UI remains usable

Balancing:
Accessibility × Usability

10. Sound & Haptics (POS Feedback)

• Click sound on item add
• Success / error feedback
• Low-latency playback for rapid taps

This creates a responsive, tactile experience

Multi-Platform by Design

Built with Flutter, the app runs on:

• Android, iOS (primary POS device)
• Linux, Windows (desktop POS setup)
• Web

This enables:
Same codebase -> multiple environments

Perfect for growing businesses

Tech Stack

• Flutter -> UI + cross-platform
• Supabase (Postgres) -> backedn + RPC
• ESC/POS printing -> hardware integration
• Hive -> local caching
• Custom design system -> consistent UI

Key Engineering Decisions

1. RPC-driven backend

Complex operations (orders + variants) handled in Postgres:
Fewer API calls
Better performance
Cleaner client code

2. Variant-first data model

Instead of duplicating items:
Menu Item + Variant Groups + Options
-> flexible and scalable

3. Chunked printing

Avoids:
Bluetooth buffer overflow crashes
-> stable printing experience

4. Controlled text scaling

Prevents:
Broken layouts on high font sizes
-> production-ready UI

What This App Solves

At its core:
It removes friction from daily operations

• Faster billing
• Fewer missed orders
• Better visibility into sales
• Reliable printing
• Works across devices

What's Next

Possible future improvements:

• Sales charts (daily / weekly trends)
• Category-wise analytics
• Export reports (PDF / CSV)
• Inventory tracking
• Multi-user roles

This project started as a simple POS tool.
But it evolved into: A complete operational system for small food businesses
The focus was never just features -
It was:
Speed, reliability, and real-world usability.

If you're building something similar or exploring Flutter for production apps, I'd love to hear your thoughts.

Hot reloading refers to the process of updating code or resources in a running application without requiring a full restart. This is particularly useful during development or in situations where continuous uptime is crucial.
It allows developers to make changes to their code or assets (such as images, config files) while the application is running, and see those changes reflected immediately without having to restart the application.

When we think of hot reloading we usually think of a dynamic, interpreted programming language like JavaScript or Python.
But we can also achieve hot reloading in C using Dynamic Link Libraries (DLLs)

Dynamic Link Libraries (DLLs) are commonly to provide reusable code that can be shared across multiple applications. One of the advantages of DLLs is their ability to be dynamically loaded and unloaded by programs, which enables features like hot reloading.

Here's how hot reloading typically works:

• Trigger: A trigger is something that causes the reload. It can be a key-event or changes in a file.
• Pre-Reload: It is used to store the state before the reloading.
• Post-Reload: Post-reload is called after the reload.

Let's implement this in C Starting with a main.c file let's write a basic hello world program.

~filename main.c
#include <stdio.h>

int main (void)
{
  printf("Hello World\n");
  return 0;
}

Now we can start implementing module which consists of two files:

• module.h - declarations which will be included in the main file
• module.c - definitions of the functions defined in module.h header file

~filename module.h
#ifndef MODULE_H_
#define MODULE_H_

void (*module_init)(void) = NULL;
void *(*module_pre_reload)(void) = NULL;
void (*module_post_reload)(void *) = NULL;
void (*module_update)(void) = NULL;

#endif // MODULE_H_

Lots of void in this file but we are just declaring the function signature as pointer so that it can be included in the main.c file.

Now let's define these functions in module.c file.

~filename module.c
#include <stdio.h>
#include <stdlib.h>
#include <string.h>
#include <assert.h>

// Defining a struct state that has to be persisted
typedef struct {
  char *name;
} State;

// Declaring a static state variable
static State *state = NULL;

void module_init (void)
{
  // Allocating memory for storing state on heap
  state = malloc(sizeof(*state));
  assert(state != NULL);
  memset(state, 0, sizeof(*state));

  // Setting initial value of state
  state->name = "World";
}

void *module_pre_reload (void) { return state; }

void module_post_reload (void *previous_state) { state = previous_state; }

void module_update (void) {
  printf("Hello %s\n", state->name);
}

Creating a simple shell file for easily compiling these files.

~filename build.sh
#!/bin/bash

# For compiling the module as .so
clang -Wall -Wextra -ggdb -fPIC -shared -o libmodule.so module.c

# For compiling the main program
clang -Wall -Wextra -ggdb -o main main.c

The -fPIC and -shared options are used with clang to generate position-independent code (PIC) and create a shared object library (.so)

Executing this script in shell will compile and generate libmodule.so file (Same as DLL on Windows)

Remember to also give execute permisson to build.sh to be able to execute the script.

Next we include the module.h file in main.c and functions defined in dlfcn.h file to use the generated libmodule.so file.

~filename main.c

// The dlfcn.h contains function to interact with Dynamic linking library
#include <dlfcn.h>
// Including the header file
#include "module.h"

// Path to the generated libmodule.so file
const char* libmodule_path = "./libmodule.so";
// Pointer for storing the module
void *libmodule = NULL;

bool initialize_libmodule (void)
{
  if (libmodule != NULL) {
    dlclose(libmodule);
  }

  // Opening the dynamic source object
  libmodule = dlopen(libmodule_path, RTLD_NOW);

  if (libmodule == NULL)
    return false;

  // Using the dlsym function which returns the address where the
  // symbol (function in this case) is stored in memory
  module_init = dlsym(libmodule, "module_init");
  if (module_init == NULL)
    return false;

  module_pre_reload = dlsym(libmodule, "module_pre_reload");
  if (module_pre_reload == NULL)
    return false;

  module_post_reload = dlsym(libmodule, "module_post_reload");
  if (module_post_reload == NULL)
    return false;

  module_update = dlsym(libmodule, "module_update");
  if (module_update == NULL)
    return false;

  return true;
}

void reload_libmodule (void)
{
  // Storing the previous state before unloading the module
  void *previous_state = module_pre_reload();
  initialize_libmodule();
  module_post_reload(previous_state);
}

int main (void)
{
  if (!initialize_libmodule()) {
    fprintf(stderr, "Error: %s\n", dlerror());
    return 1;
  }

  module_init();
  char ch;
  while (1) {
    module_update();

    printf("Press 'q' to quit | 'r' to reload\n");
    scanf("%c", &ch);

    if (ch == 'q') break;

    // Using keypress 'r' to trigger a reload
    if (ch == 'r') {
      reload_libmodule();
    }
  }
}

Now compile the main program using the build.sh script and running it we get

> ./main
Hello World
Press 'q' to quit | 'r' to reload

Now we can easily udpate the state in module.c and see the updates reflected without the need to re-compile the main program.

~filename module.c
void module_init (void)
{
  // Updating the state
  state->name = "Link";
}

Now we just need to compile module.c file to re-generate libmodule.so
we do this in another terminal since we don't have to close the running main program. We can use the ./build.sh script to compile.
Once compiled we can just enter r in the main program and we can see the name in the state changes.

> ./main
Hello World
Press 'q' to quit | 'r' to reload
Hello Link
Press 'q' to quit | 'r' to reload

Here we are using the 'r' keypress to trigger a reload for simplicity, however we can also trigger reload automatically whenever a change is detected just like in build tools like vite or other development tools.

• Add link to Github gist that dynamically builds without key triggers

Hot reloading demo with Raylib

WebAssembly (Wasm), is a binary instruction format that serves as a portable compilation target for high-level programming languages such as C, C++ or Rust. It is designed to be a low-level virtual machine that runs code at near-native speed in web browsers.
WebAssembly is commonly used to enable the execution of performance-critical tasks, allowing web applications to run complex algorithms with improved efficiency.

One of key goals of WebAssembly is to provide a universal and efficient platform for running code on the web, making it easier for developers to write performance-sensitive components for web applications. It allows languages other than JavaScript to be used in the browser, opening up new possibilites for web development.

In order to compile Rust to wasm we first need to install wasm-pack.
wasm-pack is a tool that makes it easier to integrate Rust code into web projects. It streamlines the process of building, bundling, and publishing Rust and WebAssembly code for the web.

We can install wasm-pack using the following command.

cargo install wasm-pack

Follow this link for more info and other methods to install wasm-pack.

For now we can try to create a small wasm module that calculates fibonacci sequence in wasm. Let's create a new rust project using cargo.

cargo init fibonnaci-wasm

This creates a binary crate.
Next up we need to add wasm-bindgen and add following changes in Cargo.toml file.

~filename Cargo.toml
# ---
[lib]
name = "lib"
crate-type = ["cdylib", "rlib"]

[dependencies]
wasm-bindgen = "0.2.92"
# ---

wasm-bindgen package allows us to use #[wasm-bindgen] macro which generates the necessary glue code to enable seamless interaction between Rust code compiled to Wasm and JavaScript code in web applications. It provides a convenient way to handle data types, function calls, and other interactions between Rust and JavaScript.

In addition to adding wasm-bindgen, we also defined the lib type as "cdylib" which stands for C Dynamic Library and, it indicates the compiled output should be a dynamic library that can be linked with other languages. For WebAssembly target it means to create a *.wasm file without a start function.
We also have to specify the name of lib since we cannot have the same name for binary and lib. The name for lib can be anything.
Also since we created a binary package, we have to add a lib.rs file in `/src/lib.rs`.

Now we can just build the project, which will download all the packages and compile them.

cargo build

Let's write a function which prints fibonacci sequence till a count.

~filename lib.rs
pub fn fibonacci(count: i32) {
    let mut a = 0;
    let mut b = 1;
    let mut c = a + b;

    println!("{}", a);
    for _ in 1..count {
        println!("{}", c);
        c = a + b;
        a = b;
        b = c;
    }
}

and use this function in main.rs

~filename main.rs
use lib::fibonacci;

fn main() {
    let count = 10;
    println!("Fibonacci sequence till: {}", count);
    fibonacci(count);
}

This will print the fibonacci sequence until 10 digits.
Now let's compile this code to wasm. We need to add following lines in lib.rs.

~filename lib.rs
use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn fibonacci(count: i32) {
    // Implementation
}

We can now use wasm-pack for building wasm modules.

wasm-pack build --target web --out-dir web

--target - flag allows us to run directly in browser without needing a bundler like webpack.
--out-dir web - specifies to output the files in web directory, default directory is pkg

- web
  |- .gitignore
  |- lib_bg.wasm
  |- lib_bg.wasm.d.ts
  |- lib.d.ts
  |- lib.js
  \- package.json

lib_bg.wasm - The compiled wasm module.
lib_bg.wasm.d.ts - Declarations and exports from libbg.wasm
_lib.js - Exports js interop functions that can be used to instantiate and call wasm.
lib.d.ts - Declarations for lib.js

Let's add an html file index.html in the web directory and use the exported fibonacci function.

~filename index.html
<!doctype html>
<html lang="en">
    <!--> Include head and meta tags </!-->
    <body>
        <script type="module">
            import init, { fibonacci } from './lib.js';

            let wasm;
            async function run() {
                wasm = await init();
                console.log(wasm);
                fibonacci(10);
            }

            run();
        </script>
    </body>
</html>

Make sure to set the script type as module.

Opening this file in browser and looking at the console window we can see that wasm object is being logged in console. It includes memory and reference to fibonacci function. However we can notice that the fibonacci sequence was not logged into console.

That is because we use the println!() in rust which does not log into browser console.
So in order to log output to console we will have to call JavaScript function from Rust.

First we will create a wrapper function which is reponsible for logging to console.

~filename lib.rs
// function definitions to be implemented by other platforms
#[cfg(target_arch = "wasm32")]
#[wasm_bindgen(module = "/web/log.js")]
extern "C" {
    fn platform_log(message: &str);
}

// Native rust implementation
#[cfg(not(target_arch = "wasm32"))]
fn platform_log(message: &str) {
    println!("{message}");
}

pub fn fibonacci(count: i32) {
    let mut a = 0;
    let mut b = 1;
    let mut c = a + b;

    platform_log(format!("{}", a).as_str());
    for _ in 1..count {
        platform_log(format!("{}", c).as_str());
        c = a + b;
        a = b;
        b = c;
    }
}

Here we defined a platform_log function which is declared twice. Once inside an extern block .
The second declaration is native rust and will be called when building and running the binary.

The first declaration is inside an extern block.
It means that this is foreign function and the has to be implemented for specific platforms during the linking stage.
We use the #[cfg(target_arch = "wasm32")] to include this extern block only when the target_arch = wasm32. Meaning this declaration block is only included when the target-arch is set to wasm32 which happens when we are compiling to wasm.
Next we use #[wasm_bindgen] to include this function in compiled wasm file. we also have an argument module = "/path" which defines the path to a file containing the implementation of the functions in extern block.

The second declaration is the native rust implementation. This is called when we compile and run the native rust binary. And we use the #[cfg(not(target_arch = "wasm32"))] to only include this when building a binary package and not in wasm module.

We also have to implement the platform_log function in JavaScript, so we create a file in /web directory which just wraps the console.log() function in JavaScript.
Make sure to export the functions

~filename log.js
export function platform_log(message) {
    console.log(message)
}

And we are done with the implementation. Now build again using wasm-pack and we can see that the fibonacci sequence is logged to the console.

Output on the Web -

And native -

And that's how we compile Rust to Wasm and use it browser on a webpage.
Here's something more interesting I made using this workflow boids

This is a guide to get started with Opensource contribution on Git. In order to contribute to a repository on Git we first have to create a fork of the repository in our personal Git space.

The project that I will work on is a Chat application. I will work on adding the functionality to support rendering links and opening the URL in another tab, currently it just renders it as a text.

The name of the repo doesn't have to be the same as the original repo

After creating a fork we can clone the repo. I am cloning the repo using SSH.

Next we have to add another remote to the cloned repo. This remote is the repo URL of the original author of the repo. Using this remote we can sync the cloned repo to the latest changes. I have used the HTTPs URL in this case as I only have read access to this repo.

Usually I will just name it same as the author's name

We can check if adding the remote was successful using

git remote -v

Next up we can just pull from the original repo, just to get the latest changes if any before continuing. It is a good idea to stay up to date with the original repo to prevent possibility of merge conflicts.

In order to work on a new feature create a new branch and add the changes and updates in this branch, commit and then push the changes.

These changes are only going to be pushed on the forked repo in our workspace as we don't have the write access to the original repo anyways.

After working on the feature and pushing to the forked repo we can send a pull request to the original repo, adding a descriptive message to the changes made.

The author can then review the changes, and merge the pull request. That's the basic of contributing to a repository on Github, Gitlab or any other VCs. Make sure to also go through the licensing of the repositories.

Recently I have been working on a short project trying out Next.js And I have setup the project with TypeScript. Here's a gist of what the project is - Users can create, share forms, and get responses on the form.

I have a page for creating forms which is wrapped in a React Context that stores the state of the form.

This is the interface of the state of a form. The form consists of a unique id, title, description and an array of questions.

~filename types.ts
interface CreateFormState {
    id: string;
    title: string;
    description: string;
    questions: Question[];
}

Question is defined as a type consisting of fields - id, title and answerType.

type Question = {
    id: string;
    title?: string;
    answerType: AnswerType;
};

The type of Question is a bit more complex than this as I also have to keep track of the state of answers
for example the options of the checkbox/radio the user inputs

AnswerType is type that defines what type of response the question can accept. Depending on the selected answerType a different input component is rendered.
A normal input for short-answer, a list of checkboxes for checkbox-answer, and so on.

type AnswerType 
    = 'short-answer' 
    | 'long-answer' 
    | 'radio-answer' 
    | 'checkbox-answer';

The data is stored using the useReducer hook from React.

const [formData, dispatchFormData] = useReducer(formDataReducer, initialFormState);

Here is the reducer function which specifies how the state gets updated.

function formDataReducer(state: CreateFormState, action: CreateFormAction): CreateFormState {
    const { type, payload } = action;
    switch (type) {
        case CreateFormActionKind.UPDATE_TITLE:
            return {
                ...state,
                title: payload
            };
        case CreateFormActionKind.UPDATE_DESCRIPTION:
            return {
                ...state,
                description: payload
            };
        default:
            return state;
    }
}

[Note]: Not all actions are present in this code snippet.

This is where the TypeScript's type-checking is really helpful. As I can define the type of actions the reducer function can accept and the type of payload that needs be sent when calling the function.

Here are the type of actions that can be performed on the create form state. This is defined as a TypeScript Enum.
These actions define updating the title and description of the form respectively.

enum CreateFormActionKind {
    UPDATE_TITLE = 'UPDATE_TITLE',
    UPDATE_DESCRIPTION = 'UPDATE_DESCRIPTION'
}

Here is the action defining the type of the payload as string when we are updating the title or the description of the question.

type CreateFormAction = {
    type: CreateFormActionKind;
    payload: string;
};

Let's add another action for adding a new question to the questions array of the create form state. For that we need to add a new entry in the CreateFormActionKind enum.

enum CreateFormActionKind {
    UPDATE_TITLE = 'UPDATE_TITLE',
    UPDATE_DESCRIPTION = 'UPDATE_DESCRIPTION',
    ADD_QUESTION = 'ADD_QUESTION'
}

And now let's handle this action in the reducer function.

function formDataReducer(
  state: CreateFormState,
  action: CreateFormAction
): CreateFormState {
  const { type, payload } = action;
  switch (type) {
    ...
    case CreateFormActionKind.ADD_QUESTION:
      return {
        ...state,
        questions: [...state.questions, payload],
      };
    ...
  }
}

But adding this action in the function causes error. Since the type of payload is defined as string in the CreateFormAction and we are trying to push that to the questions array which is of type Question.

To fix this we will have to modify the CreateFormAction a bit.

type CreateFormAction =
    | {
            type: CreateFormActionKind.UPDATE_TITLE | CreateFormActionKind.UPDATE_DESCRIPTION;
            payload: string;
      }
    | {
            type: CreateFormActionKind.ADD_QUESTION;
            payload: Question;
      };

We defined CreateFormAction as Union of types so if -

• ActionKind is UPDATE_TITLE or UPDATE_DESCRIPTION then the type of payload should be string.
• ActionKind is ADD_QUESTION then the type of payload should be Question and we will have to pass a Question object to the function.

And now we should be able to use this action for adding new questions. If we try to call this dispatch function in another component we will know the actions that can be performed on the state, the associated type of payload that the action accepts and we also get the Intellisense and auto-completion if we use an IDE with LSP.

Using this we can add more actions for:

• Updating the title of the question
• Deleting a question from array
• Sorting the questions
• Changing the type of the answer for a question.
• and more...

This may feel like typing extra for defining types, but it helps in narrowing the weird things that may happen during the runtime. Because JavaScript is just a weird language.

So yeah that's how TypeScript makes development easier and accelerates developer productivity.

Learning Vim navigation can be a valuable skill for programmers, writers, and anyone who frequently works with text. It offers a unique approach to editing and navigating text that can significantly improve your productivity and efficiency.

After learning just the basics of Vim navigation it will allow you to navigate, edit, and perform commands with unparalleled speed, effortlessly moving through code or text.

You will be able to navigate and edit without constantly moving your hands away from the keyboard just to select a word or a whole paragraph.

I started to explore ways to easily navigate using a keyboard only when my dad brought a laptop that had a broken touchpad. So I looked for ways to -

1. Open/close windows,
2. Navigate by holding the Ctrl, Home, End,. etc keys
3. Learning commands to start apps or shutdown.

Alright to get started you can either install Vim in your operating system or you can just use an extension in Vs code which could be a good starting point Also you won't have to worry about how to exit Vim since you can just close Vs code directly.

Installation of the Vim plugin

Opening a new file now you will notice the cursor is changed And if you look at the status bar at the bottom you will notice -- Normal -- indicating that you are currently in the normal mode It is the default mode of Vim. It allows you to navigate the text, copy/cut/paste characters, words, and lines, but also roll-back actions, and so on.

Normal mode cursor

The status bar in Vs code indicating the current mode

Basic Navigation

You can use the keys:

• h to move left.
• j to move up.
• k to move down.
• l to move right.

These key presses can be combined with numbers so

• 5j will move the cursor 5 lines down.
• 13l will move the cursor 13 characters to the left.

Navigating around the file using these keys might feel weird at first, but once you get a hang of it you will be able to navigate much quicker.

Navigating in Vscode using the Vim key-bindings

Some other key bindings that make navigating easier.

• w - Jump by the start of words
• W - Jump by the start of words ignoring punctuations . ;.., etc
• e - Jump to the end of words
• E - Jump to the end of words ignoring punctuations . ;.., etc
• b - Jump backward by words
• B - Jump backward by words ignoring punctuations . ;.., etc

Again these keystrokes can be preceded by a number so 2w would jump two words ahead.

A Bit Advanced

• 0 - Jump to the start of the line
• $ - Jump to the end of the line
• G - Go to the bottom of the file.
• gg - Go to the top of the file.
• Ctrl + d - move down half a page.
• Ctrl + u - move up half a page.
• : {num} Enter - Go to that line number in the document.

If you accidentally go into Insert mode while having fun navigating the file using these newly learned powers, then just press Esc to go back to Normal

That covers the basics of navigation using Vim. It may take a few days to get used to this new way of going through your files without using a mouse but it will make your workflow more productive and efficient.

Tunes - Music Player

Tunes is a music player app made using Flutter.

It allows you to browse, play, pause, shuffle and loop music stored locally on your device.
This project was created to learn flutter when it was first released and compare it with existing tool that I used at the time for multi-platform app development - React Native.

It uses the following packages :-
on_audio_query: To query audios/songs metdata from device storage.
just_audio: A feature rich audio player supporting multiple platforms.
shared_preferences: To store user preferences locally.

The design of Tunes is also inspired by the then design trend Glassmorphism. During the time of development of Tunes there was not an easy way to achieve glassmorphic effects in React Native, since it uses native device element as opposed to Flutter which uses a canvas to render things on the screen.

Instead of relying on the platform's native widgets, Flutter has its own set of widgets and a custom rendering engine.

Flutter architectural overview shows the high-level overview of architecture of Flutter.

But in short, Flutter uses the Skia graphics engine to perform the actual painting on the screen. Skia is a 2D graphics library that provides a set of low-level drawing primitives. Flutter uses Skia to draw the graphics for each render object onto the screen. This allows us to add filter or other decoration to any element during rendering.

In order to achieve the glass effect on a widget, I created a custom stateless widget that wraps child in a container with the glass effect. Here's a small snippet of dart code that shows how it works -

~filename /lib/widgets/glass.dart
import 'dart:ui';
import 'package:flutter/material.dart';

class Glass extends StatelessWidget {
  final Widget child;
  final double blurAmount;
  final Color backgroundColor;

  const Glass({
    key? key,
    required this.child,
    this.blurAmount = 14,
    this.backgroundColor = Colors.black,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: BackdropFilter(
        filter: ImageFilter.blur(sigmaX: blurAmount, sigmaY: blurAmount),
        child: child,
      )
    )
  }
}

The project is open source. I haven't maintained it since a long time. And since this was my first flutter project the way the code is structured might not be the most scalable and efficient. But still I use this app from time to time to listen to music on my phone.

TODOs:

• Put links to android build apks.
• Can't build for iOS

Tic-Tac-Toe

A Tic-Tac-Toe multiplayer game made using Svelte for the frontend and Koa, Socket.io for the backend.

The Svelte frontend is used for creating/joining a room.

User can join a room or if the room does not exists a new room will be created.
The user will than be taken to a waiting area or lobby where the server will wait for another player to join in the same room.

Once two players are joined in the same the game will begin after a countdown and the users will be taken to the tic-tac-toe board.

Here the user can play the game during their turn and wait for the opponent's turn.
The player who hosted the room is X and the player who joined the room is O.
User turns are highlighted for the opponent when they hover on a particular cell of the board.

Once there are no more moves left or a user wins the game. The game will be over and input to the board is also disabled.

All the realtime communication such as room creation, joining, player moves and winning/losing are handled by socket.io events and there are no REST APIs used for communication. Many rooms can be created simultaneously, but only 2 players can be in a room together and play the game (Its a two player game..)

Initially I only wanted to work on the game without any multiplayer functionality, but later decided to extend it further and introduce a system of rooms and realtime connectivity.

TODOs

• An action to restart the game when the game is over
• Display the user details and win-lose in the UI
• Allowing users to make a room public or private during the creation of room.
• Listing public rooms on the homepage so anyone can join the room if there are less than 2 players.

Stories.io was the first React project that I made while learning React.js

• React
• MongoDb
• Nodejs
• Design

Pomidoras is a lightweight Pomodoro timer application implemented in C, built with the Raylib graphics library and the Clay Layout library for UI layout. It provides a clean, focused interface for managing work and break intervals using the Pomodoro Technique.

What it does

• Start, pause, and skip Pomodoro work sessions and short/long breaks.
• Audible/visual notification when a session completes.
• Simple settings to adjust durations for work, short break, and long break.
• Minimal, distraction-free UI optimized for quick task cycles.

Why I built it

• To create a compact desktop timer focused on performance and simplicity.
• To learn Raylib for graphics and Clay for declarative layout in C.

Implementation highlights

• Event loop: Single-threaded main loop using Raylib for frame updates and input polling; timers implemented with high-resolution time functions to keep timing accurate even when rendering load varies.
• UI structure: Clay Layout manages containers and spacing, enabling responsive placement of controls and timer visuals with minimal layout code.
• State management: Small state machine tracks modes (Work, Short Break, Long Break), session counts, and paused/running state to determine transitions and long-break scheduling.
• Audio/notifications: Short beep or system notification on session end using Raylib audio playback; and platform-specific notifications.
• Configuration persistence: User settings are persisted in Pomidoras’ own simple settings format, so preferences (durations, theme) are saved across sessions.
• Cross-compilation: Project is set up to cross-compile to Windows using MinGW, enabling easy generation of Windows binaries from Linux/macOS build environments.

Project structure

pomidoras/
├── src/
│ ├── main.c
│ ├── platform_notification.c
│ ├── pomidorash.h
│ ├── resources/
│ └── screens/
├── Makefile
├── include/
└── README.md

Multiplayer Pong

• TODO: Push latest changes to Github

Its Pong but multiplayer.
It uses pygame for managing window and rendering. And uses UDP sockets for synchronizing data between clients

Frecipe is a free recipe API which serves recipes from a database and makes them accessible via HTTP APIs. Currently it has more than 9500+ recipes. An API Token is required to be able to make requests.
Frecipe uses FastAPI - A modern, fast (high-performance), web framework for building APIs.
It also uses mongoDb for storing registered users and tokens, and all the recipes.

All the recipes in the database of frecipe were scraped from a website using a python script.

Frecipe has two public routes:

1. /get_recipes - returns a paginated list of all the recipes.
2. /get_recipe_by_slug - returns a matching recipe by the recipe slug.

To access this routes the Authorization header must be set. The user needs to register to get a token in mail which can be used to access the APIs. When the user registers a mail with the token is sent to them. The mail is sent using a custom smpt script written using smtplib.
The requests are rate limited (5 requests/minute). To track the rate at which user is accessing the APIs, there token is used. There are many validations on the server side to ensure that the token is valid. A user can also not generate multiple tokens using the same email.

All the requests are asynchronous using the async features of the python programming lanuage, which makes it really fast and responsive.

Frecipe was up and running on heroku, until the hobby account of heroku was closed.

Chatr - Chat App

Chatr is a chat app made with Reactjs, TailwindCSS and Socket.io

It has an express server that uses socket.io to connect and interact with the users Users can use an their Facebook, Google account to register which uses Passportjs and OAuth or they can use an Email account to register which sends an email containing a verification link using nodemailer to verify the user. The user data and chat history is stored in a mongoDb instance

The user can then add contacts by adding the unique id of other user or sharing the user id to other users. Once both users add each other they will show up in each other's contact list and their online status. The users can then chat in a private chatroom.
The updates in the chat room such as user typing or sending, recieving messages are real-time since they are both connected to the same room using socket. This approach is very scalable as using this approach we can have a room with not just two users but multiple users creating a group. Since the user data and chat history is stored in a mongoDb instance, thery are persisted across user sessions.

Chatr is a PWA which means it can be installed on the device like an app and will show up at homescreen. One of the things that I would like to implement is a notification feature, so when the user receives a message a notification will be sent if the user is not active.
In order to achieve this I think something like the Notifications API can be used.

The active status of the user is tracked when the user opens the PWA or visits the website. The following code does the job to do so -

~filename /controller/socket.js
// Initializing socket
const io = socket(server, { cors });
// Listening to active socket connections
io.on('connection', async (socket) => {
    // ---
    // Authorization of connected socket and getting the id

    socket.join(id);
    // Getting user from mongoDb database
    const user = await getUserById(id);
    user.isActive = true; // setting user's active state to true
    user.save();
    sendUserStatusChange(user, true); // Sending a socket event to all the users
});

async function sendUserStatusChange(user, state) {
    const contacts = await getAllContacts(user);
    for (const contact of contacts) {
        socket.broadcast.to(contact._id.toString()).emit('state-changed', {
            user_id: user._id,
            state
        });
    }
}

The 'state-changed' event is then listened on the client side and it renders the state accordingly.

Chatr uses somewhat of an MVC pattern. It does not uses ejs templates for html, but instead uses React.js for user pages. The /web folder is another project which was bootstrapped using Snowpack - a lightning fast frontend build tool which is not maintained anymore. It was a thing before vite but it much was faster and better than webpack.
If I start working on this project again I will probably change the build tool to vite.

The backend of this website was hosted on a hobby account of heroku and does not work anymore. But you can still clone the project and use it in anyways.

Boids refers to a computer simulation that models the flocking behaviour of birds. It was developed in 1986 by Craig Reynolds. The term "boids" is derived from a combination of "bird" and "oid". The purpose of the simulation is to demonstrate how simple rules followed by individual entities can lead to complex and realistic-looking group behaviours.

In the boids simulation, each simulated boid, or bird, follows three basic rules:

1. Separation: Boids avoid crowding together and maintain a minimum distance from their neighbors to prevent collisions.
2. Alignment: Boids align their direction with the average direction of their neighbors, contributing to a cohesive group movement.
3. Cohesion: Boids move toward the average position of their neighbors, promoting group unity.

These three rules, when applied to a large number of individual entities, result in realistic flocking behaviour that mimics the movement of birds in nature. The boids simulation has been widely used in computer graphics, artificial intelligence, and game development to create life-like animations and behaviours for group of entities, not just limited to birds.

I will be writing a blog soon going over the implementation and how i compiled it to wasm.
For now here's the Github link
And a link to deployed version - boids

References:
wikipedia
vanhunteradams.com

Todos:

• Add Readme

A* Path Finding

A* is a graph traversal and pathfinding algorithm. It is widely used in Computer Science and Aritifical Intelligence. It is designed to find the shortest path from a starting point to an end point in a graph, considering both the cost of reaching the goal and an estimated heuristic cost from the current node to the goal.
The algorithm maintains a priority queue to explore nodes in order of their total estimated cost, which is the sum of the actual cost from the start to the current node (g-value) and the estimated cost from the current node to the goal (h-value). A* selects nodes from the priority queue, explores their neighbors, and updates the cost estimates accordingly. The process continues until the goal is reached or the entire graph is explored.

This program is a visualization of the A* algorithm in action on a 2d grid. It uses pygame a game library for python which uses SDL APIs for screen and graphics.
You can set a start point anywhere on the grid using Shift + Left Mouse
and an end point using CTRL + Left Mouse
using left mouse click without any modifier keys you can create walls
right clicking on the wall removes them.
And then press Space to start the visualization.

The Algorithm will find the shortest path after going through some iterations. It does not consider diagonal movements altought its not difficult to implement.

This is an old project made when i was first learning graphics programming using pygame. it does not follow any conventions hence everything is in a single file. But the code is relatively easy to traverse and understand.