Forem: Rahul Kumar Barnwal

Google Stitch: The New AI UI Design Tool That Turns Prompts into Pixel-Perfect Interfaces

Rahul Kumar Barnwal — Fri, 23 May 2025 19:13:33 +0000

Are you a developer or designer searching for a smarter way to build UIs? Meet Google Stitch — the AI-powered UI design tool transforming how we design and develop interfaces.

🤖 What is Google Stitch?

Google Stitch is a new experimental tool introduced at Google I/O 2025. Built using the Gemini 2.5 Pro model, Stitch allows developers and designers to generate UI components and entire interfaces using just natural language or image inputs.

Think of it as ChatGPT meets Figma meets Frontend Code Generator — all in one seamless experience.

Google Stitch AI UI design tool AI-powered UI generator Stitch by Google Design UI with AI

✨ Key Features of Google Stitch

Design UIs with Text Prompts Type a natural-language description like:

“Create a dark-themed mobile app homepage with a navbar, profile card, and floating action button.”

Stitch instantly generates the corresponding UI — complete with code and layout.

Turn Sketches into UI Components

Upload a wireframe, app screenshot, or sketch. Stitch interprets it and produces editable, professional-looking components.

Instant Frontend Code

Generate clean, production-ready HTML/CSS code that can be exported directly or modified in Figma.

Export to Figma

Want to fine-tune your designs? Stitch includes a “Paste to Figma” button to seamlessly transfer your layout into your design workflow.

💡 Why Google Stitch is a Game-Changer

Traditional UI Workflow With Google Stitch
Wireframe > Mockup > Prototype > Code Prompt/Image > UI + Code
Requires multiple tools Unified, AI-powered
Hours or days Minutes

Stitch saves time, simplifies iteration, and bridges the gap between idea and implementation.

🚀 Use Cases for Google Stitch
💼 Startups creating quick MVPs

🎨 Designers turning sketches into live UIs

👩‍💻 Frontend devs prototyping layouts in seconds

🧪 Hackathon teams who need to move fast

🔍 FAQ: People Also Ask

✅ What is Google Stitch?

A free AI-powered UI design tool from Google that generates interfaces using text or image prompts.

✅ Is Google Stitch free to use?

Yes, it's free as part of Google Labs’ experimental tools (subject to sign-in and usage limits).

✅ How do I access Stitch by Google?

Visit https://stitch.withgoogle.com and log in with your Google account.

✅ Can Stitch export to design tools?

Yes. It supports direct export to Figma and provides front-end-ready code (HTML/CSS).

🧪 How to Get Started with Stitch by Google

Go to Google Stitch
Log in with your Google account
Enter a prompt or upload a sketch
Review and refine your generated UI
Export to Figma or copy the HTML/CSS code

🔚 Final Thoughts: Stitch Is the Future of UI Design

Google Stitch isn’t just another AI tool — it’s a paradigm shift in UI/UX creation. Whether you're a developer, designer, or founder, this tool lets you turn imagination into interfaces instantly.

🧠 Think it. Prompt it. Build it.

📝 If you found this helpful, give it a 💖, share it, and drop your thoughts in the comments!

LeetCode Challenge: 49. Group Anagrams - JavaScript Solution 🚀

Rahul Kumar Barnwal — Tue, 01 Apr 2025 07:21:53 +0000

Top Interview 150

The Group Anagrams problem involves grouping words that are anagrams of each other. Let’s solve LeetCode 49: Group Anagrams step by step.

🚀 Problem Description

Given an array of strings strs, group all strings that are anagrams.

An anagram is a word or phrase formed by rearranging the letters of another. Both strings must have the same characters in the same frequencies.

💡 Examples

Example 1

Input: strs = ["eat", "tea", "tan", "ate", "nat", "bat"]  
Output: [["bat"], ["nat", "tan"], ["ate", "eat", "tea"]]

Example 2

Input: strs = [""]  
Output: [[""]]

Example 3

Input: strs = ["a"]  
Output: [["a"]]

🏆 JavaScript Solution

The key idea is to use a hash map to group anagrams. Each anagram has the same sorted character sequence, which we can use as the key.

Implementation

var groupAnagrams = function(strs) {
    const map = new Map();

    for (let str of strs) {
        const sortedStr = str.split("").sort().join("");


        if (!map.has(sortedStr)) {
            map.set(sortedStr, []);
        }
        map.get(sortedStr).push(str);
    }

    return Array.from(map.values());
};

🔍 How It Works

Sort Each String:
- For each string in strs, sort its characters alphabetically.
- Use the sorted string as the key in the hash map.
Group Strings by Key:
- If the sorted string is not already a key in the map, add it with an empty array.
- Append the original string to the array corresponding to the key.
Return Groups:
- Extract the grouped arrays from the map and return them.

🔑 Complexity Analysis

Time Complexity:
- Sorting each string: O(m⋅nlogn), where n is the average string length and m is the number of strings.
- Inserting into the hash map: O(m).
- Total: O(m⋅nlogn).
Space Complexity:
- The hash map stores O(m) keys and values.

📋 Dry Run

Input: strs = ["eat", "tea", "tan", "ate", "nat", "bat"]

Output: [["eat", "tea", "ate"], ["tan", "nat"], ["bat"]]

