You are browsing as a guest. Sign up (or log in) to start making projects!

belbel

@belbel

Joined June 18th, 2026

  • 15Devlogs
  • 2Projects
  • 3Ships
  • 55Votes
Human
Ship Pending review

@belbel on Linea - Matrix and stuff

LINEA!

Hi! So I’ve made this new web app called Linea.
Linea is basically a step-by-step visualizer for linear algebra problems, to which I learned these concepts on my linear algebra classes ofc.
Currently there are 3 main features! Determinant calculation, System solver with matrix, and linear regression using matrix! I think these would be more helpful than just a generic matrix addition and multiplications.

For the design concept of the website itself, I chooses skies and clouds. Why those objects specifically? No particular reason… Clouds are the first thing came into my mind, probably because of Indonesia’s recent forest fire and because of that event the skies are no longer blue (skies forever blue reference??).

But yeah there’s that!

The idea is to create a tool so that people would be able to see the step by step on how to solve these problems if it is must be handwritten.

Challenge!

I think design wise, at first I don’t know how I can make the web app interesting because general clouds would be boring. So I decided to add these cute cat clouds… Some of them are bunnies

Then the code itself, C++ is quite challenging even if I got some experiences with that language. I would say the math logic and the LaTeX format was harder to implement than I imagined.

But I think I like how this turned out.

What I enjoy doing the most?

The sprites, and the React.JS coding ofc!

So yeah. After shipped this web app I’ll also share this to my friends so that this website would actually help others.

  • 6 devlogs
  • 15h
Try project → See source code →
Open comments for this post

@belbel on Linea - Matrix and stuff

3h 2m 32s logged

Part 6 - Finishing!

So I’ve managed to integrate the WASM lib that I made into my Next.JS web app as well as create the Woodpanel component that uses my Aseprite sprite as its background. Additionally I also put my old Ibis Paint artwork for the background.

With Pixi.JS, I added a cute little cloud cat animated background. These cat entities will move from left to right or vice versa, and if you touched them they will bounce for a bit!

I think the colors of my sky painting and the woodpanel and these cloud cats also plays nicely.

I also tried to breakdown my interfaces in components, reusing some of my cold next.js codes for efficiency too! Especially those graphs that is why I managed to implement it quickly (utilized at Linear Regression feature).

In order to render my C++ code output in form of formatted LaTeX, I added KaTeX to my Next.JS web app.

0
0
6
Open comments for this post

@belbel on Linea - Matrix and stuff

2h 17m 17s logged

Part 5 - Moving Cloud Cats and Wood Panel Prep

So I’ve managed to make those animated cat cloud doodle for my linear algebra web app! And also I’ve just made this wood sprite

0
0
2
Open comments for this post

@belbel on Linea - Matrix and stuff

1h 35m 47s logged

Part 4 - New Sprite

I just drew these doodle cloud sprites that will be put behind the interface(s) of the web app. I’ll work on those tomorrow. Basically these clouds will float on the background.

0
0
33
Open comments for this post

@belbel on Linea - Matrix and stuff

3h 22m 43s logged

Part-3 New WASM Function and Moving on to Next.JS!!

So I’ve finished adding the linear regression function into the WASM code-base. And I was struggling with the LaTeX unit test but yeah I managed to fix the bug. It was a formatting issue.

Then I moved into coding in JS once again! I think I’m gonna be picking sky-themed UI? The idea is to create a single page responsive website. So to access different features, the user could just easily swipe left and right.

0
0
5
Open comments for this post

@belbel on Linea - Matrix and stuff

1h 38m 26s logged

Part 2 - More Algorithms and New LaTeX-PDF automation

  1. So I’ve added a new function to find determinant by reusing the LU code I have and created a new minor-cofactor expansion method code
  2. There’s also bug in LaTeX formatting that I’ve just noticed as I paste the .txt output resulted from the testing into Overleaf.
  3. Pasting each .txt test output to external websites feels tiring so I automated the pdf conversion with Python and Tectonic!

I suppose I’ll push these updates to github next and then continuing with linear regression before moving on into Next.JS and such.

0
0
6
Open comments for this post

@belbel on Linea - Matrix and stuff

2h 41m 48s logged

Part 1 - WASM Set Up

By using C++, I am planning to create functions to solve matrix based problems. I am currently learning both C++ and Linear Algebra so this project would combine both then applied into a Next.JS based web app!

For now I have done the solvers function, which will be the function for the web app to solve linear equation system using matrices!

There are test cases I need to revisit too.

0
0
4
Ship ✨ Blessed

@belbel on LightScanner

Okay so here it comes new version for Lightscanner web app!

After my friends using it for a while, they gave me a feedback saying it would be great if it has a ‘fit to page’ option for the page size. This way, the user wouldn’t have to go through complicated process on zooming in the pictures or trying different page sizes when it is not needed. This one was kind of challenging to pull because it means I also need to change a little bit parts of my FastAPI backend.
Additionally I’ve also added custom page sizing so that the user can use whatever page size they want! My mom also needs this for her photocopy and printing tasks so I made it.

