Skip to main content

index

List of questions#

  • Questions should be implemented in https://github.com/shubhamshekhar23/react-playground;

🔹 API + Data Handling UI • Fetch data from an API and display a list • Show loading spinner while fetching • Handle API errors (retry button / error message) • Add pagination (Next / Previous buttons) • Implement infinite scroll (load more on scroll) • Search/filter API results in real-time • Debounced search input (avoid too many API calls) • Sort list (ascending/descending) • Cache API response (avoid refetching) • Cancel previous API request (race conditions)

⸻

🔹 Forms & User Input • Build a login/signup form with validation • Show inline validation errors (email, password rules) • Password strength indicator • Confirm password match validation • Disable submit button until form is valid • Show success/error toast after submit • Multi-step form (stepper UI) • Auto-save form data (localStorage) • File upload UI with preview • Drag-and-drop file upload

⸻

🔹 State & UI Behavior • Toggle components (accordion / dropdown) • Tabs component (switch content) • Modal / popup with backdrop + close on ESC • Tooltip on hover • Sidebar toggle (open/close) • Theme switch (dark/light mode with persistence) • Counter with increment/decrement • Like button with toggle state • Notification badge update

⸻

🔹 Lists & Rendering • Render list with keys efficiently • Add / delete / edit items in a list (CRUD UI) • Drag-and-drop reordering list • Virtualized list (performance optimization) • Highlight selected item • Group list items (sections/categories) • Checkbox list with select all

⸻

🔹 Performance & Optimization • Debounce vs throttle implementation • Lazy load images (Intersection Observer) • Skeleton loader UI • Optimize re-renders (basic memoization concept) • Code splitting (basic concept in UI tasks)

⸻

🔹 CSS / Layout Challenges • Build responsive navbar • Create a card grid layout (responsive) • Center a div (multiple ways) • Sticky header / footer • Build a pricing table UI • Flexbox vs Grid layout use-case • Create a timeline UI • Build a carousel/slider • Create a chat UI layout

⸻

🔹 Advanced UI Components • Autocomplete / typeahead input • Date picker (basic version) • Star rating component • Progress bar (animated) • Countdown timer • Infinite carousel • Tree view (nested data) • Kanban board (drag & drop tasks)

⸻

🔹 Browser & Storage • Use localStorage/sessionStorage • Persist theme or user preferences • Build a simple notes app (store in localStorage) • Sync UI with storage changes

⸻

🔹 Event Handling & DOM • Event delegation example (list click handling) • Prevent default vs stop propagation • Keyboard navigation (accessible UI) • Detect click outside element (close dropdown)

⸻

🔥 If you want to go next level (FAANG-style) • Build a mini React-like state system (JS only) • Implement virtual DOM diff (conceptual) • Build your own debounce/throttle utility • Build a basic router (hash-based)

⸻

  • implement a menu UI

  • countdown timer

  • drag and drop file upload, thumbnail

  • Recursive navigation menu - https://www.telerik.com/blogs/how-to-build-recursive-side-menu-react

  • Google like typehead

  • Render dynamic forms using config

  • implement a drag and drop elements to rearrange them

  • List of stopwatches (add, start and stop)

  • deboune(search input); throttle(scroll)

  • Implement google like day calendar

  • Microsoft like excel spreadsheet

  • basic api call, get a list, show loading until data is fetched, show in ui the list of items, Handle potential errors

  • Product listing page with filters

  • Todo application

  • Tic tac toe game

  • Memory card game

  • simple counter (increase and decrease; Allow users to set a custom initial value for the counter.)

  • build a form with validation

  • Star rating widget

  • build a basic file tree (file, folder creation, deletion)

  • Twitter post like textarea

  • Implement progress bar

  • Forms Link labels and inputs: <input>s should be linked to <label>s using id and for. Wrap inputs in a form: <input>s should be wrapped in a <form> so that clicking on buttons and hitting Enter will submit the form. Remember to add event.preventDefault() if the network request is meant to be made using Ajax. Inputs should have appropriate types: <input>s should have appropriate type like email, password, number, etc. Leverage native HTML form validation: Where possible, use the required attribute combined with other attributes like pattern, min, max, and so on.
<form action="/submit" method="post">  <label for="name">Name:</label>  <input type="text" id="name" name="name" required />
  <label for="email">Email:</label>  <input type="email" id="email" name="email" required />
  <input type="date" />  <input type="time" />
  <label for="message">Message:</label>  <textarea id="message" name="message" rows="4" required></textarea>
  <button type="submit">Submit</button></form>