DEV Community: Sadekul Islam

Software Engineering looks beautiful… from a distance.

Sadekul Islam — Sat, 11 Apr 2026 14:16:46 +0000

Software Engineering looks beautiful… from a distance.

From the outside, it seems exciting — building apps, working with AI, earning globally, and living a flexible life.

That’s exactly what I thought before stepping into this field.

But reality is different.

There is constant pressure to learn.
New technologies appear every day.
You fix one bug, another one shows up.
Sometimes, you don’t even know what went wrong.

And then comes competition.

Thousands of developers are learning, improving, and trying to stand out. It’s easy to feel lost in the crowd.

I’m currently studying in China and trying to transition into Software Engineering. This journey hasn’t been easy.

Some days feel overwhelming.
Some days I doubt myself.
And honestly, some days I just feel tired.

But I keep going.

Because deep down, I believe this journey is worth it.

Every small step matters.
Every bug fixed is progress.
Every concept understood is growth.

I may not be perfect.
I may not be the best.

But I am consistent.

And sometimes, consistency is the real talent.

— Sadekul Islam (Lì Ào / 利奥)
Software Engineering Student |

Beyond the Mouse: A Real-Time Gesture-Controlled AI System (Lì Ào Engine)

Sadekul Islam — Sat, 28 Mar 2026 12:17:52 +0000

At 3 AM in a freezing dorm room in China, staring at a terminal full of Python logs—I asked myself a simple question:

What if the air around me was the interface?

That question led me to build Lì Ào Engine (利奥) — a multimodal Human-Computer Interaction (HCI) system that transforms gestures, voice, and intent into real-time digital actions.

Philosophy: From Constraint to Freedom

Traditional input devices—mouse and keyboard—are powerful, but limiting. They confine interaction to surfaces.

I wanted to break that boundary.

Lì Ào Engine is built on a simple idea:

Human intention should be the interface.

System Architecture (Clean & Scalable)

This is not a prototype-level project. I designed it with modularity and scalability in mind.

Core Structure


-src/system → Core rendering layers (AI, Board, Layers, Media, Remote)

-src/features → Independent modules (ai, draw, galasy, gesture, image, move, prediction, remote, upload)

-src/hooks → Custom hooks for performance-critical logic
     -useImageLoader
     -useMediaPipe
     -usePredictor
     -useRealTimeSync
     -useTracking
     -useVoiceCommand  

- `server/engine` (Python) → Vision processing + AI inference (WIP)

Design Principle

Separation of concerns (UI vs AI processing)
Real-time responsiveness
Low-latency data flow

The Core Innovation: Omni-Precise V5.2 Engine

Gesture systems suffer from jitter and instability.

I built a custom smoothing and prediction pipeline:

1. Stable EMA Smoothing

Reduces noise from raw hand tracking data
Produces fluid, natural motion

2. Velocity-Based Stroke Dynamics

Fast movement → thin lines
Slow movement → thicker strokes
Mimics real-world drawing behavior

3. No-Gap Interpolation

Fills missing points between frames
Ensures continuous stroke rendering

Result: Near pixel-perfect air interaction

Key Features (Live Beta)

🎨 Smart Air Drawing — Draw naturally in mid-air using hand gestures
🎤 Voice Commands — Hands-free control and system interaction
🗣️ Voice-to-Type — Real-time speech-to-text input
🔗 Remote Portal — Gesture-based transfer of images/data between devices ### 🚧 In Active Development
🖐️ Air Mouse — AI-powered cursor control using hand tracking (not yet publicly released)

Open Technical Questions (Looking for Expert Insight)

I’d love feedback from experienced engineers:

1. Real-Time Sync & Latency

Best practices for minimizing lag in gesture-driven UI?
WebSocket vs WebRTC for real-time interaction?

2. Jitter Reduction Techniques

EMA vs Kalman Filter in browser environments
Trade-offs between performance and accuracy?

3. Scaling the System

How would you evolve this into a production-grade system?
Edge computing vs centralized processing?

🌐 Live Demo

https://hci-system.netlify.app
https://sadekulislam.netlify.app

💬 Feedback & Suggestions

I’d really appreciate your honest feedback on this system.