Follow-Up: Faster Grouping Using Character Count

Instead of sorting strings (which costs O(nlogn)), we can use the character count as the key.

Implementation

var groupAnagrams = function(strs) {
    const map = new Map();

    for (let str of strs) {
        const charCount = Array(26).fill(0);

        for (let char of str) {
            charCount[char.charCodeAt(0) - "a".charCodeAt(0)]++;
        }

        const key = charCount.join("#");

        if (!map.has(key)) {
            map.set(key, []);
        }
        map.get(key).push(str);
    }

    return Array.from(map.values());
};

Complexity (Character Count Approach)

Time Complexity: O(m⋅n), where m is the number of strings and n is the average string length.
- Counting characters is O(n).
Space Complexity: O(m) for the hash map.

✨ Pro Tips for Interviews

Highlight Trade-Offs:
- Sorting strings is simpler to implement but slower than using character counts.
Edge Cases:
- Empty strings: [""].
- Single-character strings: ["a", "b", "a"].

📚 Learn More

Check out the full explanation and code walkthrough on my previous Dev.to post:
👉 Valid Anagram - JavaScript Solution

What’s your preferred method to solve this problem? Let’s discuss! 🚀

LeetCode Challenge: 242. Valid Anagram - JavaScript Solution 🚀

Rahul Kumar Barnwal — Thu, 16 Jan 2025 08:33:06 +0000

Top Interview 150

The Valid Anagram problem is a straightforward challenge involving string manipulation and character counting. Let’s solve LeetCode 242: Valid Anagram step by step.

🚀 Problem Description

Given two strings s and t:

Return true if t is an anagram of s.
Otherwise, return false.

An anagram is a word or phrase formed by rearranging the letters of another. Both strings must have the same characters in the same frequencies.

💡 Examples

Example 1

Input: s = "anagram", t = "nagaram"  
Output: true  
Explanation: Both strings have the same characters with the same frequencies.

Example 2

Input: s = "rat", t = "car"  
Output: false  
Explanation: The characters in `t` are not the same as in `s`.

🏆 JavaScript Solution

We can efficiently solve this problem by counting the frequency of characters in both strings and comparing the counts.

Implementation

var isAnagram = function(s, t) {
    if (s.length !== t.length) return false;

    const charCount = {};

    for (let char of s) {
        charCount[char] = (charCount[char] || 0) + 1;
    }

    for (let char of t) {
        if (!charCount[char]) return false;
        charCount[char]--;
    }

    return true;
};

🔍 How It Works

Count Characters in s:
- Use a hash map (charCount) to track the frequency of each character in s.
Subtract Characters in t:
- For each character in t, decrement its count in charCount.
- If a character in t is missing or its count becomes negative, return false.
Return True:
- If all characters match and their counts balance, return true.

🔑 Complexity Analysis

Time Complexity: O(n), where n is the length of s (or t).
- Each character is processed once.
Space Complexity: O(1), as the hash map stores at most 26 entries for lowercase English letters.

📋 Dry Run

Input: s = "anagram", t = "nagaram"

Output: true

Follow-Up: Unicode Characters
For inputs containing Unicode characters, the solution can be adapted as follows:

Instead of assuming lowercase English letters, allow any character as a key in the hash map.
This approach is already supported by the above implementation, as JavaScript hash maps ({} or Map) can store any string as a key.

✨ Pro Tips for Interviews

Discuss Sorting Approach:
- An alternative solution involves sorting both strings and comparing them.
- Time Complexity: O(nlogn) due to sorting.

var isAnagram = function(s, t) {
    return s.split("").sort().join("") === t.split("").sort().join("");
};

Clarify Edge Cases:
- Different lengths: s = "abc", t = "abcd".
- Empty strings: s = "", t = "".

📚 Learn More

Check out the full explanation and code walkthrough on my previous Dev.to post:
👉 Word Pattern - JavaScript Solution

What’s your preferred method to solve this problem? Let’s discuss! 🚀

LeetCode Challenge: 290. Word Pattern - JavaScript Solution 🚀

Rahul Kumar Barnwal — Wed, 15 Jan 2025 07:51:00 +0000

Top Interview 150

The Word Pattern problem tests your ability to handle bijective mappings between characters and words. Let’s solve LeetCode 290: Word Pattern step by step.

🚀 Problem Description

Given:

A pattern string containing only lowercase letters.
A string s consisting of words separated by spaces.

Return true if s follows the same pattern as pattern, i.e.:

Each character in pattern maps to exactly one word in s.
Each word in s maps to exactly one character in pattern.

💡 Examples

Example 1

Input: pattern = "abba", s = "dog cat cat dog"  
Output: true  
Explanation: 'a' -> "dog", 'b' -> "cat".

Example 2

Input: pattern = "abba", s = "dog cat cat fish"  
Output: false  
Explanation: 'a' -> "dog", but 'b' cannot map to both "cat" and "fish".

Example 3

Input: pattern = "aaaa", s = "dog cat cat dog"  
Output: false  
Explanation: 'a' -> "dog", but then cannot map to "cat".

🏆 JavaScript Solution

We solve this problem using two hash maps:

