DEV Community: OneDev

🔁 Recursion — Think Smaller to Solve Bigger

OneDev — Mon, 28 Jul 2025 20:53:44 +0000

Recursion is when a function calls itself to solve a problem by breaking it down into smaller subproblems.

It’s everywhere — from algorithms to UI rendering.

📦 Real-world examples:

File system traversal
DOM rendering in React
Tree/graph traversal
Backtracking problems (e.g. Sudoku, N-Queens)

🧠 Key idea:

Every recursive function should have:

A base case — when to stop
A recursive case — how to reduce the problem

function countDown(n) {
  if (n === 0) return;
  console.log(n);
  countDown(n - 1);
}

🚨 Gotchas:

Recursion can be elegant, but deep recursion may lead to stack overflow.
Sometimes it's better to refactor to an iterative solution.

⚡ TL;DR

Recursion helps solve problems by thinking in terms of subproblems.
Just make sure it has a clear base case to avoid infinite loops.
It's powerful, but use it wisely — especially with large inputs.

💬 Want a post with real coding problems that use recursion? Let me know!

The JavaScript Ternary Operator — Your New Best Friend for Clean Code 🚀

OneDev — Tue, 15 Jul 2025 13:33:31 +0000

If you’re still writing simple if...else blocks like it’s 1999, let me introduce you to a little gem: the ternary operator. It’s the fastest way to make your code cleaner, shorter, and yes—way cooler.

🧠 What is it?

Think of the ternary operator as a quick decision maker:

condition ? doThisIfTrue : doThatIfFalse;

It’s like asking your code: “Hey, is this true? If yes, do this. If no, do that.”

✨ Why should you care?

Because it saves you from writing bulky code like this:

let message;
if (isLoggedIn) {
  message = "Welcome back!";
} else {
  message = "Please log in.";
}

Instead, just do this:

const message = isLoggedIn ? "Welcome back!" : "Please log in.";

Boom! One line, same result.

🔥 Real talk — when to use it?

✅ Great for quick checks and simple assignments.
✅ Perfect inside JSX for React components.
⚠️ Avoid when logic gets complicated — readability > brevity!

💡 Pro tip: Keep it simple!

Nested ternaries are tempting but can turn your code into spaghetti:

const status = score > 90 ? "A" : score > 75 ? "B" : "C";

Use with care and add comments if needed.

✅ Challenge

Replace your next simple if...else with a ternary. See how much cleaner your code looks!
Got a favorite ternary trick? Drop it below and let’s share the love 💙👇

What Is a Trie? The Data Structure Behind Autocomplete

OneDev — Tue, 15 Jul 2025 11:00:00 +0000

Ever wondered how search boxes suggest words as you type? Or how a spell checker knows what you probably meant to write?

Behind the scenes, there's a powerful but often underrated data structure making it all possible: the Trie (pronounced "try").

Let’s take a look 👇

🔠 What Is a Trie?

A Trie, also known as a prefix tree, is a tree-like data structure used to store a dynamic set of strings — especially useful for prefix-based lookups.

Each node in a trie represents a character, and by connecting nodes from top to bottom, you can represent entire words.

🧠 Real-World Use Cases

Tries shine when you’re dealing with words, prefixes, or partial matches. You’ll find them behind:

Autocomplete and search suggestions (e.g. Google search, VSCode IntelliSense)
Spell checkers and correctors
IP routing (longest prefix matching)
Word games like Boggle or Scrabble solvers
Dictionary or keyword matching systems

🔍 Why Not Just Use an Array or Hash Table?

Let’s say you have a list of 100,000 words. If you want to find all words that start with "cat", a trie can do that faster and more efficiently than scanning every word in an array or using a hash table.

Why? Because the structure of a trie naturally groups words by their prefixes, making lookups almost instantaneous.

⚙️ How It Works (At a High Level)

Each node represents a single character.
Children nodes represent possible next characters.
Words are built by walking down from the root node.
A special flag marks the end of a valid word.

Example: Storing "cat" and "car"

        (root)
        /   \
      c     ...
      |
      a
     / \
    t   r

From the root, "c" leads to "a", which leads to "t" or "r" — forming "cat" and "car".

🚀 Benefits

Fast prefix searches (often O(k), where k is the length of the word)
Efficient memory usage for shared prefixes
Flexible: can be extended to support wildcard matching, autocomplete ranking, etc.

🤔 When to Reach for a Trie

You’re implementing a feature based on prefix matching
You need to do lots of lookups from a large dictionary of words
You want to build something like autocomplete, spellcheck, or typeahead

🧠 TL;DR

