CodStak Weekly Challenge #5: Restaurant Search with Dynamic Filters

Hey Coders,

Welcome to the 5th edition of our newsletter. Today’s challenge is going to be a little tough. I was actually asked this to a real interview, so I thought it is a good challenge to test your knowledge and see how far you can go with the implementations.
In this challenge, you will make a Restaurant search component, and based on your search criteria, you will show different result.

Here is the full description of the challenge:

In this challenge, you'll create a dynamic restaurant search feature that allows users to filter restaurants based on city and cuisine type. The goal is to create a user-friendly interface where the restaurant list updates dynamically as users make their selections.

Key Requirements:

A dropdown for users to select a city from available options. Another dropdown for selecting a cuisine, filtered based on the selected city. Display a list of restaurants that match the selected city and cuisine, showing details like the restaurant name, address, cuisine type, and rating.

Ensure the list updates in real-time as the user selects different options.

You can use this dummy data to render and filter your component:

const restaurantDetails: Restaurant[] = [
  {
    city: "toronto",
    name: "Pai Northern Thai Kitchen",
    address: "18 Duncan Street",
    cuisine: ["thai"],
    rating: "4/5",
  },
  {
    city: "toronto",
    name: "Seven Lives Tacos",
    address: "72 Kensington Avenue",
    cuisine: ["mexican"],
    rating: "3/5",
  },
  {
    city: "montreal",
    name: "Macdonald's",
    address: "32 Main Avenue",
    cuisine: ["american"],
    rating: "3/5",
  },
];

This challenge should take around 15-30 mins, depending on your familiarity with the concepts.
And if you missed, you can listen to this week’s podcast How to Stand Out as a Web Developer.

And that’s it for this week. Will see you next week with new challenge.

---