To map each character in pattern to a word in s.
To ensure each word in s maps back to a unique character in pattern.

Implementation

var wordPattern = function(pattern, s) {
    const words = s.split(" ");
    if (pattern.length !== words.length) return false;

    const charToWord = new Map();
    const wordToChar = new Map();

    for (let i = 0; i < pattern.length; i++) {
        const char = pattern[i];
        const word = words[i];

        if ((charToWord.has(char) && charToWord.get(char) !== word) || 
            (wordToChar.has(word) && wordToChar.get(word) !== char)) {
            return false;
        }

        charToWord.set(char, word);
        wordToChar.set(word, char);
    }

    return true;
};

🔍 How It Works

Split Words:
- Split the string s into an array of words using split(" ").
Check Lengths:
- If the length of pattern does not match the number of words in s, return false.
Use Two Maps:
- Map each character in pattern to a word in s.
- Map each word in s back to a character in pattern.
Validate Mappings:
- If a character or word conflicts with an existing mapping, return false.
Return True:
- If all characters and words map consistently, return true.

🔑 Complexity Analysis

Time Complexity: O(n), where n is the length of pattern (or the number of words in s).
- Each character and word is processed once.
Space Complexity: O(1), where k is the number of unique characters and words.
- Two hash maps store up to k mappings.

📋 Dry Run

Input: pattern = "abba", s = "dog cat cat dog"

Output: true

✨ Pro Tips for Interviews

Explain Two Maps:
- Highlight how mapping both char -> word and word -> char ensures consistency.
Discuss Edge Cases:
- pattern and s lengths differ: pattern = "abba", s = "dog cat".
- Duplicate mappings: pattern = "ab", s = "dog dog".
Follow-Up:
- How would you extend this solution to handle multi-character patterns or words?

📚 Learn More

Check out the full explanation and code walkthrough on my previous Dev.to post:
👉 Isomorphic Strings - JavaScript Solution

What’s your preferred method to solve this problem? Let’s discuss! 🚀

LeetCode Challenge: 205. Isomorphic Strings - JavaScript Solution 🚀

Rahul Kumar Barnwal — Tue, 14 Jan 2025 09:25:10 +0000

Top Interview 150

The Isomorphic Strings problem is a string mapping challenge that involves character substitutions while preserving order. Let’s solve LeetCode 205: Isomorphic Strings step by step.

🚀 Problem Description

Two strings s and t are isomorphic if:

Each character in s can be replaced by a unique character in t.
The order of characters in s is preserved in t.
No two characters in s map to the same character in t, and vice versa.

💡 Examples

Example 1

Input: s = "egg", t = "add"  
Output: true  
Explanation: 'e' maps to 'a', 'g' maps to 'd'.

Example 2

Input: s = "foo", t = "bar"  
Output: false  
Explanation: 'o' would need to map to both 'a' and 'r'.

Example 3

Input: s = "paper", t = "title"  
Output: true  
Explanation: 'p' maps to 't', 'a' maps to 'i', etc.

🏆 JavaScript Solution

We solve this problem using two hash maps:

To map characters from s to t.
To ensure no two characters in s map to the same character in t.

Implementation

var isIsomorphic = function(s, t) {
    if (s.length !== t.length) return false;

    const mapST = {};
    const mapTS = {};

    for (let i = 0; i < s.length; i++) {
        const charS = s[i];
        const charT = t[i];

        if ((mapST[charS] && mapST[charS] !== charT) || 
            (mapTS[charT] && mapTS[charT] !== charS)) {
            return false;
        }

        mapST[charS] = charT;
        mapTS[charT] = charS;
    }

    return true;
};

🔍 How It Works

Check Lengths:
- If the strings have different lengths, they cannot be isomorphic.
Use Two Maps:
- mapST: Maps characters in s to characters in t.
- mapTS: Maps characters in t to characters in s.
Traverse Characters:
- For each pair of characters in s and t, check if the mappings are consistent.
- If not, return false.
Return true:
- If all characters are mapped consistently, the strings are isomorphic.

🔑 Complexity Analysis

Time Complexity: O(n), where n is the length of s (or t).
- Each character is processed once.
Space Complexity: O(1), since the hash maps can store at most 256 entries (ASCII characters).

📋 Dry Run

Input: s = "egg", t = "add"

Output: true

✨ Pro Tips for Interviews

Edge Cases:
- Different lengths: s = "abc", t = "ab".
- Single-character strings: s = "a", t = "a".
- Repeated characters: s = "aaa", t = "bbb".
Discuss Two Maps:
- Emphasize the need for bidirectional mapping to avoid conflicts.
Optimization:
- Highlight how this approach works in _O(n)_, which is optimal for this problem.

📚 Learn More

Check out the full explanation and code walkthrough on my previous Dev.to post:
👉 Ransom Note - JavaScript Solution

What’s your preferred method to solve this problem? Let’s discuss! 🚀

LeetCode Challenge: 383. Ransom Note - JavaScript Solution 🚀

Rahul Kumar Barnwal — Mon, 13 Jan 2025 08:07:00 +0000

Top Interview 150

The Ransom Note problem is a simple string manipulation challenge that tests your ability to manage character counts efficiently. Let’s solve LeetCode 383 step by step.

🚀 Problem Description