Another feature is also we will be able to rename our files before downloading, would be helpful for mobile devices where the prompt asking something like the name file just doesn’t pop up.

Then a day later I also added print preview feature or PDF preview feature. Say I’ve added 25 images and have cropped and zoomed each one then I want to do a rechecking. So Instead of doing it per images which could be harder and complicated, I’ve added a feature where the user will be able to check the entire PDF file with a single click.

I took my time to draw more Nyny. Because so far there’s only three drawings of her, so let’s add one more! Basically Nyny now hangs on top of some modal interfaces. I used google meet to record my Lapse when drawing on Ibis Paint.

  • 2 devlogs
  • 4h
  • 17.93x multiplier
  • 91 Stardust
Try project → See source code →
Open comments for this post

@belbel on LightScanner

2h 19m 23s logged

NEW FEATURE AND NEW SPRITE

  1. Now before downloading, users will be able to see the preview of their PDF file based on the page sizes and orientation that they are choosing.
  2. More Nyny! New additional Nyny sprite where she ‘hangs’ around the modal user interface
  3. Touch particle effect, for the vibe and polishing
0
0
19
Open comments for this post

@belbel on LightScanner

1h 56m 15s logged

NEW FEATURES!

I’ve received feedbacks from my friends, so for this project I’ve added

  1. Fit-to-page sizing where the PDF will follow the original page size/ratio
  2. Custom sizing, users can now input any sizes to their liking. Min. 10 cm and Max. 60 cm
  3. Before downloading, users would be able to change the file name
0
0
15
Ship

@belbel on LightScanner

HI!! So this is my project, Lightscanner!

A simpler, lighter alternative for CamScanner or any other image-scanning mobile app. And an image-to-PDF converter like ILovePDF but with built-in filters!

It’s been a while since I’ve coded with both Next.js and FastAPI, and here we are! When it comes to developing any web app-related projects, these two always come to my mind first.

The reason why I made this project was funny honestly. So my mom and I lived in Indonesia, and she has this small photocopy and printing business. Almost everyday, there’s a lot of customers that want to print documents that were directly captured from the camera. There are lots of issues, for example, resolution issues; the pictures don’t match the ratio for the paper size and orientation; and then in my place, not everyone was able to operate a PC and use Microsoft-related tools or GDocs.

There are tools like Ms. Words, but my mom can’t operate it well, and so do the customers sometimes. Then apps like Camscanner feel laggy and filled with ads. This is why I made Lightscanner!

I’ve testes this web app. My friends also used it for their assignments. When there’s handwritten homework or assignments and the teacher told us to send the pictures to Google Forms in the form of PDF, my friends tried to use this web app, and it worked.

As for my mom, she said she was able to use this app and so far enjoys it. Because it is much faster and simpler.

So if you want to test my project, find any pictures and try to convert them into PDF files. Try to experiment with the options!

I think making usable web apps like this is something that I am proud of! Also new OC!!!! Although she only like has two inconsistent sprites lol.

I think the challenging part wasn’t coding the UI or the API but rather coding using Pillow because I wasn’t that familiar with image processing stuff! SO THIS IS MY PLACE TO LEARN!.

  • 7 devlogs
  • 16h
  • 14.56x multiplier
  • 230 Stardust
Try project → See source code →
Open comments for this post

@belbel on LightScanner

23m 18s logged

GITHUB IS READY!!

Updated BOTH READMEs FOR BOTH REPOS!! New screenshots also added, alongside the tutorial how to run the project locally!

0
0
19
Open comments for this post

@belbel on LightScanner

27m 59s logged

Deployment test

The app has been shipped.

  1. Next.js app on Vercel
  2. FastAPI server on FastAPI cloud

I’m gonna try to test the web app on different devices first before proceeding to write README.md!

0
0
5
Open comments for this post

@belbel on LightScanner

1h 35m 44s logged

API KEY

Since the client uses Next.JS and the backend uses FastAPI, I added more security layer to prevent another app from accessing the web.

0
0
18
Open comments for this post

@belbel on LightScanner

5h 38m 58s logged

Image Upload Mechanism

Here are new updates for LightScanner

  1. I’ve implemented the drag and drop menu so that users would be able to easily upload their images. Up to 10 MB, max 25 imager per batch.
  2. Users will be able to choose the paper size and page orientation to their liking 
  3. In this web we can also crop and zoom the image directly
  4. For mobile, user will be able to capture the pict of their document or anything on camera
  5. Added an errorboundary to handle images that cannot be decoded especially on mobile.
0
0
16
Open comments for this post

@belbel on LightScanner

4h 5m 55s logged

Updated homepage for my Image-to-PDF site.

I’ve added animated checker backgrounds with some paper texture so it wouldn’t feel too bland. As well as animated the text
Also made a new oc as the guide/mascot for the web app too lol.

Still omw to implement shimejii like character on the homepage.

0
0
3
Open comments for this post

@belbel on LightScanner

1h 38m 53s logged

LightScanner Time

I have an idea to create my own version for Image-to-PDF site similliar to ILovePDF and CamScanner. I’ve finished the set up for the web app, and done with importing fonts and added new color theme

0
0
8

Followers

Loading…