GenAI x Kendo-react: AI Pair Programmer optimized for kendo-react

karan shah — Mon, 24 Mar 2025 06:03:12 +0000

This is a submission for the KendoReact Free Components Challenge.

What I Built

For this challenge, I created GenAI x KendoReact: AI Pair Programmer, a web application that leverages Generative AI (GenAI) and large language models (LLMs) to generate and execute code (leveraging kendo-react) in real-time using web containers. The unique selling point of this app is that it not only provides AI-generated code but optimizes the output specifically for KendoReact components, ensuring a seamless developer experience.
The app itself uses free components provided by kendo-react but also the GenAI generated code leverages the kendo-react components.

Demo

Check out the live demo here : https://kendo-react-sumvpvcmitq-git-main-devashishp1999s-projects.vercel.app/
View the source code on GitHub:
Kendoreact backend
Kendoreact frontend
Here are some screenshots of the application in action:

The landing page:

Code Generation in real time:

Code preview inside the browser:

KendoReact Experience

The UI of the application is built using KendoReact Free Components, ensuring a polished and professional design. Below are some of the KendoReact components used:

TabStrip & TabStripTab: Helps organize different sections of the application, such as input, output, and logs.
Typography: Enhances the text styling and readability.
Dialog & DialogActionsBar: Displays error messages and prompts to users in a clean and modern way.
Loader (kendo-react-indicators): Provides visual feedback during AI processing.
Cards: Showcases AI-generated suggestions and results in a structured format.
@progress/kendo-react-layout: Ensures a consistent and responsive layout across the application.
TextArea: Allows users to input prompts for AI code generation.
Tooltip: Provides helpful information when hovering over UI elements.
ButtonGroup & Button: Facilitates quick interactions with AI-generated code.
@progress/kendo-svg-icons: Enhances the UI with meaningful and visually appealing icons.

Aim to Impress

The GenAI x KendoReact app integrates AI to provide a seamless pair-programming experience. Users can:

Enter a prompt to generate React code.
View AI-generated KendoReact-optimized components.
Modify the code if needed.
Run the code directly in a web container.
See the live preview and iterate instantly.

The AI model is fine-tuned to prioritize KendoReact components, ensuring the generated code is production-ready with minimal adjustments.

This project was an exciting way to merge the power of Generative AI with KendoReact, creating a tool that not only aids developers but also showcases the flexibility of KendoReact components in real-world applications.

Thanks for reading, and happy coding! 🚀

Rise Collective: Women Entrepreneur community using Wix Studio (Smart Mentor Matching) & More.

karan shah — Mon, 28 Oct 2024 05:57:44 +0000

This is a submission for the Wix Studio Challenge: Community Edition.

RiseCollective - What & Why !

Visit Site

Why ?
Women entrepreneurs face unique challenges in the business world.
Only 2.3% of VC funding goes to women-led startups.
48% of women entrepreneurs' report lack of mentors as a major barrier.
67% struggle with access to strong professional networks.
Women-led startups generate 2x more revenue per dollar invested, yet remain underfunded.

What ?

RiseCollective is a community designed specifically for women entrepreneurs, combining community, mentorship, and AI-powered support to break down traditional barriers to success.

It offers following features:

Collaborative Communities
Smart Mentor Matching
Inspiring Top Stories
EntrepreneurPR Assistant

All features are built with Wix elements, Wix Velo APIs, Wix Apps and Wix CMS.

Demo

My Submission

Landing Pages and open to all pages

Member Pages

Smart Mentor Matching

EntrepreneurGPT

Other Pages

Development Journey

In the world of web development, drag-and-drop platforms like Wix are often dismissed as "limited" or "basic" - tools suitable only for simple websites with standard functionality. The common perception is:

"You can't build complex features"
"Everything looks the same"
"Real developers don't use drag-and-drop platforms"
"Custom functionality is impossible"

I decided to challenge these assumptions.

The Innovation Opportunity

While exploring existing solutions for women entrepreneurs, I noticed significant gaps and decided to build something around that:

Gaps Were:

Communities were scattered across different platforms
No Mentorship support.
Success stories were buried in social media feeds
AI support was much needed.

These limitations became my opportunity to prove that with creative thinking and technical skills, you can build a powerful community platform using Wix.

I set four ambitious goals:

Create community groups interaction.
Build a smart mentor matching system using basic NLP.
Develop a curated Top Stories section.
Integrate an AI-powered EntrepreneurPR.

Velo APIs

Wix Members API
Wix Data API
Wix Fetch API

Apart from awesome Velo API's I used NPM packages for natural language processing.
Support for NPM packages is great for developing a dynamic application.

Wix Apps

Wix Groups App
Wix Blogs Apps
Wix CMS
Wix Members Area

Smart Matchmaking Feature:

This feature matches the mentee and mentor using smart NLP based algorithm. In future, we can extended this functionality to use vector embeddings to compare common interests and expertise.

The mentee enters the short description about what kind of help she needs.
The mentee and mentor are matched by using a simple NLP based algorithm.

Mentee and mentor can contact via email for now, but in future I am planning to send request to mentors and then if request is accepted from the mentor, both can connect.

const mentorsWithScores = allMentors.items .filter(mentor => mentor.email !== menteeData.email) .map(mentor => { const score = natural.LevenshteinDistance( mentor.description.toLowerCase(), menteeData.needsDescription.toLowerCase(), { search: true } ); return { mentor, score }; });

Other than this I have created different menus for the non-members and logged in members.

At last, I would like to thank awesome Wix community, Wix Discord community, Wix Documentation for helping me whenever I stuck somewhere.

The app is built solely by me for the Wix Community Challange.

All imagery and illustrations are attributed to creative commons owners, and thanks to them.

DEV Community: karan shah

GenAI x Kendo-react: AI Pair Programmer optimized for kendo-react

What I Built

Demo

KendoReact Experience

Aim to Impress

Rise Collective: Women Entrepreneur community using Wix Studio (Smart Mentor Matching) & More.

RiseCollective - What & Why !

Demo

Development Journey

Velo APIs

Wix Apps