Given two strings ransomNote and magazine:

Return true if ransomNote can be constructed using letters from magazine.
Each letter in magazine can only be used once in ransomNote.

💡 Examples

Example 1

Input: ransomNote = "a", magazine = "b"  
Output: false

Example 2

Input: ransomNote = "aa", magazine = "ab"  
Output: false

Example 3

Input: ransomNote = "aa", magazine = "aab"  
Output: true

🏆 JavaScript Solution

We solve this problem by counting the occurrences of each letter in magazine and comparing them with the required counts for ransomNote.

Implementation

var canConstruct = function(ransomNote, magazine) {
    const charCount = {};

    for (let char of magazine) {
        charCount[char] = (charCount[char] || 0) + 1;
    }

    for (let char of ransomNote) {
        if (!charCount[char] || charCount[char] <= 0) {
            return false;
        }
        charCount[char]--;
    }

    return true;
};

🔍 How It Works

Count Characters in Magazine:
- Create a hash map (charCount) to store the frequency of each character in magazine.
Validate Against Ransom Note:
- Iterate through each character in ransomNote.
- Check if the character is available in charCount.
- If not, return false.
- Decrement the count of the character in charCount.
Return Result:
- If all characters are found with sufficient counts, return true.

🔑 Complexity Analysis

Time Complexity: O(n+m), where n is the length of magazine and m is the length of ransomNote.
- Counting characters in magazine takes O(n).
- Validating ransomNote takes O(m).
Space Complexity: O(k), where k is the number of unique characters in magazine.

📋 Dry Run

Input: ransomNote = "aa", magazine = "aab"

Output: true

✨ Pro Tips for Interviews

Clarify Constraints:
- Ensure that ransomNote and magazine only contain lowercase letters.
- Ask about edge cases, such as empty strings.
Discuss Optimizations:
- Highlight how using a hash map ensures efficient character counting.
Edge Cases:
- ransomNote longer than magazine → immediately return false.
- All characters in magazine but insufficient counts.

📚 Learn More

Check out the full explanation and code walkthrough on my previous Dev.to post:
👉 Set Matrix Zeroes - JavaScript Solution

What’s your preferred method to solve this problem? Let’s discuss! 🚀

LeetCode Challenge 289: Game of Life - JavaScript Solution 🚀

Rahul Kumar Barnwal — Sun, 12 Jan 2025 08:25:21 +0000

Top Interview 150

The Game of Life problem is a simulation-based challenge involving matrix updates and in-place operations. Let’s solve LeetCode 289: Game of Life while ensuring the board is updated simultaneously, as required.

🚀 Problem Description

Given an m×n grid representing a board, where:

1: A cell is live.
0: A cell is dead.

The rules to determine the next state of the board are:

Any live cell with fewer than two live neighbors dies (underpopulation).
Any live cell with two or three live neighbors lives.
Any live cell with more than three live neighbors dies (overpopulation).
Any dead cell with exactly three live neighbors becomes live (reproduction).

The challenge: Update the board in place to reflect its next state.

💡 Examples

Example 1

Input: board = [[0, 1, 0], [0, 0, 1], [1, 1, 1], [0, 0, 0]]  
Output: [[0, 0, 0], [1, 0, 1], [0, 1, 1], [0, 1, 0]]

Example 2

Input: board = [[1, 1], [1, 0]]  
Output: [[1, 1], [1, 1]]

🏆 JavaScript Solution

To update the board in place while maintaining the original state for simultaneous updates, we use state encoding:

Intermediate States:
- 2: A cell was live but will become dead.
- 3: A cell was dead but will become live.

Implementation

var gameOfLife = function(board) {
    const rows = board.length;
    const cols = board[0].length;

    const countLiveNeighbors = (row, col) => {
        let liveCount = 0;
        const directions = [
            [-1, -1], [-1, 0], [-1, 1],
            [0, -1],         [0, 1],
            [1, -1], [1, 0], [1, 1],
        ];

        for (const [dr, dc] of directions) {
            const r = row + dr, c = col + dc;
            if (r >= 0 && r < rows && c >= 0 && c < cols && (board[r][c] === 1 || board[r][c] === 2)) {
                liveCount++;
            }
        }

        return liveCount;
    };

    for (let row = 0; row < rows; row++) {
        for (let col = 0; col < cols; col++) {
            const liveNeighbors = countLiveNeighbors(row, col);

            if (board[row][col] === 1) {
                if (liveNeighbors < 2 || liveNeighbors > 3) {
                    board[row][col] = 2; // Live -> Dead
                }
            } else {
                if (liveNeighbors === 3) {
                    board[row][col] = 3; // Dead -> Live
                }
            }
        }
    }

    for (let row = 0; row < rows; row++) {
        for (let col = 0; col < cols; col++) {
            if (board[row][col] === 2) {
                board[row][col] = 0; // Live -> Dead
            } else if (board[row][col] === 3) {
                board[row][col] = 1; // Dead -> Live
            }
        }
    }
};

🔍 How It Works

Count Live Neighbors:
- Use an array of 8 directions to check all neighboring cells for live states (1 or 2).
Encode Intermediate States:
- 2: A cell transitions from live to dead.
- 3: A cell transitions from dead to live.
Finalize Updates:
- Traverse the matrix again to convert 2→0 and 3→1.

