This is a submission for the KendoReact Free Components Challenge.
What I Built
I created a Strong Password Generator, a fun and useful web app that helps users make secure passwords.
It’s simple to use and packed with features to play with. You can set how long the password is, pick what types of characters to include, and see how strong it is—all in real time!
I wanted to build something practical that shows off how cool KendoReact free components are.
Demo 😺
1) You can try it live here: Code
KendoReact Experience
I built this app from the ground up using only KendoReact free components. Here’s how I did it:
1] Components Used:
I added seven free components—Button, NumericTextBox, Switch, DropDownList, Grid, ProgressBar, and Chat. They work great together in the app.
2] How They Helped:
a) Button makes actions like "Generate" or "Copy" super easy to click.
b) Grid shows all your passwords in a neat table with edit, copy, and delete options.
c) ProgressBar gives a colorful bar to show password strength—very handy!
3] Why I Loved It:
i) These tools were ready to use right away, saving me tons of time.
ii) They made my app look professional with just a few lines of code.
iii) It’s so easy to customize them with props—KendoReact is a developer’s best friend! 😊
☑️ AIm to Impress
I added a smart twist to make the app stand out with a chatbot feature:
I) Chatbot Magic:
I built a simple AI-like chatbot using the Chat component (powered by basic logic, not real GenAI). It answers questions about passwords and gives tips like, “Add more special characters for a stronger password!”
II) How It Works:
a) Users can type questions like “How do I make it strong?”
b) The chatbot replies with clear, helpful advice based on the settings.
c) It feels like a friendly guide right in the app!
III) Why It’s Cool:
i) It makes learning about passwords interactive and fun.
ii) It adds a modern touch that users love.
iii) Even without real AI, it shows how smart an app can feel.
Delightfully Designed :↘️
I worked hard to make this app look amazing and fun to use:
1} Design Tools:
I didn’t use KendoUI Figma Kits or Progress ThemeBuilder directly, but I got inspired by their clean, modern styles to create my own look.
2} How I Designed It:
a) I started with a bright gradient background (#ff6b6b to #e84393) that moves with animation.
b) Added glass-like panels with colorful borders (like #6c5ce7 for the grid).
c) Used fun animations like bouncing inputs and sliding sections.
3} My Experience:
i) Playing with colors and animations (like zoom-in effects) was a blast!
ii) I made it work perfectly on phones and desktops—super responsive!
iii) The final app is bright, easy to use, and exciting to look at! 🌟
💡 This was a solo project, so all the work is mine—no teammates to credit here!
Thanks for hosting this challenge! I had a great time building this for the KendoReact Free Components Challenge.
Hope you enjoy it as much as I enjoyed making it!
Top comments (0)