DEV Community: Yogender

Building a Particle System Game — Need Help Making It 3D

Yogender — Mon, 04 May 2026 14:57:23 +0000

I’ve been working solo on a real-time particle-based interactive game.

It includes:

Gesture-driven interactions (swarm, duel, battle modes)
Audio-reactive particle behavior
Multiple procedural simulations like explosions, hearts, and a Saturn-like ring

Right now, I’m in the final testing phase, and everything works well in 2D space.

The Challenge

One of the effects is a Saturn-style particle ring, but currently it’s not truly 3D — just a 2D circular distribution with a visual tilt.

I want to upgrade it into a proper 3D particle system, where:

The ring exists in 3D space
The camera can rotate around it
Depth and perspective feel natural
Performance remains smooth with thousands of particles

Current Approach

Particles are generated using basic polar coordinates:

x = r * cos(theta)
y = r * sin(theta)

This works well for 2D, but doesn’t translate directly into a real 3D structure.

What I’m Looking For

How to generate a 3D ring or torus-like particle distribution
Whether I should switch fully to WebGL shaders
Best way to handle camera + projection
Tips for keeping things performant

If you’ve worked on particle systems, shaders, or creative coding — I’d really appreciate your input.

This is a solo project, and I’m trying to push it as far as I can visually and technically.

Thanks in advance 🙌

Learning REST API by Building a Tiny HTTP Server in Python

Yogender — Sun, 03 May 2026 12:13:04 +0000

I recently started learning backend development more deeply, especially REST APIs, HTTP, and how clients and servers communicate.

Instead of only reading theory, I wanted to actually see what happens when a request is sent to a server.

So I created a small HTTP server in Python using BaseHTTPRequestHandler and tested it using curl.

What I Built

I made a simple server running on:

localhost:8000

When I send a request to:

curl -v http://localhost:8000/

the server returns a JSON response like this:

{
  "message": "Hello bro, this is your HTTP response"
}

What I Observed

Using verbose mode in curl, I could clearly see the response details:

HTTP/1.0 200 OK
Content-Length: 52
Content-Type: application/json
Server: BaseHTTP/0.6 Python/3.10.0

This helped me understand that an HTTP response is not just data. It has multiple parts:

Status code
Headers
Body

The server sends the status code first, then headers like Content-Type and Content-Length, and finally the actual JSON body.

What I Learned

This small experiment helped me understand some important backend concepts:

How a client sends a request
How the server receives that request
How routes are handled
Why status codes matter
Why headers like Content-Type are important
How JSON data is sent back to the client
How tools like curl help debug APIs

Before doing this, REST APIs felt like a high-level concept. But after seeing the raw request and response, things started becoming much clearer.

Next Step

Now I want to move from a basic Python HTTP server to FastAPI and understand how modern backend frameworks make API development easier.

I also want to explore:

Request methods like GET, POST, PUT, and DELETE
Request body handling
Query parameters
Path parameters
Status codes
Middleware
Authentication
Database connection

Final Thought

Sometimes the best way to learn backend development is not by starting with a big framework directly, but by first understanding what is happening underneath.

Building this tiny server helped me see the foundation of REST APIs more clearly.

I am still learning, but experiments like this are making the concepts much easier to understand.

Have you ever tried building a basic HTTP server before using a framework?

I Built a Self-Hosted Uptime Monitor in 1 Week Because UptimeRobot Only Lets You Monitor One Site for Free

Yogender — Sun, 05 Apr 2026 05:10:23 +0000

The Problem
I was building my project and needed to monitor its uptime. I went to UptimeRobot — and hit a wall. The free plan only lets you monitor one website. I had multiple services running and didn't want to pay just to know if my own server was down.
So I did what any developer does. I built it myself.

What I Built
Site-MOnitoring (Nexus) — a fully self-hosted, open-source uptime monitoring tool that:

📡 Monitors unlimited websites — add as many URLs as you want
📊 Shows real-time analytics — response times, status codes, uptime history
🎨 Interactive dashboard — built with React + Framer Motion
😴 Anti-sleep engine — keeps itself alive on free platforms like Render/Vercel
🏠 100% self-hosted — your data, your server, zero subscription fees

Live demo: pingbot.yogender1.me
GitHub: github.com/yogender-ai/Site-MOnitoring

Tech Stack
LayerTechnologyFrontendReact 18, Vite, TailwindCSS, Framer MotionBackendNode.js, Express.jsDatabasePostgreSQLJobsCron jobs (pinger.js)HostingRender (backend), Vercel (frontend)

The Hardest Part
Getting the anti-sleep engine right was tricky. Free-tier platforms like Render spin down your server after 15 minutes of inactivity. So your monitor — which is supposed to tell you when things go down — goes down itself.
I solved this by building a self-ping system using cron jobs that keeps the backend alive by pinging its own endpoint periodically. Simple idea, but took some debugging to get right without hammering the server.

Architecture
Nexus-Core/
├── backend/
│ ├── db.js # Database connection
│ ├── pinger.js # Background site poller + self-ping
│ └── server.js # Express API
└── frontend/
└── src/
├── api.js # Axios API calls
├── App.jsx # Main React app
└── index.css # TailwindCSS

