Bug Exterminator

Inspiration

So I've always wanted a quick way to just delve into finding and fixing problems, but all I get is writing a solution to a problem from start to finish. So I really wanted a way people like me would have the opportunity to just fix stuff. I watched a video on YouTube of some app that throws math problems from top to bottom on the screen, then I thought, maybe combine the two ideas to one, then Bug Exterminator was born.

What it does

Basically Bug Exterminator is a fun app for practicing and skilling up on debugging and bug fixing, and soon patching vulnerability. Literal bugs would go up and down the screen, hovering stops the bug and shows with programming language the bug is related to, then on click, a modal displays the buggy code to be fixed, on successful fix, the bug is squashed and then replaced in 5s.

How we built it

I built it a few main technologies, so: Frontend:

NextJs: as the frontend library.
Socket.io (client): as the realtime technology used for communication with the backend.
Clerk (client): for user authentication and management.
Framer Motion: for animating the bugs/squashes on the screen. Backend:
NodeJs: as the backend server.
ExpressJs: as the backend framework.
Socket.io (server): as the realtime technology used for communication with the frontend.
Better-sqlite3: database used for the project.
Clerk (server): for user authentication, authorization and management.
Google Gemini SDK: the llm used to check for code correction and generate the buggy code.

Challenges we ran into

I ran into server challenges, but mainly: Frontend:

Using Framer Motion was hectic, I needed to know how to animate the bugs on the screen so I tried so many ways until I found the perfect way for my use case.
I wasn't much of a designer so I had initially used just red rounded divs, tried and failed on attempts to code bugs looking like actual bugs, so I consulted a friend that created different bug types and squashes png/svg that I used for animation.
I hadn't worked with ReactJS in a while, hence using NextJs was challenging especially with animation and controlling events like hovering and clicking on a specific bug, then finally the squashing effect, but I found my way around it like I always do.
The landing page was also challenging because I wasn't great a designer, I have usually worked with figma designs done by the UI/UX designer, so this time I had to design on demand now and it was different. Backend:
I didn't have so much challenge except with working around the request per minute put on the Gemini SDK, so I had to create a pretty weird function that would mitigate that cos I wanted to generate over 90 buggy codes in different programming languages.
Using Better-sqlite3 was also challenging because I hadn't worked on SQL related databases in a while, I've been building with Mongodb for 3yrs+, that's one of the reasons why I intentionally used it, I got to make it work anyways.
My biggest challenge backend related was hosting my application publicly especially the backend on digital ocean, particularly with domain related issues, the frontend needed a public and secure URL it would make a socket connection to, hence the challenge but I found a way around it by utilizing free subdomains and using Ngnix to port my digital ocean droplet address to it.