The latest articles on Forem by Emre Tuğutlu (@emre_tuutlu_08ce2d50db0b). https://forem.com/emre_tuutlu_08ce2d50db0b https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2949596%2Fb746ad58-a1a9-4f6c-bb3c-7ad8e2145afe.jpg https://forem.com/emre_tuutlu_08ce2d50db0b en Emre Tuğutlu Sat, 22 Mar 2025 18:34:21 +0000 https://forem.com/emre_tuutlu_08ce2d50db0b/jokegene-a-playful-ai-powered-joke-app-built-with-kendoreact-5e2c https://forem.com/emre_tuutlu_08ce2d50db0b/jokegene-a-playful-ai-powered-joke-app-built-with-kendoreact-5e2c <p><em>This is a submission for the <a href="https://dev.to/challenges/kendoreact">KendoReact Free Components Challenge</a>.</em></p> <h1> 😂 JokeGenie – Your Personal Stand-Up Comedian </h1> <h2> What I Built </h2> <p>JokeGenie is a fun, GenAI-powered joke generator where you:</p> <ul> <li>Choose a joke category (Dad Jokes, Country Humor, Dark Humor)</li> <li>Optionally enter a topic (like "bananas", "404 errors", or "your mom")</li> <li>Get a unique, AI-generated joke delivered in a playful UI </li> <li>Bonus: Floating emojis, animated speech bubble, and a rotating funny placeholder 🎭</li> </ul> <p>Built with <strong>React</strong>, <strong>Cohere’s GenAI API</strong>, and the awesome <strong>KendoReact Free Components</strong>.</p> <h3> Demo </h3> <p>🌐 <strong>Live App</strong>: <a href="https://jokegene.netlify.app/" rel="noopener noreferrer">https://jokegene.netlify.app/</a><br><br> 💻 <strong>Source Code</strong>: <a href="https://github.com/ET45/joke-generator" rel="noopener noreferrer">https://github.com/ET45/joke-generator</a></p> <h2> KendoReact Experience </h2> <p>I used several free components from KendoReact to build the core interface quickly and style it with custom flair:</p> <ul> <li> <code>@progress/kendo-react-buttons</code> — for animated, category buttons and joke actions</li> <li> <code>@progress/kendo-react-inputs</code> — for the styled keyword input with emoji icon</li> <li> <code>@progress/kendo-react-layout</code> — to create a neat, card-based layout</li> <li> <code>@progress/kendo-react-indicators</code> — to show a loading spinner while fetching jokes</li> <li> <code>@progress/kendo-react-notification</code> — for error handling when the joke fails to load</li> </ul> <p>KendoReact’s free components gave me a strong UI base while allowing custom CSS layering for a unique visual identity.</p> <h3> AIm to Impress 🤖 </h3> <p>This project integrates the <strong>Cohere GenAI API</strong> using the <code>command-r-plus</code> model.<br><br> The app sends a prompt like:</p> <blockquote> <p>“Tell me a dark humor joke about JavaScript.”</p> </blockquote> <p>And gets a fun, original joke in return.<br><br> No static jokes here — it's AI all the way. 🧠🎤</p> <h3> Delightfully Designed 🎨 </h3> <p>While I didn’t use the Kendo UI Figma Kit directly, I customized the components to match a consistent theme:</p> <ul> <li> <strong>Violet brand color</strong> (<code>#a66cff</code>) across buttons and borders</li> <li>Emoji reactions and speech-bubble-style dialog</li> <li>Funny rotating placeholder</li> <li>Floating emojis for background energy 😄</li> </ul> <h3> Built With ❤️ By </h3> <p>🧑‍💻 <a href="https://github.com/ET45" rel="noopener noreferrer">@ET45</a> Emre Tugutlu</p> <p>Thanks for the great challenge and awesome components, Kendo team!<br><br> This was a ton of fun to build 💜😂</p> devchallenge kendoreactchallenge react webdev