This is a submission for the KendoReact Free Components Challenge.

What I Built

Ever needed a simple yet powerful way to create questionnaires, quizzes, or surveys and instantly share them? Questify makes it effortless! With Questify, anyone can design engaging questionnaires, generate a shareable link, and gather responses seamlessly.

But that's not all—on the other side, Questify empowers questionnaire creators with insightful analytics, helping them track participant responses, identify patterns, and make data-driven decisions. Whether it's for research, feedback, education, or just fun quizzes, Questify simplifies the entire process from creation to analysis.

Demo

Video Demo on canva

Image description

Image description

Image description

Image description

Image description

KendoReact Experience

In order to keep proper track I imported all the Kendo-react components in one file(questify/frontend/components/kendo.ts).

Used Button from kendo-react-button module as primary button throughout the app, also used ThemeBuilder to customize Button components styling according to the custom style I used in my app.

Used Input component from kendo-react-inputs for input elements throughout the app and along with it used Label component from kendo-react-labels.

Image description

I wanted to make action buttons/elements more intuitive hence used
SvgIcon from kendo-react-common module and fileReportIcon, eyeIcon, pencilIcon, shareIcon, trashIcon, logoutIcon from kendo-svg-icons module.

To make it more intuitive i wrapped these icons with a Tooltip component from kendo-react-tooltip module.

Image description

Used Avatar, AppBar,AppBarSection from kendo-react-layout in the Navbar component .

Image description

Delightfully Designed

Used ThemeBuilder to customize some of my components (since there was this limit of maximum 50 styling changes).

Image description

Image description

Things i liked : It would no doubt improve the inntegration process between design team and developer team. It would reduce the need of writing those verbose css style files just for a very minute style behaviour and no doubt it will save the dev team from the design team's wrath when they screw up with design team's ART :P.
Also the way the variables were used was very useful - it was in a way specific to the component as well as integrated with the overall theme.

Things that can improve :
The overall speed was very slow and since for each change or rather in some specific intervals this save call was being made, it was not really a smooth experience.
Probably there could have been a manual save option instead of auto save always.

Also for this challenge it would have been helpful if free and premium components could be filtered based on some flag. It would surely reduce the clutter on the screen else of course we can select a specific group and style them separately (which i tried doing) but then one would soon exceed the trial limit of style changes as you generally get engrossed in fixing those small details :(.

Also i guess since the latest update of KendoReact components was made recently, i did encounter some issues here and there, Animation and Tooltip an SvgIcon integration are some that i can remember at the moment, i feel may be the examples can be improved if it not increased.

** So for those who read till here , backend an dfrontend for this app was ready but the integration between the two had some bugs, due to time constraint i decided to use some dummy data, so that i could present my app to you guys.
Thank you.