What's Next
One valid criticism I've already received: single-server monitoring can give false positives. If your server goes down, it might report Google as down too. The fix is multi-region monitoring — checking from multiple servers in different locations.
That's on the roadmap. For now, Nexus is perfect for:

Monitoring your own projects and APIs
Self-hosted infrastructure
Anyone who wants full control without paying monthly

It's Open Source — Come Contribute!
I built this in 1 week and there's a lot more to add. I've opened up 4 beginner-friendly issues if you want to contribute:

🌙 Dark/light mode toggle
📧 Email alerts when sites go down
📄 CSV export for uptime logs
📝 CONTRIBUTING.md improvements

First time contributing to open source? This is a great project to start with. The codebase is small, clean, and well-documented.
⭐ If you find it useful, a star on GitHub helps a lot!
GitHub: github.com/yogender-ai/Site-MOnitoring

Built with React, Node.js, PostgreSQL, and a healthy frustration with paywalls.

Restarting DSA After a Long Break 🚀

Yogender — Sun, 05 Apr 2026 02:20:55 +0000

After a long pause… I’m finally back to Data Structures & Algorithms.

Life happened.
A lot happened.

There were distractions, changes, overthinking, maybe even burnout — and somewhere in between, consistency slipped away.

But today, I’m starting again. Not perfectly. Not with a grand plan. Just… starting.

📌 What’s different this time?

No pressure to be perfect
No unrealistic schedules
Just showing up daily
Focusing on understanding, not rushing

I’ve rebuilt my repo from scratch and will be pushing solutions consistently again. One problem at a time.

DSA isn’t just about cracking interviews — it’s about discipline, problem-solving, and proving to yourself that you can stay consistent even when it’s hard.

If you’re also restarting after a break, this is your sign:
👉 You’re not behind. You’re just getting started again.

Let’s do this. 💻🔥

🖐️ Hand-Controlled Particle Gravity Simulation (WebGL + Three.js)

Yogender — Sat, 31 Jan 2026 09:59:59 +0000

I built an interactive particle gravity simulation that reacts to real-time hand gestures — fully in the browser.

No game engine.
No plugins.
Just WebGL + Three.js + AI-based hand tracking.

You can literally turn your hand into a gravity well and control thousands of particles in real time.

🚀 Live Demo

👉 https://particle-gravity-fun.pages.dev/

💻 Source Code (Open Source)

👉 https://github.com/yogender-ai/Particle-Gravity-Fun

⭐ Feel free to star or fork if you find it interesting

✨ Features

~8,000 particles rendered in real time

Smooth 60 FPS particle swarming

Dynamic color physics (gesture-based color transitions)

Pinch gesture triggers high-energy “cosmic” effects

Runs entirely in the browser

🛠️ Tech Stack

Three.js (WebGL rendering)

JavaScript

AI Hand Tracking (MediaPipe)

WebAssembly (for performance-critical logic)

Cloudflare Pages (deployment)

🧠 Why I Built This

This started as a fun experiment to explore how far creative coding + AI + web graphics can go without heavy frameworks.

It’s exciting to see sci-fi-like interactions becoming possible directly on the web.

🙌 Feedback Welcome

I’m actively improving this project and experimenting with:

Better physics

More gesture types

Performance optimizations

Would love feedback from fellow developers 🙏
If you enjoyed it, please ⭐ the repo or share ideas.

🔖 Tags (important on dev.to)

Add these when publishing:

threejs #webgl #javascript #creativecoding #opensource #ai #frontend

KNN Algorithm from Scratch -Cat vs Dog Image Classification in Python (Complete Experiment)

Yogender — Tue, 06 Jan 2026 22:35:18 +0000

🧠 KNN Algorithm from Scratch — Real Image Classification Experiment

I recently built a K-Nearest Neighbors (KNN) algorithm from scratch in Python to perform cat vs dog image classification.

This project focuses on understanding how distance-based machine learning really works, rather than simply chasing accuracy.

🎯 What this project demonstrates

Machine Learning from scratch
KNN algorithm implementation
Image classification using raw pixel vectors
Supervised learning fundamentals
How noise, distance, and neighbors affect predictions
The curse of dimensionality in real experiments

🧪 The core experiment

After training the model, I discovered that removing only 5 noisy images from each class drastically improved prediction accuracy.

This happens because:

KNN has no abstraction or learning of features
All intelligence comes from the geometry of the data
A few bad samples can distort the entire decision boundary

🧬 Why this matters

Most tutorials skip the uncomfortable truth about KNN:

More data does not always mean better results
Distance metrics define the model’s intelligence
High-dimensional data behaves very unintuitively

Understanding this makes you a much stronger machine learning engineer.

📦 Complete Source Code

You can explore the full project here:

🔗 https://yogender-ai.github.io/knn-cat-dog-demo/

🏁 Final thought

Before neural networks learn to see,

we must understand how distance learns to lie.

If you’re learning machine learning, this experiment is worth exploring.