A Trie is a tree-like data structure designed for efficient prefix-based string matching.
It powers real-world features like autocomplete, search suggestions, and spellcheckers.
If you’re dealing with lots of strings and care about prefixes — Tries are worth knowing.

What Is a Heap in programming? And Why You’ve Probably Used One Without Knowing

OneDev — Mon, 14 Jul 2025 21:38:30 +0000

You might have heard the word "heap" tossed around in computer science — usually in the same breath as priority queues or sorting algorithms.

But what exactly is a heap, and why should you care?

Let’s break it down 👇

🧱 What is a Heap?

A heap is a specialized tree-based data structure that satisfies the heap property:

In a max heap, every parent node is greater than or equal to its children.
In a min heap, every parent node is less than or equal to its children.

This structure lets you quickly access the maximum (or minimum) value — which is always right at the top.

Think of it as a "semi-sorted" tree optimized for fast access to the most important item.

🧠 Real-World Use Cases

Here’s where heaps come in handy — and where you’ve probably been using one under the hood:

Priority Queues – When tasks are ordered by importance (e.g. CPU scheduling, print queues, A* pathfinding).
Heapsort Algorithm – A comparison-based sorting algorithm built on heap structures.
Dijkstra’s Algorithm – Used in Google Maps and GPS apps to find the shortest path.
Top-K Problems – Finding the top 5 trending posts, best scores, or cheapest prices.
Event Scheduling – Managing time-based triggers in simulations or games.

Even if you haven’t written a heap yourself, if you’ve used a priority queue in a language like Java, Python, or C++, you’ve likely worked with a heap already.

⚙️ How Does a Heap Work?

It’s not a fully sorted structure.
It’s usually implemented as an array, not a fancy tree in memory.
You can insert an item in O(log n) time.
You can remove the top item in O(log n) time.
You can peek at the top in O(1) time.

Pretty efficient, right?

💬 Why It’s Worth Knowing

You don’t need heaps every day — but when you do, they solve specific problems extremely well. They shine when:

You only care about the largest or smallest item at any time.
You’re dealing with tasks that need to be prioritized.
You want to keep track of the top k results without sorting the entire dataset.

🔚 TL;DR

A heap is a tree-based structure that helps you quickly access the min or max element.
It’s the backbone of priority queues, heapsort, and shortest path algorithms.
You’ve probably used one without even knowing it — and now you do. 💡

Make requests to your API through AI 👇

OneDev — Mon, 30 Jun 2025 23:35:30 +0000

OneDev

Jun 24 '25

Build AI-Driven API Requests in Your React App — With Natural Language

#react #ai #gemini #webdev

Comments

1 min read

Trees & Graphs Explained Simply — With Real-World Examples

OneDev — Mon, 30 Jun 2025 20:14:22 +0000

If you're learning data structures, you've probably heard that trees and graphs are “advanced” — but the truth is, they show up everywhere, and you’ve likely been using them without even realizing it.

Let’s break them down simply — with real-world use cases that are actually used in practice.

🌳 Trees — Hierarchies Made Simple

A tree is a special kind of graph with a clear hierarchy. Think of it as a top-down structure where each item (called a node) can have children — but only one parent.

🧠 Real-World Examples (Yes, these are real!)

File systems: Most operating systems organize files as a tree: /root → Documents → Project → File.txt
HTML DOM: The browser uses a tree to structure the HTML of a page.
Company org charts: HR tools represent reporting lines using trees.
UI component trees: Frameworks like React render your UI using nested component trees.
Syntax trees: Compilers, linters, and bundlers use abstract syntax trees (ASTs) to parse and analyze code.

🔗 Graphs — Flexible Connections

A graph is a more general structure where nodes can connect to any number of other nodes — in any direction. Great for modeling networks and relationships.

🧠 Real-World Examples (Also real and widely used)

Social networks: Facebook, Twitter, and LinkedIn are built on user connection graphs.
Maps and GPS: Locations are nodes, and roads are edges — this powers Google Maps and Waze.
Recommendation systems: Netflix and Amazon use graph models to suggest related content or products.
Web crawling: Search engines crawl the web as a graph of pages and links.
Dependency graphs: Tools like npm, Webpack, and Babel use graphs to track dependencies between files or modules.

🧩 Tree vs Graph — What's the Difference?

Feature	Tree	Graph
Structure	Hierarchical (no cycles)	Network (can have cycles)
Parent per node	Only one	Can have many
Common use case	Nested data	Connected data

A tree is a type of graph, but not all graphs are trees.

🧠 TL;DR

