This is a submission for the KendoReact Free Components Challenge.
😂 JokeGenie – Your Personal Stand-Up Comedian
What I Built
JokeGenie is a fun, GenAI-powered joke generator where you:
- Choose a joke category (Dad Jokes, Country Humor, Dark Humor)
- Optionally enter a topic (like "bananas", "404 errors", or "your mom")
- Get a unique, AI-generated joke delivered in a playful UI
- Bonus: Floating emojis, animated speech bubble, and a rotating funny placeholder 🎭
Built with React, Cohere’s GenAI API, and the awesome KendoReact Free Components.
Demo
🌐 Live App: https://jokegene.netlify.app/
💻 Source Code: https://github.com/ET45/joke-generator
KendoReact Experience
I used several free components from KendoReact to build the core interface quickly and style it with custom flair:
-
@progress/kendo-react-buttons— for animated, category buttons and joke actions -
@progress/kendo-react-inputs— for the styled keyword input with emoji icon -
@progress/kendo-react-layout— to create a neat, card-based layout -
@progress/kendo-react-indicators— to show a loading spinner while fetching jokes -
@progress/kendo-react-notification— for error handling when the joke fails to load
KendoReact’s free components gave me a strong UI base while allowing custom CSS layering for a unique visual identity.
AIm to Impress 🤖
This project integrates the Cohere GenAI API using the command-r-plus model.
The app sends a prompt like:
“Tell me a dark humor joke about JavaScript.”
And gets a fun, original joke in return.
No static jokes here — it's AI all the way. 🧠🎤
Delightfully Designed 🎨
While I didn’t use the Kendo UI Figma Kit directly, I customized the components to match a consistent theme:
-
Violet brand color (
#a66cff) across buttons and borders - Emoji reactions and speech-bubble-style dialog
- Funny rotating placeholder
- Floating emojis for background energy 😄
Built With ❤️ By
🧑💻 @ET45 Emre Tugutlu
Thanks for the great challenge and awesome components, Kendo team!
This was a ton of fun to build 💜😂
