This is a submission for the KendoReact Free Components Challenge.
What I Built
I am not a designer nor an image editor. However, I find myself going to Google every now and then, searching on background remover, light enhancing, etc. I go to Figma as well to add some effects, or apply masks or whatever.
As a casual image editor, I need what works right a way with the fewest clicks possible. I am not willing to invest my time on learning something I need few times a month.
Figma is great. However, when any tool start to get traction. The team behind it start to seek growth and domination. Figma and Canvas started as simple tools that do one or two things. Now, they require a learning curve to achieve things.
These days, I find myself going to Excalidraw to be honest to draw my creatives for posts or what not. Why? I believe on the saying: "With greater power comes greater responsibilities." Apply to this field and it becomes: "With more options, comes more distractions." For a simple remove background task and add stroke to make stump like. You start exploring the never ending plugins ecosystem searching for one who does both tasks. A task of three minutes max turns to a full day of trying different options, signing to countless services for an API key. Of course, days after that, you still didn't edit your image and forget about the project all over.
The Concept
I imagine myself as the main end user:
- I can upload multiple images.
- Add some tasks or editing flow as drag and drop.
- Hit compile or run.
- Get the result files (preview, download, download all).
It should be as simple as it was described.
Demo
Demo Video:
You can test the app from these two domains:
You can also find the repository for this project here.
KendoReact Components Used
The components used in this project are:
- kendo-react-common
- kendo-react-intl
- kendo-react-buttons
- kendo-react-inputs
- kendo-react-dropdowns
- kendo-react-dialogs
- kendo-react-notification
- kendo-react-indicators
- kendo-react-animation
- kendo-popup-common
- kendo-react-popup
- kendo-react-layout
- kendo-react-labels
- kendo-react-data-tools
- kendo-react-charts
- kendo-react-grid
Assistant Usage
I don't have much time for the challenge. Even though I have ten years of experience with the Kendo UI and Telerik. I mainly used jQuery version for dashboard related work. Still, five days is not enough time for me to come with an idea, code it and write about it while doing my work.
Since the trend this year is all around Vibe Coding, Coding Assistants, Agents, AI Editors. Why not go this road and Vibe Code my idea for this challenge?
I tried a couple of these Vibe Coding platforms before. However, the main problem I usually face is their limitations. Meaning, if you let the agent code the way it knows how. It will give you working prototypes fast and almost perfect. However, when you ask them to use a certain library or framework, they struggle with that and only bring you blood pressure up.
So, I started with Google AI Studio Build. It proved itself as reliable when it comes to using libraries with React and Angular. However, this time it wasn't efficient. It kept showing errors that it couldn't fix. I even deleted the project and started from scratch. The Kendo MCP configuration doesn't seem to work at first in this environment neither.
So, I downloaded the code base and opened my ZED editor. I configured the Kendo MCP and started prompting.
The first iteration was easy. I prompted Zed to fix the issues. It did very quickly. The problem was in importing react in multiple places from different CDNs. I updated the AI Studio code base and it worked.
Later on, things started to get very nasty. Both Zed & Ai Studio were needed for different tasks. I tried to stop using AI Studio, but the API key calls from my local version kept preventing me from doing anything claiming that I exceeded the limits or whatever.
At the end, I continued on AI Studio. I added the Kendo MCP configuration in its settings. Luckily for me, it started using it to access the latest documentation and recognizes my prompts with ease. It even fixed an issue related to license while using a premium feature of the dropdown component. Same happened with the button at certain point. I wonder if the MCP can pinpoint the paid features in free components without making a mistake and I had to point to it. Of course, I didn't point to the component causing the issue. I only gave my feedback about the licensing strips showing in the dialog form.
Adding more features
I have to say. I never felt cold adding a feature like in this project. The AI Studio ruined my app two times while adding a simple button. It's unfortunate that the GitHub integration isn't working correctly. So I had to download a version every now and then.
Dashboard
Let's be honest. Kendo UI shines in dashboards. In my previous job, we decided to buy it because of how straightforward building dashboards was with the Data Grid, Charts, Editors and so on.
After the first prompt about the dashboard. I confirmed all my fears. It crashed and I had to track errors and fix them. The same error keeps happening whenever I add a new component. Ai Studio uses ESM CDN for its packages management. The problem in versioning. So I had to check the right version for each component or package.
Licensing
I was hoping to use the tiling layout and the data grid components. Unfortunately,the little I am doing with them shows the licensing strips. So I removed them all together.
Deployment
Even though I prefer Cloudflare these days. I chose Vercel to host this project. However, to deploy it outside of AI Studio I have to do some changes.
The first thing I did was removing adding a new option for the user to add his own Gemini API KEY. This way, anyone can use the app without me worrying about credits and so on. Of course, this will change if the app gets to a certain point.
Once again, I used only free components. However, the dialog for the API configuration shows the license strips!!! I was confused, so I prompted Claude in Zed to use the MCP and investigate the issue. Unfortunately, the investigation didn't lead to a good result. Since Claude went and deleted the Kendo theme and did other unnecessary stuff. Then he went out of service because I exceeded the limit of using it.
I switched the model to ChatGPT 5 mini through GitHub Copilot and prompted:
in the @ApiKeyConfig.tsx file there something that make Kendo add the license strips. Please use the kendo react mcp to investiage this. Don't do anything until you ask
This model did a better job with the Kendo MCP. It asked for a list of all premium components. Then it asked for free components with premium features. Compiled a plan for me on how to fix the issue. After executing the plan the license strips gone.
Plans
I started this project for fun. After spending almost five days working on it. I am planning to continue enhancing it to see how it turns out. I added a todo list to the README file of this project. But that's just the starting point. But first, let's see how it perform in this challenge.
Top comments (0)