JokeGene: A Playful AI-Powered Joke App Built with KendoReact

#devchallenge #kendoreactchallenge #react #webdev

😂 JokeGenie – Your Personal Stand-Up Comedian

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.

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.

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. 🧠🎤

While I didn’t use the Kendo UI Figma Kit directly, I customized the components to match a consistent theme:

🧑‍💻 @ET45 Emre Tugutlu

Thanks for the great challenge and awesome components, Kendo team!

This was a ton of fun to build 💜😂

Some comments may only be visible to logged-in visitors. Sign in to view all comments.