Trees and graphs are not just theoretical — they're used in real systems you interact with daily.
Trees model hierarchical relationships — like folders, DOM elements, or organizational charts.
Graphs model connections and networks — like social media, maps, recommendations, and web pages.
Just knowing how to recognize them helps you make sense of data structures in your code and APIs.

Let me know if you’d like a follow-up post with code examples or how to actually work with these in JavaScript, Python, or Java! 🚀

Build AI-Driven API Requests in Your React App — With Natural Language

OneDev — Tue, 24 Jun 2025 18:25:27 +0000

What if you could skip forms entirely and just tell your app what to do?

In this video, I show you how to integrate AI into a React app to generate API request payloads using natural language — even with voice input.

Instead of filling out a form to create a user, imagine typing or saying:

“Create a user with the email example@gmail.com, who is 30 years old, with phone number 123456, and password ABCDEF.”

The AI takes this prompt and converts it into a proper JSON payload — and your app then sends it to the API, just like a traditional form would.

We’ll walk through it step by step:

Sending text prompts to a GenAI model
Recording voice input and transcribing it to text
Parsing the result into JSON and making the POST request

💡 You’ll end up with a hands-free, natural language interface for your backend — a whole new way to think about user input.

🎥 Watch the full tutorial here:

👉 YouTube Video Link

Let me know what you think — and if you'd like to see more voice + AI experiments in future videos!

Stop Typing Interfaces Manually — This VSCode Extension Does It for You

OneDev — Fri, 06 Jun 2025 19:09:06 +0000

Tired of writing TypeScript interfaces or objects by hand from JSON?

🧩 Paste JSON as Code is a VSCode extension that does it for you — instantly.

Just copy your JSON → open the Command Palette → select Paste JSON as Code → pick your language → done.

Supports:

TypeScript
JavaScript
C#
Go
And more

🔗 Get it on the VSCode Marketplace

Try it once — it might just become part of your daily workflow.

Handling Permissions in React Native 🚀

OneDev — Fri, 06 Jun 2025 18:58:09 +0000

Working with camera, location, or microphone access in React Native? 📲
Then you’ve probably run into permission headaches on iOS and Android.

I just dropped a new video where I cover how to check, request, and manage permissions using react-native-permissions — one of the most reliable libraries for this task.

🎥 What’s inside the video?

Overview of how mobile permissions work
Setting up the react-native-permissions library
Checking and requesting permissions cleanly
Dealing with blocked permissions using openSettings
A real-world example: requesting camera access

🔗 Watch the full video here

📦 I’ve also shared the full codebase on GitHub so you can follow along easily.

🔗 GitHub Repo

Make sure to understand this before starting with NextJS 👇

OneDev — Mon, 02 Jun 2025 21:13:57 +0000

OneDev

Apr 22 '25

Next.js Pages Router vs App Router — What’s the Difference?

#nextjs #react #javascript #webdev

Comments

2 min read

📦 Stacks & Queues: Two Sides of the Same Coin

OneDev — Mon, 02 Jun 2025 15:00:00 +0000

When it comes to data structures, Stacks and Queues are two of the simplest — and most powerful — tools in your problem-solving toolkit.

They're like the behind-the-scenes stagehands that quietly manage order, timing, and flow in countless algorithms and real-world systems.

Let’s take a look.

🥞 Stack — Last In, First Out (LIFO)

Imagine a stack of plates. You can only take the top plate off the stack, and you can only add new ones to the top.

That’s how a Stack works:

Push → add to the top
Pop → remove from the top
Peek → look at the top without removing it

Real-world examples:

Undo/Redo functionality
Navigation History (Browser or App Screens)
Expression Evaluation & Parsing
Backtracking Algorithms

Example in React Native Context

React Navigation’s stack navigator (screen navigation stack)

Code Example (JavaScript):

const stack = [];
stack.push(1);
stack.push(2);
console.log(stack.pop()); // 2
console.log(stack.pop()); // 1

🚶 Queue — First In, First Out (FIFO)

Now picture a line at the coffee shop. The first person to enter is the first one to get served.

That’s the idea of a Queue:

Enqueue → add to the end
Dequeue → remove from the front
Peek → look at the front without removing

Real-world examples:

Task scheduling
Message Queues
Print Queue
Event Handling (UI events like clicks or keystrokes)

Example in React Native Context:

Offline message sending queue in a chat app — messages are queued if the user is offline, then sent one by one when connection is restored

Code Example (JavaScript):

const queue = [];
queue.push('A');
queue.push('B');
console.log(queue.shift()); // 'A'
console.log(queue.shift()); // 'B'

🔁 Same Concept, Different Languages

