Tangible India - A journey through numbers

#devchallenge #kendoreactchallenge #react #webdev

This is a submission for the KendoReact Free Components Challenge.

What I Built

I built Tangible India – A journey through numbers, an interactive web app that blends facts about India with numbers in a fun and engaging way.

The idea is simple yet impactful:

Numbers (0, 1, 2, 3, 1947, …) are the foundation of computer science and daily life.
For each number, the app presents a fascinating fact related to India — ranging from history, culture, geography, science, to modern-day achievements.
As an additional category, memes have been added as categories since a lot of the knowledge movement and news is propagated through such measures.

This turns abstract digits into tangible insights, helping users learn something new about India while exploring numbers sequentially or randomly.

It’s a learning + curiosity app designed for students, educators, trivia lovers, and anyone interested in India.

Demo

🔗 Live Project: https://himanshuc3.github.io/tangible-india/

💻 Source Code: Tangible India - repository

Screenshots:

Title/Remarks	Screenshot
Homepage (light theme)
Homepage (dark theme)
Icons & tabbed navigation

KendoReact Components Used

I leveraged KendoReact's components as atomic components for creating the layout for Tangible India from scratch. The usage was restricted to the following components due to a lack of

Button – Used across the whole website for actions of triggering search, random fact generation etc.
SVG Icons (plusOutlineIcon, minusOutlineIcon, etc.) – The icon set offers a wide selection of custom icons along with the flexibilty to modify style according to the theme. Used in conjunction with buttons for accessibility and improving UX
Card — This acts as a fundamental building block or a Poster in layman terms, for showing the Facts linked to each number.
Input – Used for getting user input for searching/filtering through available list of facts.
Default Theme – Used for importing the base theme used as design system and styles for each of the imported components.
TabStrip, TabStripTab - Useful for displaying multiple facts across linked to the same number.
AppBar, AppBarSection, AppBarSpacer – The header used in the website is using this component as a building block for layout.
Popover – Showing keyboard shortcuts via popover
Slider, SliderLabel – The slider is a critical component giving a bird's eye view of the progression of number based facts.
Tooltip – Used in defining unknown behavior, like "Want to contribute?" button in header
ChipList, Chip - Categories displayed like "historical", "cultural" etc. are leveraging Chips and Chiplist
Switch - Used as a theme toggle switch

AI Coding Assistant Usage

I used an AI assistant to:

Suggest initial draft UI layouts to help avoid referencing API and start from 20-30% setup instead of 0%.
- Generating the header using AppBar.
- The code for generating Slider for showing number progression.
Exploration for best component fit for the UI and UX required.
- Describing the UX for: functionality to select among different categories and getting relevant components present under the free tier of KendoReact and going ahead with ChipList.

Challenges Faced using the AI Assistant

While KendoReact AI Assistant (MCP server) does help in a couple of scenarios described above, it still feels in a nascent stage with retaining and differentiating between contexts. As an example, consider the following progression of events:

Creating Header using AppBar component with relevant context for the features and how the UX should look like.
Improving a Search button component in Filter Component with an appropriate icon.
Add a tabbed navigation to facts card for multiple facts linked to the same number. MCP hallucination — While all of these prompts are given as different chats and make modifications to different components, the code suggested by the Coding Assistant merges all of them to outputs a single component which is an aggregation of all the previous request outputs + the most recent code suggestion.

Components like Animation don't work very intuitively and infact, I skipped using it since the API is consuming and using it out of the box with the help of examples wasn't working.

✨ With Tangible India, I wanted to show how numbers can tell stories — and how React + KendoReact makes it easy to turn that vision into reality.