🔑 Complexity Analysis

Time Complexity: O(m⋅n), where m is the number of rows and n is the number of columns.
- Each cell is visited twice: once to apply rules and once to finalize updates.
Space Complexity: O(1), as the updates are performed in place.

📋 Dry Run

Input: board = [[0, 1, 0], [0, 0, 1], [1, 1, 1], [0, 0, 0]]

Output: [[0, 0, 0], [1, 0, 1], [0, 1, 1], [0, 1, 0]]

✨ Pro Tips for Interviews

Explain Intermediate States:
- Highlight how encoding states avoids dependency issues during simultaneous updates.
Edge Cases:
- Single-row or single-column boards. Boards where all cells are live or all cells are dead.
Follow-Up:
- For infinite boards, consider tracking only the active area (cells with live neighbors).

📚 Learn More

Check out the full explanation and code walkthrough on my previous Dev.to post:
👉 Set Matrix Zeroes - JavaScript Solution

What’s your preferred method to solve this problem? Let’s discuss! 🚀

LeetCode Challenge: 73. Set Matrix Zeroes - JavaScript Solution 🚀

Rahul Kumar Barnwal — Sat, 11 Jan 2025 07:28:11 +0000

Top Interview 150

The Set Matrix Zeroes problem is a common challenge involving in-place matrix manipulation. Let’s solve LeetCode 73: Set Matrix Zeroes step by step, focusing on achieving the O(1) space complexity requirement.

🚀 Problem Description

Given an m×n matrix:

If an element is 0, set its entire row and column to 0.
Perform this operation in-place.

💡 Examples

Example 1

Input: matrix = [[1, 1, 1], [1, 0, 1], [1, 1, 1]]  
Output: [[1, 0, 1], [0, 0, 0], [1, 0, 1]]

Example 2

Input: matrix = [[5, 1, 9, 11], [2, 4, 8, 10], [13, 3, 6, 7], [15, 14, 12, 16]]  
Output: [[15, 13, 2, 5], [14, 3, 4, 1], [12, 6, 8, 9], [16, 7, 10, 11]]

Constraints

1 ≤ m,n ≤ 200
-2^31 ≤ matrix[i][j]≤ 2^31-1

🏆 JavaScript Solution

We can solve this problem efficiently using the first row and first column of the matrix as markers to indicate which rows and columns need to be set to 0.

Implementation

var setZeroes = function(matrix) {
    const rows = matrix.length;
    const cols = matrix[0].length;
    let firstRowHasZero = false;
    let firstColHasZero = false;

    for (let i = 0; i < rows; i++) {
        for (let j = 0; j < cols; j++) {
            if (matrix[i][j] === 0) {
                if (i === 0) firstRowHasZero = true;
                if (j === 0) firstColHasZero = true;
                matrix[i][0] = 0; // Mark the first column
                matrix[0][j] = 0; // Mark the first row
            }
        }
    }

    for (let i = 1; i < rows; i++) {
        for (let j = 1; j < cols; j++) {
            if (matrix[i][0] === 0 || matrix[0][j] === 0) {
                matrix[i][j] = 0;
            }
        }
    }

    if (firstRowHasZero) {
        for (let j = 0; j < cols; j++) {
            matrix[0][j] = 0;
        }
    }

    if (firstColHasZero) {
        for (let i = 0; i < rows; i++) {
            matrix[i][0] = 0;
        }
    }
};

🔍 How It Works

Mark the First Row and Column:
- Traverse the matrix to find zero elements.
- Use the first row and first column as markers to remember which rows and columns need to be zeroed.
Set Elements to Zero:
- For every cell not in the first row or column, check the corresponding marker.
- If the marker indicates zero, set the cell to zero.
Handle the First Row and Column:
- If the first row or first column originally contained zeros, set all their elements to zero.

🔑 Complexity Analysis

Time Complexity: O(m⋅n), where m is the number of rows and n is the number of columns.
- Each cell is visited once during marking and once during the update.
Space Complexity: O(1), since no additional data structures are used.

📋 Dry Run

Input: matrix = [[1, 1, 1], [1, 0, 1], [1, 1, 1]]

Step 1: Mark the First Row and Column

Step2: Update the Matrix

Step 3: Update the First Row and Column

Output:

[[1, 0, 1], [0, 0, 0], [1, 0, 1]]

✨ Pro Tips for Interviews

Explain Constant Space:
- Highlight how you use the matrix itself for marking instead of additional space.
Clarify Edge Cases:
- Single row/column matrices.
- Matrices where all elements are zero.
Discuss Optimization:
- Compare the O(mn) space solution to the O(1) optimized approach.

📚 Learn More

Check out the full explanation and code walkthrough on my previous Dev.to post:
👉 Rotate Image - JavaScript Solution

What’s your preferred method to solve this problem? Let’s discuss! 🚀

LeetCode Challenge: 48. Rotate Image - JavaScript Solution 🚀

Rahul Kumar Barnwal — Fri, 10 Jan 2025 07:27:33 +0000

Top Interview 150

The Rotate Image problem involves rotating an n×n matrix by 90 degrees clockwise, in place. Let’s solve LeetCode 48: Rotate Image step by step.

