Forem: Shubhainder Singh

Why DSA is Essential for Every Developer (Frontend, Backend, or Full Stack)

Shubhainder Singh — Wed, 26 Feb 2025 07:31:46 +0000

"DSA is just for interviews!" — The Biggest Lie Ever

If you think Data Structures and Algorithms (DSA) are only useful for cracking FAANG interviews, you’re missing the bigger picture. DSA is like knowing how to navigate rush-hour traffic efficiently—sure, you can get by without it, but wouldn’t you rather take the fastest, smoothest route? Just like Uber optimizes ride matching or Netflix ensures your favorite shows load instantly, DSA helps you write efficient, scalable code.

DSA = Problem-Solving Superpower

At its core, DSA teaches you how to think critically and optimize solutions. Writing code is easy, but writing efficient code that scales is what makes a good developer.

Example: Imagine you’re working at Amazon. Your task is to show personalized product recommendations in milliseconds. You could brute-force it by looping through a million items, or you could use HashMaps or Trees to make retrieval fast. Your algorithm just saved Black Friday sales.

Don’t Just Learn DSA, Apply It

Most people treat DSA like a checklist—Leetcode grind, interview, forget everything. But real magic happens when you apply it in real projects.

How to Start Studying DSA

Start from the basics – If you’re new, begin with understanding what DSA is, what algorithms are, and the basic data structures (arrays, linked lists, stacks, queues). Learn basic math concepts needed for DSA, such as logarithms and complexity analysis.
Solve questions immediately – Don’t wait to finish a course. Read the problem properly, break it down step by step, and write your approach before jumping to solutions.
Explain the problem to yourself – Try to come up with a brute force solution first, then refine it by optimizing step by step.
Implement DSA in projects – Use DSA concepts in your personal or work projects to see real-world applications.
Read other people’s code – Learning from experienced developers helps you understand better approaches and improves your problem-solving mindset.

DSA = Your Secret Weapon as a Developer

You don’t need to be a competitive coder, but mastering basic DSA concepts will make you a better developer. It’s not about interviews—it’s about writing clean, fast, and scalable code. You wouldn’t build a skyscraper without a solid foundation, so why build software without understanding how to handle data properly?

Stop seeing DSA as a chore—start using it as your toolkit to level up your skills.

Share you DSA journey or insights in the comments!

Debugging Strategies: Real-World Scenarios and Solutions

Shubhainder Singh — Wed, 19 Feb 2025 06:51:22 +0000

Debugging Like a Pro: Strategies to Fix Bugs Faster

Let’s be real: debugging is a core part of being a developer. Some days, you’re a genius fixing things in seconds; other days, you’re staring at an error for hours only to realize you misspelled a variable. Debugging isn’t just about fixing code; it’s about problem-solving, staying patient, and sometimes just taking a break before the screen starts mocking you.

Today, we’re diving into battle-tested debugging strategies, real-world examples, and how to stay (relatively) sane while hunting down bugs.

1. Read the Error Message (No, Seriously!)

The first rule of debugging? Read the error message. Yes, it sounds obvious, but too many developers (my past self included) immediately panic instead of actually reading what the system is trying to say.

Example:

Ever seen this in Python?

TypeError: 'NoneType' object is not subscriptable

Translation: You’re trying to access an index of something that doesn’t exist. Somewhere in your code, you assumed a variable was a list or dictionary, but it’s actually None.

Fix: Print your variables, use a debugger, and trace where that None is sneaking in.

2. Explain It to a Rubber Duck (Or Anything That Listens)

Ever tried explaining your problem to someone and suddenly realized the mistake? That’s called rubber duck debugging. It works because explaining your thought process forces you to see gaps in your logic. If you don’t have a teammate, talk to a rubber duck, yourself (recommended), a pet, or even a plant. They won’t judge (probably).

Example:

Once, I spent hours debugging a function that wasn’t returning the right value. When I explained it to a friend, I realized I was modifying the wrong variable the entire time. Facepalm moment.

3. The Binary Search Method: Cut the Problem in Half

If you’re dealing with a large chunk of code, don’t try to debug everything at once. Instead, comment out half and check if the bug still exists. Keep narrowing it down until you isolate the issue. It’s like binary search, but for debugging pain.

Example:

A button click wasn’t working in my React app. Instead of checking every function, I commented out different parts of the handler until I found the culprit—a state mutation inside a useEffect.

4. Print Statements vs. Debugger: Use Both Wisely

Some developers swear by console.log(), others by proper debuggers. The truth? Both are useful, depending on the situation.

✅ Print statements (console.log, print, fmt.Println) are great for quick checks.

✅ A debugger lets you pause execution and inspect variables in real-time.

Example:

While debugging a Next.js API route, I first used console.log() to check if the request body was parsed correctly. Once I needed deeper insights, I switched to the VS Code debugger to step through function calls.

5. Git Is Your Time Machine

If a bug appeared out of nowhere, check your Git history. Sometimes, past-you made a mistake, and present-you is suffering the consequences.

Example:

A colleague once spent hours fixing a broken feature, only to realize they had deleted an important line of code in their last commit. git blame showed exactly when (and who) made the change. A quick rollback, and boom—problem solved.

6. Google Like a Pro