What do you think about the overall architecture?
How can I improve the real-time performance and scalability?
What features or improvements would you suggest next?

I’m actively developing this project and open to learning from experienced engineers.

✨ Final Thought

I’m still a student.
But I believe building systems like this is how we push boundaries.
We don’t wait for the future. We build it.
— Sadekul Islam (Lì Ào / 利奥)
Software Engineering Student | HCI Explorer

Tomorrow's Technology Today: A Software Engineering Journey

Sadekul Islam — Sun, 08 Mar 2026 05:19:51 +0000

As a Software Engineering student at WXUT in China, I often find myself thinking about how the technologies we study today will shape the world tomorrow. Every concept we learn — from algorithms to system design — becomes a small building block of future innovation.

We are living in a time where the boundaries between the physical and digital worlds are slowly fading. Virtual Reality, Augmented Reality, and Artificial Intelligence are no longer distant ideas; they are becoming part of everyday technology. As developers, we are not just observing this transformation — we are helping build it.

The Changing Landscape of Technology

When I look at emerging technologies such as VR, AR, and AI, I don't simply see impressive gadgets. I see complex systems powered by the same core principles that software engineers study every day.

Whether it's solving algorithmic problems in C, optimizing C++ logic for performance, or developing scalable backend services using C# and .NET with MSSQL, each layer of development contributes to the technologies that will define the future.

In reality, the futuristic experiences people see — immersive worlds, intelligent systems, real-time simulations — are built on strong fundamentals in programming and computer science.

Why Problem Solving Still Matters

During my journey learning Data Structures and Algorithms, one idea became very clear: technologies change, but problem solving does not.

Frameworks evolve, tools improve, and programming languages grow more powerful. But the ability to analyze a problem, break it down, and design an efficient solution remains the most valuable skill for any developer.

To move toward tomorrow’s technology, I believe developers should focus on three important areas:

Mastering the Fundamentals

Understanding algorithms, memory management, and system behavior builds the foundation for everything else.

Building Scalable Systems

Modern applications require reliable and high-performance backend systems. Technologies like .NET and relational databases such as MSSQL play a major role in making this possible.

Creating Meaningful User Experiences

Powerful systems must also be usable. Designing intuitive interfaces with tools like React helps transform complex systems into accessible products.

Engineering in China: A Unique Perspective

Studying in Wuxi, China has given me the opportunity to observe technological growth from a very close perspective. The pace of development here is remarkable, and the engineering culture encourages discipline, curiosity, and continuous improvement.

Being surrounded by this environment constantly reminds me that innovation is not just about ideas — it is about consistent effort and learning.

Final Thoughts

Technology has always been a bridge between imagination and reality.

Every time I see a simple “Build Success” message after compiling a program, it feels like a small step toward something larger. Behind every working application, every interactive system, and every digital experience lies thousands of lines of thoughtful engineering.

And that is what makes software engineering exciting — the idea that today's code can become tomorrow's technology.

What are your thoughts on the future of AR, VR, and immersive software experiences? I would love to hear different perspectives from other developers and learners.

About the Author

I'm Sadekul Islam (Lì Ào), a Software Engineering student passionate about problem solving, backend development, Data Structures and Algorithms, and modern web technologies.

🔗 Connect with me:

Portfolio
GitHub
Linkedin
Facebook

Manual Deployment from GitHub to AWS EC2 Using Deploy Keys

Sadekul Islam — Sun, 15 Jun 2025 08:50:18 +0000

Looking to deploy your project quickly — whether it’s a solo mission or an MVP for your startup?

Here’s a clean and reliable way to manually deploy from GitHub to AWS EC2 using Deploy Keys.

No CI/CD tools. No complex setup. Just simple, secure steps.

Step 1: Set Up Your EC2 Instance

Begin by launching an on-demand EC2 instance on AWS. Access this instance via SSH, and use Git to clone or pull your repository. This setup will be similar to your local development environment, except you’ll need to configure environment variables specific to your server.

To ensure your server is secure, configure nginx with SSL certificates. This adds a layer of security and professionalism to your deployment.

Using GitHub Deploy Keys

