Coder Legion - Recent posts tagged sideproject

A $1 market for side projects – first 100 listings free

Sun, 06 Sep 2026 14:45:32 +0000

Hey everyone,

I'm running a small experiment called AgentShare Market.

The idea is dead simple: you list your web app, tool, or API for $1. People browse. If someone wants it, they reach out. That's it.

No chat, no escrow, no promises. Just a board for the curious.

Why?
I've noticed a lot of vibe coders and indie makers building cool stuff but struggling to get any traction. This is a low-friction way to put your project out there and see if anyone bites.

First 100 listings are FREE to test the waters.

If you've got a side project collecting dust, give it a shot: https://agentshare.dev/market

Would you ever buy or sell a side project? Curious to hear your thoughts.

Building MOT History Free: a UK vehicle history checker on Next.js + DVSA's API

Sun, 09 Aug 2026 16:58:35 +0000

I've spent the last few months building MOT History Free, a UK vehicle history checker — think "paste your number plate, get the full MOT/tax/mileage story" — and wanted to share some of the technical decisions behind it.

The problem

The UK government exposes a free MOT history API (DVSA), and most "MOT checker" sites are just thin wrappers around it with heavy ads. I wanted to build something that goes further: cross-referencing mileage anomalies (the classic "ghost MOT" fraud pattern — a car skipping an expected test, or mileage that quietly drops between records), tax/SORN status, and V5C logbook history, packaged into one report instead of five different gov.uk lookups.

Stack

