🥗Taurus Pan: A Smart Recipe Explorer Built with KendoReact

This is a submission for the KendoReact Free Components Challenge.

What I Built

Taurus Pan: Recipe Explorer is an interactive React application that helps you discover delicious recipes. The idea was to create a digital cookbook where you can quickly find inspiration by searching for a specific dish.

The goal was to build a polished, fast, and intuitive user interface entirely using the free KendoReact component library. The core of the application is a client-side fuzzy search, which provides instant results as you type, making the discovery process seamless and enjoyable.

This project was a 48-hour sprint for the hackathon, demonstrating how a feature-rich application can be built from scratch in a very short time with the right tools.

Demo

🎥 Watch the video demo here:

👉 YouTube Video

You can try the live application here:
👉 Live Demo Link

And here is the code repository:
👉 GitHub Repository

Screenshots & Walkthrough

Here is the main screen of the application. The AppBar serves as the header, while Card are used to create a clean and responsive layout for the recipes.

Clicking on any card opens a Dialog with detailed information, including a Chart for nutritional values and a Rating component.

KendoReact Components Used

To meet the challenge requirement of using at least 10 components, I integrated a total of 12 distinct KendoReact components to build the entire user interface from scratch. Here’s a breakdown of how each component played a crucial role in the application:

• AppBar & AppBarSection: Used to create the main header of the application, containing the title, logo, and primary controls like sorting and the "Show All" button.

• Input: The core search field. It was wrapped in a custom ClearableInput component to provide a better user experience.

• Button: Used for several key actions: the main "Show All" and "Close" buttons, as well as the clear icon-button inside the search input.

• Card Suite: The complete set (Card, CardImage, CardHeader, CardTitle, CardBody, CardActions) was essential for displaying each recipe in a clean, visually appealing, and structured format.

• Dialog: Provides a modal window that displays the full recipe details—including steps and nutritional info—without the user needing to leave the page.

• Loader: Offers important visual feedback to the user, indicating that search results are being processed after they type.

• Notification & NotificationGroup: Used to provide non-intrusive feedback to the user, such as the "No recipes found" message, which improves the overall experience.

• Chart Suite: A premium bar chart (Chart, ChartSeries, etc.) is used inside the Dialog to beautifully visualize the recipe's nutritional value (proteins, fats, and carbs).

• Rating: Displays a star rating for each recipe. It's featured on both the Card preview and in the detailed Dialog view for emphasis.

• DropDownList: Empowers the user to sort the search results by different criteria, such as 'Rating (High to Low)' or 'Name (A-Z)'.

• SvgIcon: Render scalable vector icons within the application.

• xIcon: A specific icon used with SvgIcon to create the clear button, ensuring visual consistency with the Kendo theme.

AI Coding Assistant Usage

For the "Code Smarter, Not Harder" prize category, the KendoReact AI Coding Assistant was used to generate the initial code for three features:

• Data Generation: To expand the recipe dataset, the assistant was tasked with creating 10 new recipe entries for the recipes.json file.

• Sorting Logic: The AI was prompted to "add sorting logic for the search results using the DropDownList component", which generated the initial handleSortChange function.

• "Show All" Functionality: The assistant was asked to "create a function for the 'Show All' button that displays all recipes from the original dataset", which produced the showAllRecipes function.

Nuclia Integration

An Unexpected Hurdle & My Plan B 🚀

My initial plan for the "RAGs to Riches" category was to integrate Nuclia for advanced, AI-powered search. I was excited to explore its RAG capabilities.

But… I hit an unexpected hurdle: registration with a personal email wasn’t possible. In true hackathon spirit, I couldn’t lose momentum. After reporting the issue, I quickly pivoted.

Instead of relying on an external AI service, I implemented a robust client-side fuzzy search using Fuse.js. This kept the core functionality I wanted and ensured I delivered a complete, working product within the 48-hour deadline.

I didn’t get to play with Nuclia this time, but the experience was a fantastic reminder of adaptability and problem-solving — two of the most valuable skills at any hackathon.