🚀 Problem Description

Given an n×n matrix:

Rotate the matrix in place by 90 degrees clockwise.
In-place means modifying the original matrix without allocating extra space for another matrix.

💡 Examples

Example 1

Input: matrix = [[1, 2, 3], [4, 5, 6], [7, 8, 9]]  
Output: [[7, 4, 1], [8, 5, 2], [9, 6, 3]]

Example 2

Input: matrix = [[5, 1, 9, 11], [2, 4, 8, 10], [13, 3, 6, 7], [15, 14, 12, 16]]  
Output: [[15, 13, 2, 5], [14, 3, 4, 1], [12, 6, 8, 9], [16, 7, 10, 11]]

Constraints

1≤m,n≤10
−100≤matrix[i][j]≤100

🏆 JavaScript Solution

We solve this problem in two steps:

Transpose the Matrix:
- Swap elements symmetrically across the diagonal.
Reverse Each Row:
- Reverse the order of elements in each row to achieve the rotation.

Implementation

var rotate = function(matrix) {
    const n = matrix.length;

    for (let i = 0; i < n; i++) {
        for (let j = i + 1; j < n; j++) {
            [matrix[i][j], matrix[j][i]] = [matrix[j][i], matrix[i][j]];
        }
    }

    for (let i = 0; i < n; i++) {
        matrix[i].reverse();
    }
};

🔍 How It Works

Transpose the Matrix:
- Swap matrix[i][j] with matrix[j][i] for all i<j.
- This converts rows into columns.

Example:

Input:  [[1, 2, 3],       Transposed:  [[1, 4, 7],  
         [4, 5, 6],  ->                [2, 5, 8],  
         [7, 8, 9]]                    [3, 6, 9]]

Reverse Each Row:
- Reverse the elements of each row to achieve the clockwise rotation.

Example:

Transposed: [[1, 4, 7],       Rotated: [[7, 4, 1],  
             [2, 5, 8],  ->            [8, 5, 2],  
             [3, 6, 9]]                [9, 6, 3]]

🔑 Complexity Analysis

Time Complexity:
- Transposing the matrix takes O(n^2).
- Reversing each row takes O(n^2).
- Total: O(n^2)
Space Complexity: O(1), as the rotation is done in place.

📋 Dry Run

Input: matrix = [[1, 2, 3], [4, 5, 6], [7, 8, 9]]

Output: [[7, 4, 1], [8, 5, 2], [9, 6, 3]]

✨ Pro Tips for Interviews

Clarify Constraints:
- Ensure the matrix is always square (n×n).
Highlight In-Place Operations:
- Emphasize the efficiency of the transpose-and-reverse method.
Edge Cases:
- Single-element matrix: [[1]].
- 2×2 matrix: [[1, 2], [3, 4]].

📚 Learn More

Check out the full explanation and code walkthrough on my previous Dev.to post:
👉 Spiral Matrix - JavaScript Solution

What’s your preferred method to solve this problem? Let’s discuss! 🚀

LeetCode Challenge: 54. Spiral Matrix - JavaScript Solution 🚀

Rahul Kumar Barnwal — Thu, 09 Jan 2025 16:13:11 +0000

Top Interview 150

The Spiral Matrix problem is a common challenge involving matrix traversal. Let’s break down LeetCode 54: Spiral Matrix and implement a solution that works for any m×n matrix.

🚀 Problem Description

Given an m×n matrix, traverse it in spiral order and return the elements in a single array.

💡 Examples

Example 1

Input: matrix = [[1, 2, 3], [4, 5, 6], [7, 8, 9]]  
Output: [1, 2, 3, 6, 9, 8, 7, 4, 5]

Example 2

Input: matrix = [[1, 2, 3, 4], [5, 6, 7, 8], [9, 10, 11, 12]]  
Output: [1, 2, 3, 4, 8, 12, 11, 10, 9, 5, 6, 7]

Constraints

1≤m,n≤10
−100≤matrix[i][j]≤100

🏆 JavaScript Solution

We solve this problem by defining four boundaries (top, bottom, left, and right) that shrink as we traverse the matrix in spiral order.

Implementation

var spiralOrder = function(matrix) {
    const result = [];
    let top = 0;
    let bottom = matrix.length - 1;
    let left = 0;
    let right = matrix[0].length - 1;

    while (top <= bottom && left <= right) {
        for (let i = left; i <= right; i++) {
            result.push(matrix[top][i]);
        }
        top++;

        for (let i = top; i <= bottom; i++) {
            result.push(matrix[i][right]);
        }
        right--;

        if (top <= bottom) {
            for (let i = right; i >= left; i--) {
                result.push(matrix[bottom][i]);
            }
            bottom--;
        }

        if (left <= right) {
            for (let i = bottom; i >= top; i--) {
                result.push(matrix[i][left]);
            }
            left++;
        }
    }

    return result;
};

🔍 How It Works