Knowing how to Google is an underrated skill. The more specific your search, the faster you’ll find a solution.

✅ Bad: "React not working"

✅ Good: "React useEffect not triggering on state update with async function"

Example:

Once, I had a weird PostgreSQL bug. Instead of searching blindly, I copied the exact error message into Google. Turns out, I was using an outdated database version missing a key feature. One Stack Overflow thread later, problem solved.

7. Walk Away (Yes, That’s a Strategy)

If you’ve been debugging for hours with no progress, take a break. Your brain keeps working in the background, and sometimes the solution pops into your head when you least expect it.

Example:

I once spent an entire afternoon debugging a test failure. Frustrated, I grabbed coffee. When I came back, I instantly saw the issue—a missing mock dependency. Could’ve saved myself hours if I had just stepped away earlier.

Final Thoughts

Bugs are inevitable, but they don’t have to be nightmares. The best developers aren’t the ones who never introduce bugs (that’s impossible), but the ones who can track them down efficiently. Stay patient, use the right tools, and don’t be afraid to ask for help.

Oh, and always keep a rubber duck handy. You never know when you’ll need it. 🦆

Happy debugging! 🐛🔍🚀

Upload to S3

Shubhainder Singh — Thu, 05 Dec 2024 06:09:26 +0000

Hello Devs! 👋

If you've ever wanted to integrate file uploads directly into your Next.js app, this post is for you! We'll walk through how to upload files to AWS S3 using the AWS SDK (nextjs + AWS S3 + clerk auth). Whether you're building an image gallery, document manager, or any app that deals with file storage, S3 is a great choice.

Let’s dive in! 🏊‍♂️

Why S3? 🤔
Amazon S3 (Simple Storage Service) is a scalable, durable, and secure file storage solution. It's great for:

Storing user uploads (images, PDFs, etc.)
Backing up important data
Serving static assets (like images or videos)

Setting Up Your Project 🛠️

Prerequisites

Make sure you have:

A Next.js app
An AWS account
AWS credentials with permissions to access S3 (comment if you need a
post on how to access S3)

Install AWS SDK

First, install the AWS SDK in your project:

npm install @aws-sdk/client-s3

*Backend Setup: API Routes for Uploading Files *📡

File: app/api/upload/route.ts

This API route will handle file uploads.

import { NextRequest, NextResponse } from 'next/server';
import { S3Client, PutObjectCommand } from '@aws-sdk/client-s3';

const s3Client = new S3Client({ region: process.env.AWS_S3_REGION });

export async function POST(request: NextRequest) {
  try {
    const formData = await request.formData();
    const file = formData.get('file') as File;

    if (!file) {
      return NextResponse.json({ error: 'No file uploaded' }, { status: 400 });
    }

    const bytes = await file.arrayBuffer();
    const buffer = Buffer.from(bytes);

    const uploadParams = {
      Bucket: process.env.AWS_S3_BUCKET_NAME!,
      Key: `uploads/${Date.now()}-${file.name}`,
      Body: buffer,
      ContentType: file.type,
    };

    await s3Client.send(new PutObjectCommand(uploadParams));

    return NextResponse.json({ success: true });
  } catch (error) {
    return NextResponse.json({ error: 'Upload failed', details: error }, { status: 500 });
  }
}

*Frontend Setup: File Upload UI *📤

Create a simple upload form in your Next.js app.

File: components/Upload.tsx

import { useState } from 'react';

export default function Upload() {
  const [file, setFile] = useState<File | null>(null);
  const [message, setMessage] = useState('');

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!file) return;

    const formData = new FormData();
    formData.append('file', file);

    const res = await fetch('/api/upload', {
      method: 'POST',
      body: formData,
    });

    if (res.ok) {
      setMessage('File uploaded successfully!');
    } else {
      setMessage('Failed to upload file.');
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="file" onChange={(e) => setFile(e.target.files?.[0] || null)} />
      <button type="submit">Upload</button>
      {message && <p>{message}</p>}
    </form>
  );
}

Testing Your Setup 🧪
Start your Next.js app:

npm run dev

Navigate to your upload form.
Select a file and hit Upload.
Head over to your S3 bucket and confirm the file is there!

Bonus: Listing Files from S3 📜
Want to display uploaded files? Here’s how:

File: app/api/files/route.ts

import { S3Client, ListObjectsV2Command } from '@aws-sdk/client-s3';
import { NextResponse } from 'next/server';

const s3Client = new S3Client({ region: process.env.AWS_S3_REGION });

export async function GET() {
  try {
    const command = new ListObjectsV2Command({
      Bucket: process.env.AWS_S3_BUCKET_NAME!,
    });

    const response = await s3Client.send(command);
    const files = response.Contents?.map((file) => ({
      name: file.Key,
      size: file.Size,
      lastModified: file.LastModified,
    }));

    return NextResponse.json({ files });
  } catch (error) {
    return NextResponse.json({ error: 'Failed to fetch files' }, { status: 500 });
  }
}

Wrapping Up 🎁
And that’s it! You’ve now integrated file uploads to S3 in your Next.js app. This setup is production-ready, scalable, and easy to extend. Do you have ideas for improvements? Fork the project and share your contributions!

Github repository

Let me know if this was helpful, and feel free to drop your thoughts or questions below. Happy coding! 💻✨