Debug React Sorting, Persistence, Routing, and Accessibility
You are presented with an existing React application that displays a list of apartments on its homepage. Your task is to debug and enhance several features within this application. The application already includes routing, a listing page, a sort modal, state management using hooks, and some accessibility components.
Constraints & Assumptions:
- The existing component structure should be preserved unless a minor refactor is necessary for proper state management.
- The focus is on bug fixing, understanding state management, and integrating with existing code, rather than visual redesign.
- Do not introduce a new global state management library unless one is already in use.
Features to Implement/Debug:
- Sorting Debugging: Fix the apartment sorting functionality. Users should be able to open a modal from a "Sort" button, select sorting by Price, Rating, or Title, and have the list sorted correctly without mutating the original data.
- Persist Sort Preferences: Ensure that the user's selected sort option is remembered even after they leave and return to the page. A
useLocalStoragehook is available for this purpose. - Route-Aware UI: Modify the UI so that the "Sort" button only appears on the homepage, leveraging the application's routing system.
- Accessibility Modes: Implement two accessibility features: a high-contrast mode activated by keyboard shortcut
1, and a keyboard accessibility mode activated by keyboard shortcut2. These shortcuts should not trigger when the user is actively typing in an input field.
AI interview prep
Core dilemma
Balancing the imperative of fixing existing, potentially brittle, React code with the need to introduce new, robust features like state persistence and accessibility, all while respecting the existing architecture and avoiding unnecessary complexity.
3 tradeoffs and 3 stress tests locked
Interview prep
Unlock the interviewer X-Ray rubric, tradeoff matrix, stress tests, clarifying questions, and key concepts.
Debug React Sorting, Persistence, Routing, and Accessibility
You are presented with an existing React application that displays a list of apartments on its homepage. Your task is to debug and enhance several features within this application. The application already includes routing, a listing page, a sort modal, state management using hooks, and some accessibility components.
Constraints & Assumptions:
- The existing component structure should be preserved unless a minor refactor is necessary for proper state management.
- The focus is on bug fixing, understanding state management, and integrating with existing code, rather than visual redesign.
- Do not introduce a new global state management library unless one is already in use.
Features to Implement/Debug:
- Sorting Debugging: Fix the apartment sorting functionality. Users should be able to open a modal from a "Sort" button, select sorting by Price, Rating, or Title, and have the list sorted correctly without mutating the original data.
- Persist Sort Preferences: Ensure that the user's selected sort option is remembered even after they leave and return to the page. A
useLocalStoragehook is available for this purpose. - Route-Aware UI: Modify the UI so that the "Sort" button only appears on the homepage, leveraging the application's routing system.
- Accessibility Modes: Implement two accessibility features: a high-contrast mode activated by keyboard shortcut
1, and a keyboard accessibility mode activated by keyboard shortcut2. These shortcuts should not trigger when the user is actively typing in an input field.