Next.js (App Router) on the frontend, server actions for the pre-check flow
A guest checkout flow with PayPal — no account required, £0.99 per report
The trickiest part wasn't the report itself, it was the payment UX: PayPal's Buttons() component renders a cross-origin iframe for card fields, which means zero CSS control over anything inside it (learned that one the hard way — spent an evening trying to override an inline color on their legal disclaimer text before realizing it's a different document entirely). If you need actual style control over card fields, CardFields() (Advanced Card Payments) is the only path — hosted fields you can theme, versus the all-in-one iframe you can't touch.

Conversion detail worth sharing

Instead of a generic "here's what you get" bullet list before checkout, I show a locked/blurred preview of real report fields (tax status, MOT expiry, last V5C issue date, etc.) with a lock icon over each — same pattern as LinkedIn's "who viewed your profile." Concrete-looking blurred data converts noticeably better than abstract feature descriptions, because the brain registers "there's a real answer here" instead of "here's a list of promises."

What's next

Working on surfacing mileage-rollback detection more prominently in the free pre-check, since that's the single biggest "oh, I need this" moment for most visitors before they even see the paywall.

Happy to go deeper on the DVSA API integration or the PayPal guest-checkout flow if anyone's curious — AMA in the comments.

I added a full analytics dashboard to my GitHub solar system visualizer

Sun, 12 Apr 2026 21:22:52 +0000

Phase 7 of Stack Universe just shipped. The solar system is still there. Now there is a clean analytics dashboard sitting behind it showing everything the planets communicate visually but in graphs and charts a manager or recruiter can actually read.

→ Stack Universe

Quick context if you are new

Stack Universe turns any GitHub username into a unique 3D solar system. Repos are planets sized by star count orbiting at speeds from last push date. Commit messages float on shooting stars. CI/CD runs are live space weather. Failing builds crack your planets. Deploy streaks build golden auras. Every developer gets a permanent URL as their coordinate in the multiverse.

Previous phases added repo health scores, GitHub Actions weather, OAuth to claim your universe, README embeds, a full AI layer with roast mode and developer identity, a flyable spaceship through the multiverse, constellation maps, multiplayer presence, and universe radio.

Phase 7 gives all that data a professional face.

What shipped in Phase 7

Click the ANALYTICS button in the HUD and a full screen dashboard slides open. Six tabs. Every tab is a different lens on your GitHub data.

Overview tab

Two arc gauges sit at the center. Universe score in gold showing your exact score with the distance tier label underneath it. System health in cyan showing your 0 to 100 health score. Below both gauges a stats row shows total stars, repo count, language count, current streak, account age, and universe score all in one line

The score breakdown is the part I am most proud of. A horizontal stacked bar shows exactly how your universe score was calculated. Stars contribution, repos contribution, languages contribution, account age contribution. Each segment is colored and labeled with both the percentage and the actual points. For the first time developers can see exactly why their score is what it is and what they need to improve to move closer to the Multiverse Core.

Repos tab

Horizontal bar chart with every repo on the Y axis and health score on the X axis. Bars are color coded matching planet colors exactly so the analytics and the solar system feel connected. Green is healthy, yellow is decent, orange is struggling, red is critical. Sortable by health score, star count, and last push date. Clicking any repo row pulses that planet in the solar system behind the panel.

Activity tab

12 month area chart showing commit frequency across the year. Multiple colored lines for the top three repos so you can see which ones are driving activity and which ones went quiet. Most active month is highlighted. Quiet periods are visible immediately.

Languages tab

Donut chart with language percentages matching planet colors exactly. Hover any segment for language name, percentage, and repo count. Language list below sorted by percentage with colored bars. Trend arrows show which languages are growing versus shrinking if historical snapshot data exists.

CI/CD tab

Only appears if GitHub Actions exists on tier one repos. Grouped bar chart per repo showing last ten builds. Green is passed, red is failed. Pass rate percentage per repo with a progress bar. Current deploy streak number. Empty state for repos without Actions: No GitHub Actions detected, add a workflow to see your space weather history here.

Growth tab

Line chart showing cumulative stars over account lifetime. Spike annotations appear when the line jumps significantly labeling the repo that caused the spike. Below the chart a scatter plot shows repo age on the X axis and star count on the Y axis with each dot colored by language. Shows at a glance which repos are veterans still earning stars, which are rising fast, and which were one hit wonders.

Export and share

PDF button top right generates a clean formatted report. Share button generates a public read only link at https://stack-universe.vercel.app/analytics/username. Send it to a recruiter or manager and they can read your GitHub health without needing to understand solar systems.

Why this phase matters

A developer who visits Stack Universe and searches their username gets the wow moment from the solar system. That wow moment makes them share it once. The analytics dashboard is what makes them come back.

What the full product looks like now

Phase 1 gave every developer a beautiful universe. Phase 2 made every planet informative with health scores and PR moons. Phase 3 made it live with GitHub Actions weather. Phase 4 gave developers ownership through OAuth and README embeds. Phase 5 gave it a voice with AI roast, narrator, horoscope, and identity. Phase 6 connected every universe into a community with a flyable spaceship and constellation map. Phase 7 made it professional with a full analytics dashboard.

Phase 8 is next | the combat system. Universe battles where your GitHub stats become weapons. Stars fire as cannons. Commit streak is your damage multiplier. Followers are your shield rating. After that Phase 9 is monetisation with the Pro tier launch via Lemon Squeezy.

An honest note

This is a side project and I am still learning and improving with every phase I ship. Seven phases has taught me more than anything else I have built. If you are an experienced developer and see something I should be doing differently in the Recharts implementation, the PDF generation, the analytics data modeling, or anything else I genuinely want to hear it.
The analytics dashboard screenshot is honestly the thing I am most proud of shipping so far. It looks like something a funded team built. It was built solo as a side project.

Try yours at Stack Universe and click the ANALYTICS button.

Drop your universe URL in the comments.

CPU - Traditional Version (2)

Tue, 03 Feb 2026 09:10:33 +0000

Continue on how CPU works. As we already know that CPU only knows numbers and calculate number. And So a natural question is "how CPU loops and create condition if the CPU only know how to calculate?".

To put it simply, CPUs have special instructions that allow them to jump between instructions. We can "emulate" loop and condition, for example in my CPU simulation i have this instruction called JZ (jump if zero). As the name suggests, it jumps to another instruction if a certain value is zero.

example:

LOAD A, 1
LOAD B, 1

CMP A, B
JZ exit
STOREM A, 0 ; store value register A to memory
exit:

HALT

At this point, a question appears: "what value does JZ actually check?" we know that exit is just a label on which line it's referring to, not a value. So how does JZ know when to jump, and This is where branching flags come in.

Before JZ instruction, there's called CMP instruction As the name implies is a compare instruction, like example above it compare register A value and register B value.

During this comparison, the CPU updates special internal flags. The most important ones are:

Z (Zero flag): true if the result is zero
N (Negative flag): true if the result is negative

In my simulation, I explicitly store these flags. In real CPUs, these flags are stored in a special register (often called a status register or flags register).

After the calculation for CMP complete the CPU updates the Z and N flags. And when JZ instruction start they will look at Z flag. And if the the Z flag is true (or 1), execute the jump to chosen location.

Same as Loop, like example below

LOAD A, 4
LOAD B, 1
LOAD C, 1

loop:
SUB A, B ; substract A with B
CMP A, C
JZ exit ; if A == C
JMP loop ; not equal than repeat
exit:

HALT

As you see can see above this instruction is the simplest loop where if A is equal to B exit loop.

To create the loop, we need two jump instructions:

JZ for the conditional jump.
JMP for the unconditional jump back to the loop.

If the JZ condition is not satisfied, the CPU moves to the next instruction, which is JMP. Since JMP has no condition, the CPU will always follow it.

In my simulation, the code for CMP looks like this:

// get value from register and substract
int temp = reg.r[inst.operandA] - reg.r[inst.operandB];
// check if zero or negative 
flag.zero = (temp == 0);
flag.negative = (temp < 0);
programCounter++;

The important rule is that the CMP instruction should not store any new value in registers or memory. It only updates the flags.

Of course there is other instruction other than JZ such as:

JG (jump if greater),
JL (jump if less),
JNZ (jump if not zero),

and many others, depending on the CPU design.

So when you see a code like:

int valueA = 2
int valueB = 3

if (valueA == valueB) {
    // do stuff
}

in CPU it basically try to subtract valueA and valueB and if zero condition fulfill (ignoring compiler optimizations).

And from this branching flags alone, there are many possibility you can create in here because from my experience no matter the fancy code is inside are just bunch of condition and loop.

I Turned Images Into 10,000 Tiny HTML Elements Because Why Not

Thu, 29 Jan 2026 23:34:43 +0000

Sometimes the best projects are the ones that solve problems nobody has.

Last weekend, I found myself staring at my screen, thinking about images. Not in a productive way. Not "how can I optimize image loading" or "what's the best format for web." No, I was thinking something far more unhinged:

What if every pixel was just a tiny HTML element?

And thus, IMGML was born.

The Premise

Here's the concept: take an image, read it pixel by pixel, and generate an HTML file where each pixel is represented by a 1x1 <hr> element with a background color matching the original pixel.

That's it. That's the whole thing.

No <img> tags. No <canvas>. No SVG. Just thousands upon thousands of microscopic horizontal rules, arranged in a grid, pretending to be an image.

Does It Work?

Technically? Yes.

Practically? That's a strong word.

Upload a 100x100 pixel image and you get 10,000 HTML elements. A 200x200 image? 40,000 elements. Your browser will render it. Your browser might also ask you why you've done this.

But here's the thing — it does look like the image. Open the HTML file and there it is, your photo, reconstructed entirely from styled <hr> tags. It's beautiful in the way that a Rube Goldberg machine is beautiful. Unnecessarily complex, deeply impractical, and yet somehow satisfying.

Why Though?

I get asked this a lot. "Why would you do this?" "What's the use case?" "Are you okay?"

The answers are: because I could, there isn't one, and debatable.

This is a "what if" project. It exists in that space between curiosity and questionable judgment. The space where you wonder "can I do this?" before asking "should I do this?"

Some might call it a waste of time. I call it a learning experience wrapped in absurdity.

The Tech

For those curious, it's built with Laravel 12 and Livewire. Upload an image, the backend processes it pixel by pixel, and you download your freshly minted HTML monstrosity.

Here's what the output looks like — just a wall of <hr> tags, each with an inline background color:

<r>
  <hr style="background:#cad5d9" />
  <hr style="background:#c5ced3" />
  <hr style="background:#cdd6db" />
  <hr style="background:#dde4ea" />
  <hr style="background:#e4ebf1" />
  <hr style="background:#e1e6ec" />
  <hr style="background:#dadfe5" />
  <hr style="background:#d7dadf" />
  ...
</r>

The code is straightforward. PHP's image functions handle the pixel reading, a loop builds the markup, and Livewire makes the upload/download flow seamless. Nothing revolutionary — just reasonable tools applied to an unreasonable idea.

The Optimization Rabbit Hole

Once I committed to this absurd idea, I became obsessed with making each pixel as small as possible. Here's how that went:

Attempt 1: RGB

<hr style="background:rgb(255, 255, 255)">

Works, but verbose. All those characters add up.

Attempt 2: Hex

<hr style="background:#c5ced3"/>

Shorter. Hex codes are more compact than RGB.

Attempt 3: Drop the self-closing slash

<hr style="background:#c5ced3">

It's optional in HTML5. Every byte counts.

Attempt 4: Drop the quotes

<hr style=background:#c5ced3>

Also valid HTML. We're getting minimal.

Attempt 5: The bgcolor attribute

<hr bgcolor="#c5ced3">

Deprecated, and for some reason only works on <body>. Dead end.

Attempt 6: The color attribute

<hr color=#c5ced3>

This works. It's deprecated, it's not recommended, and it's perfect for this project.

Attempt 7: Drop the hashtag

<hr color=c5ced3>

Turns out the # is optional on hex colors. One more character gone.

This is the shortest I could make each pixel. If you know a way to make it smaller, I'm genuinely curious.

The code is straightforward. PHP's image functions handle the pixel reading:

// Resize to keep things manageable
$image = $this->resizeImage($path, 200, 200);
$resource = imagecreatefromjpeg($image);

$width = imagesx($resource);
$height = imagesy($resource);
$pixels = [];

// Loop through every pixel
for ($y = 0; $y < $height; $y++) {
    for ($x = 0; $x < $width; $x++) {
        // Get color index at this coordinate
        $color = imagecolorat($resource, $x, $y);

        // Convert to RGB array
        $rgb = imagecolorsforindex($resource, $color);

        // Format as hex (no hashtag needed)
        $hex = sprintf('%02x%02x%02x', $rgb['red'], $rgb['green'], $rgb['blue']);

        $pixels[] = $hex;
    }
}

Loop through each row, each column, grab the color, convert to hex, done. Livewire handles the upload/download flow. Nothing revolutionary — just reasonable tools applied to an unreasonable idea.

What I Actually Learned

Despite the silliness, building IMGML reminded me of a few things:

Constraints breed creativity. Limiting myself to just HTML elements forced me to think differently about rendering.
Performance matters everywhere. Processing images pixel by pixel taught me to respect the work that actual image libraries do.
Side projects don't need purpose. Not everything has to ship, scale, or solve a real problem. Sometimes you just build something weird and smile.

Should You Use This?

Absolutely not.

Well, maybe. If you need to:

Confuse a web developer
Create the world's least efficient image format
Prove a point about HTML being turing complete (it's not, but this feels adjacent)
Kill time on a Saturday

Then yes, IMGML is for you.

Try It Yourself

The project is open source. Clone it, run it, upload an image, and watch your browser question its life choices as it renders your photo one <hr> at a time.

Will it change the world? No.

Will it make you briefly happy in a "wow, that's dumb" kind of way? Almost certainly.

And sometimes, that's enough.

Here's my GitHub avatar in IMGML format if you want to see it in action.

IMGML is available on GitHub. Star it if you appreciate the absurdity.

CPU - Traditional Version

Thu, 29 Jan 2026 05:57:40 +0000

I've been building quite a few projects and one of them is this CPU Simulation. I've been in the web world for 4 years, but i still did not understand what CPU is. So in the past week i start to build a small project CPU-Simulation that follow the behavior in the CPU.

Why the sudden interest in CPUs? Curiosity. There was a trigger after reading an article on how CPU work and they the work is quite simple, that got me thinking "hey, i can build that".

Note: This is the article CPU and this one CPU

So, in CPU they have two important component called Control Unit and ALU (Arithmetic Logic Unit). At a high level, they follow a simple idea often described as “fetch and execute.” In more detail, the cycle looks like this:

Control Unit
This Control Unit responsible for fetch instruction from memory and decode the instruction into something ALU can read. by decoding means they translate the instruction into control signal that the ALU can act on.
Arithmetic Logic Unit (ALU)
ALU is responsible for execution the instruction that producing a result and storing the result in register or memory.

So to put it simple it more like fetch -> decode -> execute -> store -> next. That's the whole cycle, the cycle repeat until all instruction is complete.

From this it's tell me that, the computer work in a simple and predictable manner. The CPU does not care what program it given, it only cares whether an instruction is valid and whether it can be executed.

So i did manage to build the simulation using java, and it can be improve later. Here some code Github.

I use web browser to interact with the cpu, the cpu have 4 register index and 100 bytes of memory. But right now i only create small portion on how CPU work.

Here gist code CU & ALU

As you can see from github code the CU or Control Unit have it's own class. The class contain few important part and there is fetch the program convert to stream and decode it, to something that Simulation ALU can read.

  private int resolveInstruction(Operand op) {

    // Convert to Number
    if (op instanceof LabelRef label) {
      Integer addr = labels.get(label.name());

      if (addr == null) {
        throw new IllegalStateException("Unknow Label :" + label.name());
      }

      return addr;
    }

    // Convert to Number
    if (op instanceof HexCode hx) {
      return Integer.decode(hx.value());
    }

    // Convert to Number
    if (op instanceof Immediate imm) {
      return imm.value();
    }

    // Convert to Number
    if (op instanceof RegisterCode rc) {
      return parseRegister(rc.value());
    }

    return 0;
  }

  private Instruction resolver(RawInstruction ins) {
    var instruction = new Instruction();
    instruction.opcode = ins.opcode;
    switch (ins.opcode) {
      case HALT:
        break;
      case JMP:
        instruction.dest = resolveInstruction(ins.dest);
        break;
      case STOREM:
      case LOADM:
        instruction.dest = resolveInstruction(ins.dest);
        instruction.src = resolveInstruction(ins.src);
        break;
      case LOAD:
        instruction.dest = resolveInstruction(ins.dest);
        instruction.src = resolveInstruction(ins.src);
        break;
      case CMP:
      case ADD:
        instruction.dest = resolveInstruction(ins.dest);
        instruction.src = resolveInstruction(ins.src);
        break;
      case JZ:
        instruction.dest = resolveInstruction(ins.dest);
        break;
      case null:
      default:
        break;
    }

    return instruction;
  }

You can see from function called resolver it convert every value into number. Because CPU does not talk other than number.

  void execute(Register reg, Memory mem, ArrayList<Instruction> program) {
    if (programCounter < 0 || programCounter >= program.size()) {
      halted = true;
      fault = CpuFault.INVALID_PC;
      return;
    }

    Instruction inst = program.get(programCounter);

    switch (inst.opcode) {
      case LOAD:
      case STOREM:
      case LOADM:
      case ADD: // register to register
        this.store(inst, reg, mem);
        break;
      case CMP:
        int temp = reg.r[inst.dest] - reg.r[inst.src];
        flag.zero = (temp == 0);
        flag.negative = (temp < 0);
        programCounter++;
        break;
      case JMP:
        programCounter = inst.dest - 1;
        break;
      case JZ:
        if (flag.zero) {
          programCounter = inst.dest - 1;
        } else {
          programCounter++;
        }
        break;
      case HALT:
        halted = true;
        break;
      case null:
      default:
        fault = CpuFault.ILLEGAL_INSTRUCTION;
        halted = true;
    }
  }

  private void store(Instruction inst, Register reg, Memory mem) {
    switch (inst.opcode) {
      case LOADM:
        if (inst.src > mem.ram.length) {
          halted = true;
          fault = CpuFault.INVALID_MEM;
          break;
        }
        reg.r[inst.dest] = mem.ram[inst.src];
        programCounter++;
        break;
      case STOREM:
        if (inst.src > mem.ram.length) {
          halted = true;
          fault = CpuFault.INVALID_MEM;
          break;
        }
        mem.ram[inst.src] = reg.r[inst.dest];
        programCounter++;
        break;
      case ADD:
        int res = reg.r[inst.dest] + reg.r[inst.src];
        reg.r[inst.dest] = res;
        flag.zero = (res == 0);
        flag.negative = (res < 0);
        programCounter++;
        break;
      case LOAD:
        reg.r[inst.dest] = inst.src;
        programCounter++;
        break;
      default:
        break;
    }
  }

And above code block is an important function in ALU Class, which contain execute function where it take the decoded instruction from Control Unit Class and execute it. And of course i add an error handler, the error handler in CPU are quite similar to most program, if there some illegal instruction or incorrect instruction they halted the program from execute. If you ever use a tool like sudo or other linux command it's the same, if it's error stop the program.

And other interesting part is the label tag like loop: or exit:. That label are just for parser to remember what line are they referring to. For example:

LOAD A, 1
LOAD B, 1

loop:
ADD A, B
CMP A, 7
JZ exit
JMP loop

exit:
HALT

above instruction are a simple instruction for loop if value reach zero stop the loop. Equivalent with:


int A = 1
while (A != 7) {
    A += 1
}
return

If i swap the JZ exit with JMP loop it can cause infinite loop.

There are many more modern concepts in CPU design, but for now, I think a traditional CPU model is enough to understand the fundamentals.