This is a submission for the KendoReact Free Components Challenge.
What I Built
I created KendoGemini, a sleek text analysis dashboard that lets users input text and get instant insights—like sentiment scores and key phrases—powered by simulated AI (with a nod to Gemini).
It’s built entirely with React and showcases over 10 KendoReact free components.
My goal was to make it intuitive, visually appealing, and accessible, blending usability with a modern SaaS vibe. Think Grammarly meets a mini analytics tool—perfect for writers or devs wanting quick feedback on their text!
Demo
Check out the live app here: Demo
Explore the code on StackBlitz: Code
Here are a few screenshots to give you a peek:
KendoReact Experience
KendoReact made this project a breeze! I used over 10 free components to bring KendoGemini to life:
- Textarea and Button: For text input and submission.
- Loader: A spinner during the simulated AI delay (2 seconds for drama!).
- Gauge: Shows the sentiment score (-1 to 1).
- ChipList: Displays key phrases like “happy” or “great.”
- ListBox: Lists entities (e.g., “John,” “New York”).
- Label: Shows the detected language (hardcoded “English” for now).
- Grid: A sortable, filterable history table with date, text, and sentiment.
- Chart: A line chart tracking sentiment trends.
- Toolbar: Navigation between pages (Home, Analysis, About).
- Window: A modal for detailed views of grid rows.
- Tooltip: Explains the sentiment score on hover.
These components were super easy to integrate and style. The Grid and Chart stood out—sorting and filtering worked out of the box, and the Chart looked sharp with minimal tweaks. Accessibility was a priority too; I added ARIA labels and ensured keyboard navigation worked smoothly.
AIm to Impress
For the “AIm to Impress” category, I integrated Gemini (Google’s AI model) as the backbone of the text analysis.
Delightfully Designed
I leaned on Progress ThemeBuilder to give KendoGemini a polished look.
I started with a clean blue (#007BFF) and gray (#F5F5F5) palette, paired with Roboto font for that modern tech feel.
In ThemeBuilder, I tweaked the default KendoReact theme—adjusted button colors, softened shadows, and exported a CSS file I dropped into my app. It was my first time using it, and I loved how fast I could iterate!
Team Submissions: I worked solo on this one—no teammates to credit!
Thanks for checking out KendoGemini—I had a pleasure building it and hope you enjoy it too!
Happy coding!
Top comments (0)