A one-page example app that lists 9 items. These items can be filtered by title using the search bar at the top of the page.
⚠️ IMPORTANT: Please do not remove any references of@ts-nocheck, these are added on purpose!
CleanShot.2025-05-08.at.10.09.25.mp4
- Use Node.js 20.11.0
- Run npm install
- Run npm run dev
- For test, run npm run test
- /pages/index.ts- homepage
- /components- components folder, includes:- Searchcomponent
- Resultscomponent
- Itemcomponent (use within the- Resultscomponent)
 
- /lib- contains a mockApiRequest helper function and some seed data (fine to be ignored for the purpose of this exercise!)
- middleware.ts- example middleware file (more about this below). Related files for the middleware exercise:- /api/feature-flags- endpoint that call the mockApiRequest function
- /pages/example/index.ts- example page used in the middleware file
 
Identify and fix:
- 
The app is not returning the list of items - why is that? 
- 
The search is broken - how can it be fixed? (Scenario: Search for #2→ Results are correctly filtered → Clear the search → Results are not reset)
- 
What other issues can you spot in the following files? 
- src/pages/index.tsx
- src/components/Results.tsx
- src/components/Item.tsx
- 
How can we improve the example unit test? 
- 
What other improvements would you recommend to keep the code clean and scalable? 
- 
Bonus task: Open up the src/middleware.tsfile and try to find the answer to the following two questions:
- When I visit the /examplepage, I always end up on/404. Why is that?
- When I land on the /examplepage and theab-test-imageflag is true, I still don't see the correct image. Why is that?