Deploy keys provide a secure, read-only connection between your EC2 instance and your GitHub repository. Here’s how to set them up:

Step 1: Generate SSH Keys

First, generate an SSH key pair on your EC2 instance:

ssh-keygen -t ed25519 -f ~/.ssh/my_project_deploy_key -C "your_email@example.com"

Using ed25519 instead of the more common RSA provides better security. The -C flag is optional but useful if you plan to use the key for commit signing in addition to deployment.

Step 2: Add the Public Key to GitHub

In your GitHub repository, navigate to Settings > Deploy keys. Click Add Deploy Key, provide a descriptive title like "EC2 Deployment Key", and paste the contents of your public key file (~/.ssh/my_project_deploy_key.pub). For most deployment scenarios, you won’t need to enable write access.

Step 3: Configure SSH for Git

To allow your EC2 instance to access multiple repositories without using the default id_rsa key name, configure your SSH client:

vim ~/.ssh/config

Add the following entries to the file:

Host github.com-my_project
  HostName github.com
  IdentityFile ~/.ssh/my_project_deploy_key
  User git

Host github.com-other_project
  HostName github.com
  IdentityFile ~/.ssh/other_deploy_key
  User git

This configuration allows you to manage multiple repositories with different keys.

To clone your repository, use the configured host:

git clone git@github.com-my_project:your_github_org/your_repo.git

You can then use git pull as needed to update your project.

Improving Your Deployment Process

While this manual setup is quick and effective, it does have some limitations, such as downtime during updates. To minimize downtime, consider using a process manager like pm2, which supports zero-downtime restarts.

As your project grows, SSH-based manual deployments might become cumbersome. Automating your deployment process can save time and reduce errors. You can use GitHub webhooks to trigger automatic deployments or configure your server as a Git remote to push updates directly. This approach can streamline your workflow and enhance efficiency.

Conclusion

Deploying with GitHub and EC2 using deploy keys is a straightforward and effective way to manage your projects, especially for quick prototypes and solo projects. This method allows you to leverage the power of AWS and GitHub without the overhead of more complex deployment strategies. Stay tuned for future posts where we’ll explore advanced deployment techniques and best practices.

Highly Effective 7 Habits for Developers

Sadekul Islam — Sun, 15 Jun 2025 06:45:51 +0000

Success as a software developer doesn’t come by luck or chance. It’s built through years of hard work, continuous learning, and developing good habits. In today’s fast-moving tech world, developers need to keep learning and adapting to stay on top of the latest trends.

In this article, I’ll share 7 habits that will help you become a more effective and successful software developer.

1. Make a Schedule

Just like in school, having a clear schedule helps you organize your day. Plan when and how long you’ll work or learn new skills. This keeps you focused and helps you avoid wasting time.

2. Embrace Mistakes and Learn from Them

Everyone makes mistakes, and that’s okay. What matters is that you learn from them. When something goes wrong, take a moment to understand why and how you can improve next time.

3. Be Consistent

Set aside time daily to practice coding or learning. Consistency helps you make steady progress and spot areas where you need to improve.

4. Find a Mentor

Having an experienced mentor can be a game-changer. They can guide you, offer advice, and share their insights to help you grow faster and tackle challenges better.

5. Work on Real Projects

The best way to learn is by doing. Choose projects that match your skill level and gradually take on harder ones. Real-world experience will sharpen your skills.

6. Don’t Try to Learn Everything at Once

There are countless programming languages and tools out there, but don’t spread yourself too thin. Master one area first, then move on to the next. This helps you become a specialist and stand out.

7. Stay Updated

Tech changes fast! Read articles, watch webinars, attend conferences, and follow industry experts on social media. Staying current will keep your skills relevant.

In short:

Building good habits is the key to improving yourself as a developer. By following these 7 habits, you will not only enhance your skills but also gain confidence and stand out in the tech world. Start today and watch your developer journey transform!

How to Build an awesome developer portfolio website.

Sadekul Islam — Sun, 15 Jun 2025 06:35:13 +0000

As a software developer, having a robust portfolio website is one of the best ways to showcase your technical skills, projects, and professional journey. To help the developer community, I have designed a modern, high-performance portfolio website using Next.js, Tailwind CSS, and EmailJS.