Define Boundaries:
- top: Tracks the topmost row.
- bottom: Tracks the bottommost row.
- left: Tracks the leftmost column.
- right: Tracks the rightmost column.
Traverse in Spiral Order:
- Left to Right: Traverse the top row, then increment top.
- Top to Bottom: Traverse the rightmost column, then decrement right.
- Right to Left: Traverse the bottom row (if it exists), then decrement bottom.
- Bottom to Top: Traverse the leftmost column (if it exists), then increment left.
Check for Overlap:
- Ensure the boundaries (top, bottom, left, right) do not overlap before processing each direction.

🔑 Complexity Analysis

Time Complexity: O(m⋅n), where m is the number of rows and n is the number of columns.
- Each element is processed once.
Space Complexity: O(1), excluding the space required for the output array.

📋 Dry Run

Input: matrix = [[1, 2, 3], [4, 5, 6], [7, 8, 9]]

Output: [1, 2, 3, 6, 9, 8, 7, 4, 5]

✨ Pro Tips for Interviews

Clarify Constraints:
- Ask if the input matrix can be empty.
- Confirm if non-rectangular matrices are possible (unlikely, but good to clarify).
Discuss Edge Cases:
- Single-row matrix: [[1, 2, 3]].
- Single-column matrix: [[1], [2], [3]].
- Smallest possible matrix: [[1]].
Highlight Efficiency:
- Explain why the shrinking boundary approach is O(m⋅n).

📚 Learn More

Check out the full explanation and code walkthrough on my previous Dev.to post:
👉 Valid Sudoku - JavaScript Solution

What’s your preferred method to solve this problem? Let’s discuss! 🚀

LeetCode Challenge: 36.Valid Sudoku - JavaScript Solution 🚀

Rahul Kumar Barnwal — Wed, 08 Jan 2025 15:33:33 +0000

Top Interview 150

In this post, we'll solve Valid Sudoku, a classic problem to validate a 9x9 Sudoku board based on specific rules. We'll implement the solution in JavaScript with a clear and efficient approach.

🚀 Problem Description

We are given a 9x9 Sudoku board. The goal is to determine if the current board configuration is valid, based on the following rules:

Each row must contain the digits 1-9 without repetition.
Each column must contain the digits 1-9 without repetition.
Each of the nine 3x3 sub-boxes must contain the digits 1-9 without repetition.

💡 Notes:

The board can have empty cells represented by ".", which we ignore for validation.
The board doesn't need to be solvable; we only validate the current state.

💡 Examples

Example 1
Input 1 (Valid):

const board = [
  ["5", "3", ".", ".", "7", ".", ".", ".", "."],
  ["6", ".", ".", "1", "9", "5", ".", ".", "."],
  [".", "9", "8", ".", ".", ".", ".", "6", "."],
  ["8", ".", ".", ".", "6", ".", ".", ".", "3"],
  ["4", ".", ".", "8", ".", "3", ".", ".", "1"],
  ["7", ".", ".", ".", "2", ".", ".", ".", "6"],
  [".", "6", ".", ".", ".", ".", "2", "8", "."],
  [".", ".", ".", "4", "1", "9", ".", ".", "5"],
  [".", ".", ".", ".", "8", ".", ".", "7", "9"],
];

Output:

true

Example 2
Input 2 (Invalid):

const board = [
  ["8", "3", ".", ".", "7", ".", ".", ".", "."],
  ["6", ".", ".", "1", "9", "5", ".", ".", "."],
  [".", "9", "8", ".", ".", ".", ".", "6", "."],
  ["8", ".", ".", ".", "6", ".", ".", ".", "3"],
  ["4", ".", ".", "8", ".", "3", ".", ".", "1"],
  ["7", ".", ".", ".", "2", ".", ".", ".", "6"],
  [".", "6", ".", ".", ".", ".", "2", "8", "."],
  [".", ".", ".", "4", "1", "9", ".", ".", "5"],
  [".", ".", ".", ".", "8", ".", ".", "7", "9"],
];

Output:

false

Constraints

board.length == 9
board[i].length == 9
board[i][j] is "." or a digit ("1" - "9").

🏆 JavaScript Solution

To solve the problem, we validate:

Rows: Check if each row contains unique numbers.
Columns: Check if each column contains unique numbers.
3x3 Sub-Boxes: Divide the board into 9 sub-boxes (3x3 grids) and validate them for unique numbers.

Implementation

function isValidSudoku(board) {
  const rows = Array.from({ length: 9 }, () => new Set());
  const cols = Array.from({ length: 9 }, () => new Set());
  const boxes = Array.from({ length: 9 }, () => new Set());

  for (let r = 0; r < 9; r++) {
    for (let c = 0; c < 9; c++) {
      const value = board[r][c];

      if (value === ".") continue;

      const boxIndex = Math.floor(r / 3) * 3 + Math.floor(c / 3);

      if (rows[r].has(value) || cols[c].has(value) || boxes[boxIndex].has(value)) {
        return false;
      }

      rows[r].add(value);
      cols[c].add(value);
      boxes[boxIndex].add(value);
    }
  }

  return true;
}

🔍 How It Works

Initialization:
We use three arrays of Set objects to track values in rows, columns, and 3x3 boxes.
Iterate through the board:
For each cell (r, c):
- If the cell is empty ("."), skip it.
- Compute the box index: Math.floor(r / 3) * 3 + Math.floor(c / 3).
- Check if the value already exists in the corresponding row, column, or box.
- If it does, return false (invalid board).
- Otherwise, add the value to the respective row, column, and box.