While the concept of stacks and queues remains consistent, each programming language has its own way of implementing them:

Language	Stack	Queue
JavaScript	`Array.push()` / `.pop()`	`Array.push()` / `.shift()`
Python	`list`, `collections.deque`	`collections.deque`, `queue.Queue`
Java	`Stack`, `Deque`	`Queue`, `LinkedList`, `PriorityQueue`

✅ Java provides dedicated, type-safe classes out of the box — ideal for enterprise-scale apps.

⚡ Python hits the sweet spot with easy syntax and optimized utilities like deque.

🧪 JavaScript keeps it simple — arrays get the job done, but aren’t true queues or stacks under the hood.

👉 If you want to know how to create proper stacks and queues in JavaScript step by step, let me know in the comments — happy to make a follow-up!

🧠 TL;DR

Stacks = LIFO (Last In, First Out)
Queues = FIFO (First In, First Out)
They're used everywhere, from compilers to servers
You can implement both using arrays, but some languages give you more powerful tools

✌️ That’s a Wrap!

These might be simple structures, but don’t underestimate them. They’re building blocks for everything from graph traversals to memory management.

Got questions or want a deeper dive into how they’re used in algorithms? Drop a comment!

Linked Lists — A Core Building Block in Data Structures

OneDev — Thu, 22 May 2025 16:00:00 +0000

Arrays usually get all the love. They're easy to use, built into every language, and great for most tasks.

But there’s another data structure that quietly powers a lot of efficient solutions: the linked list.

It’s not about speed for direct access — it’s about flexibility, efficient insertions, and being the foundation for structures like stacks, queues, and even graphs.

Let’s give it the spotlight it deserves.

🤔 What Is a Linked List?

A linked list is a linear data structure made up of nodes.
Each node holds:

A value
A reference (or pointer) to the next node

A simple representation:

[10] → [20] → [30] → null

Unlike arrays, elements in a linked list are not stored in contiguous memory. This makes linked lists:

More memory flexible
Ideal for fast insertions and deletions
Slower for direct access to elements by index

🛠️ Use Cases: When Are Linked Lists Useful?

Use a linked list when:

You need dynamic memory allocation
You perform frequent insertions/deletions
You don't require constant-time random access (O(1) index lookup)

Some real-world applications:

Undo/redo functionality in editors
Browser history
Queues and stacks
Hash table chaining (collision resolution)

🧠 Types of Linked Lists

Singly Linked List – Each node points to the next
Doubly Linked List – Each node points to both next and previous
Circular Linked List – Last node points back to the first node

🧪 Let’s Build a Simple Linked List in JavaScript

Here’s a minimal implementation of a singly linked list:

// Each node in the linked list holds a value and a pointer to the next node
class Node {
  constructor(value) {
    this.value = value; // Store the actual data
    this.next = null;   // Pointer to the next node (default: null)
  }
}

// LinkedList class manages the overall list
class LinkedList {
  constructor() {
    this.head = null; // Start with an empty list
  }

  // Adds a new node at the end of the list
  append(value) {
    const newNode = new Node(value);

    // If list is empty, set head to the new node
    if (!this.head) {
      this.head = newNode;
      return;
    }

    // Otherwise, traverse to the end of the list
    let current = this.head;

    while (current.next) {
      current = current.next;
    }

    // Link the last node to the new node
    current.next = newNode;
  }

  // Prints out the list in a readable format
  print() {
    let current = this.head;
    let output = '';

    // Traverse and build the output string
    while (current) {
      output += `[${current.value}] → `;
      current = current.next;
    }

    output += 'null'; // End of the list
    console.log(output);
  }
}

// Example usage
const list = new LinkedList();
list.append(10);
list.append(20);
list.append(30);
list.print(); // Output: [10] → [20] → [30] → null

⏱️ Time Complexity Overview

Operation	Time Complexity
Insert at Head	O(1)
Insert at Tail	O(n)
Search	O(n)
Delete Node	O(n)
Access by Index	O(n)

⚖️ Pros & Cons

✅ Pros:

Efficient insertions/deletions
Dynamic memory use (no resizing)
Great for stacks, queues, etc.

❌ Cons:

Slower access time (O(n) for index)
Uses extra memory (pointers)
More complex to implement than arrays

🧵 TL;DR

A Linked List is a dynamic, node-based data structure.
It’s ideal when you don’t know the final size of your collection.
Although not as fast for access, it excels in insertions and deletions.
It lays the foundation for many advanced data structures.

Thanks for reading! 🙌

If you're enjoying the series, feel free to follow me here or check out my YouTube channel for more hands-on dev content.