JS Interview Projects

Question:

Create a transfer list component where users can move items between two lists. The component should:

Allow selecting multiple items
Have transfer buttons to move items between lists
Maintain the state of both lists

Time: 30-45 minutes

Transfer List

Source List

Item 1
Item 2
Item 3
Item 4

Target List

Question:

Implement a star rating component that allows users to:

Click to set a rating (1-5 stars)
Hover to preview the rating
Display the current rating

Time: 30-45 minutes

Star Rating

★ ★ ★ ★ ★

Current Rating: 0

Question:

Create a progress bar component that:

Shows progress from 0-100%
Animates smoothly
Can be started and reset

Time: 30-45 minutes

Progress Bar

Question:

Implement a debounce function that:

Takes a function and wait time as parameters
Returns a function that will only execute after the wait time has passed
Resets the timer if called again before wait time expires

Time: 30-45 minutes

Implement Debounce


function debounce(func, wait) {
    let timeout;
    return function executedFunction(...args) {
        const later = () => {
            clearTimeout(timeout);
            func(...args);
        };
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
    };
}

Question:

Create an accordion component that:

Shows/hides content when header is clicked
Supports multiple sections
Animates smoothly when opening/closing

Time: 30-45 minutes

Accordion Component

Section 1

Content for section 1...

Section 2

Content for section 2...

Question:

Build a tabs component that:

Switches between different content panels
Highlights the active tab
Handles dynamic tab content

Time: 30-45 minutes

Tabs Component

Content for Tab 1

Content for Tab 2

Content for Tab 3

Question:

Create a component that allows users to insert text into a document:

Add text at the cursor position
Highlight newly inserted text temporarily
Support multiple text insertions

Time: 30-45 minutes

Insert Text in Document

Question:

Implement a "Select All" checkbox functionality that:

Toggles all checkboxes when "Select All" is clicked
Updates "Select All" state based on individual selections
Handles partial selections correctly

Time: 30-45 minutes

Select All Checkboxes

Select All

Option 1
Option 2
Option 3
Option 4
Option 5

Question:

Implement a curry function that:

Transforms a function to accept arguments one at a time
Returns a new function for each partial application
Executes once all arguments are provided

Time: 30-45 minutes

Implement Currying

Implementation:


function curry(fn) {
    return function curried(...args) {
        if (args.length >= fn.length) {
            return fn.apply(this, args);
        }
        return function(...args2) {
            return curried.apply(this, args.concat(args2));
        }
    };
}

Test Your Implementation:

Question:

Analyze the following code and determine the output:

Understand how 'this' binding works in arrow functions vs regular functions
Explain why each method produces different results
Identify common pitfalls with 'this' context

Time: 30-45 minutes

Guess The Output II


const obj = {
    name: "John",
    first: () => {
        console.log(this.name);
    },
    second: function() {
        console.log(this.name);
    }
};

obj.first();    // What will this print?
obj.second();   // What will this print?

Question:

Analyze the following code and determine the output sequence:

Understand the event loop and execution order
Explain how microtasks and macrotasks are handled
Identify synchronous vs asynchronous execution
Describe the order of Promise and setTimeout execution

Time: 30-45 minutes

Guess The Output I


console.log('1');

setTimeout(() => {
    console.log('2');
}, 0);

Promise.resolve().then(() => {
    console.log('3');
});

console.log('4');

Question:

Implement a custom React hook that detects clicks outside of a component:

Takes a ref and callback function as parameters
Triggers callback when user clicks outside the referenced element
Properly handles event cleanup

Time: 30-45 minutes

useOutsideClick Hook

Implementation:


function useOutsideClick(ref, callback) {
    document.addEventListener('click', (event) => {
        if (ref && !ref.contains(event.target)) {
            callback();
        }
    });
}

Demo:

Click outside the dropdown to close it

Question:

Create a typewriter effect component that:

Types out text character by character
Allows customizable typing speed
Supports custom text input

Time: 30-45 minutes

Typewriter Effect

Speed (ms)

Question:

Create a link preview component that:

Shows a tooltip when hovering over links
Supports custom preview content
Has smooth show/hide animations

Time: 30-45 minutes

Link Previewer

Hover over this link

Question:

Create a form validation component that:

Validates username, email, and password fields
Shows real-time validation feedback
Prevents form submission if validation fails
Displays appropriate error messages

Time: 30-45 minutes

Form Validation

Question:

Implement a multiple filter component that:

Filters items based on multiple criteria
Updates the UI immediately when filters change
Handles filter combinations correctly
Maintains active filter state

Time: 30-45 minutes

Multiple Filters

Question:

Build a full screen modal component that:

Opens with a smooth animation
Blocks scrolling of background content
Closes with escape key or clicking outside
Supports custom content

Time: 30-45 minutes

Full Screen Modal

Question:

Create a custom React hook for detecting key presses that:

Detects when specific keys are pressed
Supports multiple key combinations
Properly cleans up event listeners
Updates state only when necessary

Time: 30-45 minutes

useKeyPress Hook


function useKeyPress(targetKey) {
    const [isPressed, setIsPressed] = useState(false);
    
    useEffect(() => {
        function handleKeyDown(e) {
            if (e.key === targetKey) setIsPressed(true);
        }
        
        function handleKeyUp(e) {
            if (e.key === targetKey) setIsPressed(false);
        }
        
        window.addEventListener('keydown', handleKeyDown);
        window.addEventListener('keyup', handleKeyUp);
        
        return () => {
            window.removeEventListener('keydown', handleKeyDown);
            window.removeEventListener('keyup', handleKeyUp);
        };
    }, [targetKey]);
    
    return isPressed;
}

Demo:

Press any key

Question:

Implement a custom React hook for local storage that:

Persists state in localStorage
Syncs state across multiple tabs
Handles serialization/deserialization
Provides fallback for errors

Time: 30-45 minutes

Local Storage Hook


function useLocalStorage(key, initialValue) {
    const [storedValue, setStoredValue] = useState(() => {
        try {
            const item = window.localStorage.getItem(key);
            return item ? JSON.parse(item) : initialValue;
        } catch (error) {
            return initialValue;
        }
    });
    
    const setValue = value => {
        try {
            setStoredValue(value);
            window.localStorage.setItem(key, JSON.stringify(value));
        } catch (error) {
            console.log(error);
        }
    };
    
    return [storedValue, setValue];
}

Demo:

Question:

Create a lightbox gallery component that:

Opens images in a full-screen overlay
Supports navigation between images
Has smooth transitions and animations
Closes on escape key or clicking outside

Time: 35-60 minutes

Lightbox Gallery

Question:

Build an infinite autoplay slider that:

Automatically cycles through slides
Allows manual navigation
Has adjustable speed control
Provides smooth infinite scrolling

Time: 35-60 minutes

Infinite Autoplay Slider

Card 1

Card 2

Card 3

Card 4

Card 5

Speed

Question:

Implement a toast notification system that:

Shows different types of notifications (success, error, warning)
Auto-dismisses after a set duration
Supports stacking multiple notifications
Has smooth enter/exit animations

Time: 35-60 minutes

Toasts And Notifications

Question:

Implement polyfills for common array methods:

Create polyfill for Array.prototype.map()
Create polyfill for Array.prototype.filter()
Match the original method functionality exactly
Handle edge cases properly

Time: 35-60 minutes

Polyfills

Array.prototype.map() Polyfill


Array.prototype.myMap = function(callback) {
    const result = [];
    for (let i = 0; i < this.length; i++) {
        result.push(callback(this[i], i, this));
    }
    return result;
};

Array.prototype.filter() Polyfill


Array.prototype.myFilter = function(callback) {
    const result = [];
    for (let i = 0; i < this.length; i++) {
        if (callback(this[i], i, this)) {
            result.push(this[i]);
        }
    }
    return result;
};

Question:

Create a folder structure explorer that:

Displays nested folder hierarchy
Allows expanding/collapsing folders
Shows different icons for files and folders
Supports dynamic content loading

Time: 35-60 minutes

Folder Structure

Question:

Build a command palette interface that:

Opens with keyboard shortcut (Cmd/Ctrl + K)
Provides fuzzy search for commands
Supports keyboard navigation
Shows keyboard shortcuts for commands

Time: 90+ minutes

Command Palette

Press Cmd + K or Ctrl + K to open command palette

Question:

Create a password strength meter that:

Checks password against multiple criteria (length, special chars, etc.)
Shows visual strength indicator
Provides real-time feedback
Lists specific requirements and their status

Time: 30-45 minutes

Password Strength Meter

Password strength: None

At least 8 characters
Contains uppercase letter
Contains lowercase letter
Contains number
Contains special character

Question:

Implement a color picker component that:

Allows color selection via input or picker
Shows color preview
Displays hex and RGB values
Supports color history

Time: 30-45 minutes

Color Picker

Question:

Create a virtual keyboard component that:

Displays clickable keyboard layout
Handles special keys (Shift, Space, Backspace)
Updates input field on key press
Supports multiple layouts

Time: 35-60 minutes

Virtual Keyboard

Question:

Build a Tic Tac Toe game that:

Implements game logic for two players
Detects winning conditions
Shows current player's turn
Allows restarting the game

Time: 35-60 minutes