In this guide, I will walk you through the setup process step-by-step so you can deploy your own professional portfolio in minutes!

STEP 01:

Clone the Repository using GitHub link and change the directory to the developer-portfolio.

🚀 Live Demo

Before we start, you can check out my own live portfolio to see the final result:👉sadekulislam.netlify.app

🛠️ Step 01: Clone the Repository

First, clone the project from my GitHub and navigate into the directory.

git clone [https://github.com/Sadekul-me/my-portfolio.git](https://github.com/Sadekul-me/my-portfolio.git)
cd my-portfolio

🛠️ Step 02: Install Dependencies & Customize Data

Install all the necessary packages using npm or yarn.


npm install
# or
yarn

After installation, open the project in your code editor. Navigate to utils/data/ and update the personal information with your own details.

Example (My Configuration):

export const personalData = {
  name: "Sadekul Islam",
  profile: '/profile.png',
  designation: "Software Engineering",
  description: "I am an enthusiastic software developer with a passion that spans both frontend and backend development. My love for technology has led me to explore full-stack development, database management, and software architecture. I believe technology has the power to simplify lives and open new possibilities in the digital world. I am constantly learning new things, finding solutions through creative thinking, and improving my skills. In the future, I aspire to work with international software companies to enhance my expertise and contribute to the advancement of the world through technology. 👨‍💻 My Belief: Technology is not just code; it’s an infinite world of creativity. 🚀",
  email: 'sadekul.dev@gmail.com',
  phone: '+8617715302572',
  address: 'Taihu Campus, Wuxi University of Technology, Wuxi, China',
  github: 'https://github.com/sadekul-me',
  facebook: 'https://www.facebook.com/sadekulislam.me',
  linkedIn: 'https://www.linkedin.com/in/sadekulislam-me/',
  twitter: 'https://x.com/sadekul_me',
  stackOverflow: 'https://stackoverflow.com/users/',
  leetcode: "https://leetcode.com/u/SadekulDev/",
  devUsername: "sadekul-me",
  resume: "https://drive.google.com/drive/folders/1u8xxld068ikacZALKUCpm8vCt53JxWHT"
}

🛠️ Step 03: Environment Setup (EmailJS)

This portfolio uses EmailJS to allow visitors to send messages directly to your email for free. Create a .env file in the root directory and add your credentials:

STEP 03:

Now we will make a .env file and set up our Email.JS credential in a .env file. I am using EmailJs in this project for the user to send mail to me and It's free. The .env file will be the following:

NEXT_PUBLIC_EMAILJS_SERVICE_ID = your_service_id
NEXT_PUBLIC_EMAILJS_TEMPLATE_ID = your_template_id
NEXT_PUBLIC_EMAILJS_PUBLIC_KEY = your_public_key

How to get these keys?

Sign up atEmailJS.com
Create an Email Service (Connect your Gmail) to get the Service ID.
Create an Email Template to get the Template ID.
Go to Account/API Keys to find your Public Key.

🛠️ Step 04: Run & Deploy

Now your portfolio is ready! Run the development server to see it in action:

npm run dev
# or
yarn dev

Open http://localhost:3000 in your browser. Once you're happy with it, you can easily deploy it to Vercel or Netlify.

✨ Final Words

If you find this project helpful, please consider giving a ⭐ to the GitHub Repository.
Let's connect and build something amazing together!
🔗GitHub:
🔗 LinkedIn:
🔗 Facebook:

Happy Coding! 🚀

How to create a Popover using React and Tailwind CSS

Sadekul Islam — Sun, 15 Jun 2025 05:37:41 +0000

Popover UI elements are common in web apps, offering extra info or options when users interact with something. Usually, developers rely on npm libraries for Popovers, but these increase the project’s bundle size. In this article, I’ll guide you through building a lightweight, reusable Popover component using React and Tailwind CSS — with both click and hover triggers — so you can keep your app fast and flexible without extra dependencies.

The Popover component:

// @flow strict
"use client"
import { useEffect, useRef, useState } from "react";

function ReactPopover({
  children,
  content,
  trigger = "click"
}) {
  const [show, setShow] = useState(false);
  const wrapperRef = useRef(null);

  const handleMouseOver = () => {
    if (trigger === "hover") {
      setShow(true);
    };
  };

  const handleMouseLeft = () => {
    if (trigger === "hover") {
      setShow(false);
    };
  };

  useEffect(() => {
    function handleClickOutside(event) {
      if (wrapperRef.current && !wrapperRef.current.contains(event.target)) {
        setShow(false);
      }
    }

    if (show) {
      // Bind the event listener
      document.addEventListener("mousedown", handleClickOutside);
      return () => {
        // Unbind the event listener on clean up
        document.removeEventListener("mousedown", handleClickOutside);
      };
    }
  }, [show, wrapperRef]);

  return (
    <div
      ref={wrapperRef}
      onMouseEnter={handleMouseOver}
      onMouseLeave={handleMouseLeft}
      className="w-fit h-fit relative flex justify-center">
      <div
        onClick={() => setShow(!show)
}
      >
        {children}
      </div>
      <div
        hidden={!show}
        className="min-w-fit w-[200px] h-fit absolute bottom-[100%] z-50 transition-all">
        <div className="rounded bg-white p-3 shadow-[10px_30px_150px_rgba(46,38,92,0.25)] mb-[10px]">
          {content}
        </div>
      </div>
    </div>
  );
};

export default ReactPopover;

In this component the trigger default value is click and you can pass hover as an attribute. When you click outside of the Popover, the Popover will be closed.

Use the Popover component:

import ReactPopover from "@/components/common/react-popover";

const Page = () => {
  return (
    <div className="w-screen h-screen flex justify-center items-center gap-4">
      <ReactPopover
        content={
          <p>This Content Will be render in Popover.</p>
        }
      >
        <button className="bg-indigo-500 px-4 py-1.5 border rounded text-white">
          Click me
        </button>
      </ReactPopover>
      <ReactPopover
        trigger="hover"
        content={
          <p>This Content Will be render in Popover.</p>
        }
      >
        <button className="bg-indigo-500 px-4 py-1.5 border rounded text-white">
          Hover me
        </button>
      </ReactPopover>
    </div>
  );
};

export default Page;

How Does ChatGPT Generate Human-Like Text?

Sadekul Islam — Sun, 15 Jun 2025 05:27:45 +0000

ChatGPT, developed by OpenAI, is a cutting-edge language model that has made a significant impact in natural language processing. It uses deep learning algorithms to generate human-like text based on input, making it a powerful tool for chatbots, content creation, and other natural language applications.

The Core of ChatGPT
At its heart, ChatGPT is built on a transformer-based neural network trained on massive text data. This training helps it understand patterns and relationships between words, enabling it to generate coherent, meaningful text. The transformer architecture excels at learning context, which makes ChatGPT especially good at generating text relevant to the ongoing conversation.

How ChatGPT Generates Text
ChatGPT uses an autoregressive language modeling approach. When you input text, the model converts it into a vector representation, predicts the next word’s probability distribution, and picks the most likely next word. This repeats iteratively, building text word by word until the output reaches the desired length.

One major strength is ChatGPT’s context handling. It understands the flow of conversation and can generate responses that are on-topic and meaningful, making it ideal for chatbot interactions.

Scalability and Fine-tuning
ChatGPT can be fine-tuned for specific tasks by training on specialized datasets. For example, fine-tuning on customer service queries allows it to respond more accurately in that domain. This is done using transfer learning, leveraging the knowledge from large datasets to adapt to smaller, task-specific data.

Real-world Applications
ChatGPT has wide-ranging applications, including:

Content creation (news articles, creative writing, poetry)

Customer service chatbots to handle queries and free human agents

Language translation with context understanding

Its ability to generate coherent and contextually relevant text opens many possibilities in AI-powered applications.

Conclusion
In summary, ChatGPT’s transformer-based deep learning architecture and contextual awareness enable it to generate human-like, meaningful text. Its scalability and fine-tuning capabilities make it a versatile AI tool for many industries. As AI continues to evolve, ChatGPT is set to revolutionize how humans interact with machines.

Disclaimer: This post was also written using ChatGPT.