🎯 Frontend Machine Coding Challenge
Common Frontend Interview Questions
Accordion Component
Build a collapsible accordion component with smooth expand/collapse animations. Users can click on headers to reveal or hide content sections with CSS transitions.
Nested Comments
Create a Reddit-style comment system with unlimited nesting levels. Features include reply functionality, vote buttons, and proper indentation for threaded conversations.
Image Slider
Build a responsive image carousel with navigation arrows, dot indicators, and automatic slideshow functionality. Includes smooth transitions between images.
Infinite Scroll
Implement endless scrolling that automatically loads more content as users reach the bottom of the page. Includes loading states and performance optimization.
Shimmer UI
Create animated loading placeholders that mimic content structure while data loads. Features gradient animations that provide visual feedback during loading states.
Kanban Board
Build a Trello-like task management board with drag-and-drop functionality. Features multiple columns, card creation, editing, and status management.
File Explorer
Create a Windows/Mac-style file browser with folder navigation, file/folder icons, breadcrumb navigation, and basic file operations like create and delete.
Auto Search
Build a search component with real-time suggestions, debounced input handling, keyboard navigation, and highlight matching text in results.
Shopping Cart
Create a fully functional e-commerce cart with add/remove items, quantity adjustment, price calculation, and persistent storage using localStorage.
Star Rating
Build an interactive 5-star rating component with hover effects, click handling, half-star support, and display of average ratings with user feedback.
Pagination
Implement a complete pagination system with page numbers, previous/next buttons, items per page selector, and efficient data handling for large datasets.
YouTube Live Chat
Create a real-time chat interface similar to YouTube Live with auto-scrolling messages, user avatars, timestamps, and emoji support.
Multi Select
Build a dropdown component that allows selecting multiple options with checkboxes, search filtering, select all functionality, and custom styling.
Focus Enhancement Tool
Create a concentration aid that highlights text as you type, dims surrounding content, and provides a distraction-free writing environment to improve focus.
Password Generator
Build a secure password generator with customizable options for length, character sets (uppercase, lowercase, numbers, symbols), and strength indicators.
OTP Login System
Create a one-time password authentication flow with input fields for each digit, auto-focus navigation, resend functionality, and timer countdown.
Traffic Light Simulator
Build an interactive traffic light system with automatic timing cycles, manual controls, and realistic color transitions between red, yellow, and green states.
Web API Integration
Learn to fetch data from external APIs with proper error handling, loading states, data transformation, and displaying results in a user-friendly format.
Multimodal Search API
Build a search interface that handles multiple input types (text, images, voice) and integrates with AI APIs to provide comprehensive search results.
Vector Database Comparison
Compare and implement both FAISS and Pinecone vector databases for similarity search, including performance benchmarks and use case analysis.
Multimodal Search API Tutorials
Multi Modeal Search AI using imagebind, faiss vector, fastapp, and mongodb with monitoring integration.
Multimodal Search API
Multi Modal search api testing and demo using local backend
Streak Tracker
Streak Tracker is a productivity tool that helps users track their daily tasks and maintain streaks for better habit formation. It features task creation, completion tracking, and streak management.