Frontend Engineer Interview Experience @Livspace

Overview

The candidate was drawn to Livspace's Frontend Engineer position due to the opportunity to combine frontend development skills with a passion for user experience in the home interior design domain. The role focused on customer-facing platforms, including 3D visualization tools, designer collaboration interfaces, and project management dashboards, utilizing cutting-edge web technologies within a micro-frontend architecture.

Interview Rounds

The Livspace interview process consisted of six rounds, each designed to evaluate different aspects of the candidate's skills and suitability.

Round 1: Initial Screening (30 minutes)

• Conducted by a technical recruiter.
• Key discussion points included experience with modern JavaScript frameworks (particularly React), understanding of state management solutions, prior work with design systems, and experience handling complex user interactions.
• The recruiter provided insights into Livspace's frontend architecture and its transition to a micro-frontend approach.

Round 2: Take-Home Assignment (72 hours)

• The candidate was tasked with building a room visualization dashboard.
• Requirements included:
  • A responsive grid layout for room designs.
  • Filtering and sorting capabilities.
  • Image lazy loading.
  • Basic animations and transitions.
  • Error handling and loading states.
• The assignment emphasized handling different viewport sizes and maintaining performance with numerous room designs.
• The candidate utilized:
  • React 18 with TypeScript
  • TailwindCSS for styling
  • React Query for data fetching
  • Framer Motion for animations
• The candidate's submission was enhanced by:
  • Keyboard navigation support.
  • Skeleton loading state.
  • Image optimization.
  • Comprehensive test coverage using React Testing Library.

Round 3: Technical Deep Dive (90 minutes)

• Conducted by two senior frontend engineers.
• The round included a code review of the take-home project.
• The candidate answered questions regarding:
  • Optimization of the infinite scroll implementation.
  • The choice of CSS Grid over Flexbox.
  • Handling image failures in production.
  • Accessibility considerations.
• A live coding session involved building a custom hook for room design comparison with undo/redo functionality, emphasizing performance implications.

Round 4: System Design & Architecture (60 minutes)

• Conducted with the Tech Lead.
• The primary challenge involved designing the frontend architecture for a collaborative room design tool with simultaneous multi-user editing capabilities.
• Discussions encompassed:
  • State management strategies.
  • WebSocket implementation.
  • Conflict resolution.
  • Performance optimization.
  • Component architecture.
  • Build system and deployment strategies.
• Considerations for WebGL performance for 3D room rendering across different devices were also discussed.

Round 5: Problem Solving & User Experience (45 minutes)

• Conducted with the Engineering Manager.
• Focused on real-world frontend challenges, including:
  • Debugging a complex state management issue.
  • Optimizing a slow-rendering component.
  • Handling race conditions in API calls.
  • Improving load time for image-heavy pages.
• A significant challenge involved designing a solution for real-time collaboration between designers and customers while viewing 3D room renders.

Round 6: Culture & Vision Discussion (30 minutes)

• Conducted with the VP of Engineering.
• Topics included:
  • Frontend architecture vision.
  • Thoughts on emerging frontend technologies.
  • Experience with cross-functional teams.
  • Ideas for improving the design collaboration experience.

Key Takeaways

The interview process highlighted Livspace's dedication to both technical excellence and user experience. The company sought a frontend engineer with strong coding skills, architectural thinking capabilities, and UX sensibility. Preparation should include a strong understanding of advanced React patterns, performance optimization, state management solutions, browser rendering techniques, CSS fundamentals, and testing strategies.