This is a submission for the KendoReact Free Components Challenge.
What I Built
As you probably know that there are many free KendoReact components (50+), and one way to play with them is by using the KendoReact Component Explorer — a fun and interactive web app that I have created.
It’s a tool in which you can select a component, modify its settings, watch it update live, inspect the code and even talk to a bot about it.
I wanted to build something useful and demonstrate how dope KendoReact is!
Demo
I) You can see live as well as source code here: code
II) Screenshots:
KendoReact Experience↘️
This app was built from scratch using KendoReact Free components. Here’s how:
A) Required Component:
Eleven {10+} free component were added
Button, Input, NumericTextBox, Switch, DropDownList, Drawer, DrawerContent, Chat, Grid and ProgressBar.
All three do well in the preview section.
B) Why It Worked:
a) Easy to add components and making the customization via props
b) The Drawer is what made my sidebar smooth and responsive.
c) The Chat component used to power my chatbot, very straightforward way to chat with the users.
C) Why I Liked it:
The tools in KendoReact were ready to use out of the box, which helped me save time and build a professional looking app with few lines of code. It’s a developer’s dream! 😊
AIm to Impress
I had added a little bit of some smart AI magic to make the app pop:
1) Chatbot Power:
Answered questions on components. It provides useful advice such as “Set ‘primary’ to true for a sick Button style!”
2) How It Helps:
a) Users can ask anything Providing a question like, “How do I use Grid?”
b) The bot gives specific, clear replies based on the component
c) It’s like the friend who tries to explain KendoReact to you!
3) Why Is This Cool:
This AI interacts with you as you learn, and elevates the app to another level.
Delightfully Designed
I wanted it to look incredible, so I spent a lot of time on design:
A) Used Tools:
I never used KendoUI Figma Kits or Progress ThemeBuilder directly, but got inspired from their clean modern styles.
B) Design Process:
a) Starting point, colorful gradient background (#ff6b6b to #e84393).
b) New glass panels added and shadows added.
c) Assigned a unique border color to each of the component (for e.g. Grid: #6c5ce7).
C) My Experience:
i) Mix and match colors/animations (bounce-in effect etc.) — This was so much fun.
ii) Warped it into Responsive looking-2011 site for phones and desktops — Alice’s biggest win from it.
iii) The end product is a colorful, easy-to-use app that excitement! 🌟
No teammates to credit, as this was a solo project. All the work is mine!
I also have a lot of fun making this for KendoReact Free Components Challenge.
Hope you enjoyed it as much as I enjoyed making it!