Return true:

If all rows, columns, and boxes are valid.

🔑 Complexity Analysis

Time Complexity:
- We traverse all 81 cells of the board once, performing constant-time operations for each cell.
- O(81) → O(1) (constant time since the board size is fixed).
Space Complexity:
- We use three arrays of size 9 to store sets for rows, columns, and boxes.
- O(9 × 3) → O(1).

📋 Dry Run

✨ Pro Tips for Interviews

Understand the Problem Clearly:
- Clarify whether the board is guaranteed to be 9x9.
- Confirm that empty cells are represented as ".".
Explain Your Approach:
- Discuss your plan to use rows, cols, and boxes sets for tracking.
- Highlight why this approach works and how it efficiently detects duplicates.
Time and Space Complexity:
- State that the algorithm runs in O(81) ≈ O(1) time due to fixed board size.
- Space complexity is O(27) ≈ O(1) for the 27 sets.
Edge Cases:
- An empty board (all ".") → should return true.
- A nearly full but invalid board (e.g., duplicates in rows/columns/boxes) → ensure detection.
- Single-row/column boards (if the board can be non-standard).
Code Readability:
- Use clear variable names like rows, cols, boxes.
- Avoid hardcoding; calculate the box index dynamically.
Don’t Overcomplicate:
- Stick to the validation problem. Avoid solving the Sudoku or handling invalid input unless explicitly asked.

📚 Learn More

Check out the full explanation and code walkthrough on my previous Dev.to post:
👉 Minimum Window Substring - JavaScript Solution

What’s your preferred method to solve this problem? Let’s discuss! 🚀

LeetCode Challenge: 76. Minimum Window Substring - JavaScript Solution 🚀

Rahul Kumar Barnwal — Tue, 07 Jan 2025 15:17:02 +0000

Top Interview 150

The Minimum Window Substring problem requires finding the smallest substring of s that contains all characters from t. Let’s solve it step by step using an efficient sliding window approach.

🚀 Problem Description

Given strings s and t, return the smallest substring of s such that all characters in t (including duplicates) are included in the substring. If no such substring exists, return an empty string "".

💡 Examples

Example 1

Input: s = "ADOBECODEBANC", t = "ABC"  
Output: "BANC"  
Explanation: The substring "BANC" contains all characters 'A', 'B', and 'C'.

Example 2

Input: s = "a", t = "a"  
Output: "a"  
Explanation: The entire string `s` matches `t`.

Example 3

Input: s = "a", t = "aa"  
Output: ""  
Explanation: `t` requires two 'a's, but `s` only has one.

🏆 JavaScript Solution

We will solve this using a sliding window and hash maps to keep track of character frequencies.

Implementation

var minWindow = function(s, t) {
    if (s.length < t.length) return "";

    const tFrequency = {};
    for (let char of t) {
        tFrequency[char] = (tFrequency[char] || 0) + 1;
    }

    let left = 0;
    let right = 0;
    let formed = 0;
    const windowFrequency = {};
    let minLength = Infinity;
    let minWindow = "";

    const required = Object.keys(tFrequency).length;

    while (right < s.length) {
        const char = s[right];
        windowFrequency[char] = (windowFrequency[char] || 0) + 1;

        if (tFrequency[char] && windowFrequency[char] === tFrequency[char]) {
            formed++;
        }

        while (formed === required) {
            if (right - left + 1 < minLength) {
                minLength = right - left + 1;
                minWindow = s.substring(left, right + 1);
            }

            const leftChar = s[left];
            windowFrequency[leftChar]--;
            if (tFrequency[leftChar] && windowFrequency[leftChar] < tFrequency[leftChar]) {
                formed--;
            }
            left++;
        }

        right++;
    }

    return minWindow;
};

🔍 How It Works

Frequency Map for t:
- Create a hash map tFrequency to store the count of each character in t.
Sliding Window:
- Use two pointers (left and right) to define a dynamic window in s.
- Expand the window by moving right.
- Contract the window by moving left when all characters in t are present.
Update Minimum Window:
- When the window contains all characters in t (i.e., formed === required), check if it’s the smallest window so far.

4.Return Result:

Return the smallest substring stored in minWindow.

🔑 Complexity Analysis

Time Complexity: O(m+n), where m is the length of s and n is the length of t.
- Each character in s is processed at most twice (once by right and once by left).
Space Complexity: O(n+m), where n is the size of tFrequency and m is the size of windowFrequency.

📋 Dry Run

Input: s = "ADOBECODEBANC", t = "ABC"

Output: "BANC"

✨ Pro Tips for Interviews

Explain Sliding Window:
- Highlight its efficiency in reducing unnecessary computations by dynamically adjusting the window size.
Discuss Edge Cases:
- s shorter than t.
- Characters in t not in s.
- Multiple valid substrings with the same minimum length.
Highlight Efficiency:
- Compare this O(m+n) solution with naive O(m⋅n) approaches that check all substrings.

📚 Learn More

Check out the full explanation and code walkthrough on my previous Dev.to post:
👉 Substring with Concatenation of All Words - JavaScript Solution

What’s your approach to solving this problem? Let’s discuss! 🚀