Forem: Divya Pankaja Nanda

Questify – Create, Share & Analyze Questionnaires with Ease (KendoUI,ThemeBuilder,MERN-TS,Redis,Docker)

Divya Pankaja Nanda — Mon, 24 Mar 2025 07:21:38 +0000

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

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.

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.

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

Delightfully Designed

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

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.

DEV Community + Github Hackathon - InterviewMate

Divya Pankaja Nanda — Wed, 24 May 2023 00:06:08 +0000

What I built

InterviewMate : an AI based interviewer who will help you be completely prepared for your next real life software engineering interview.

Category Submission:

Wacky Wildcards

App Link

Live

Screenshots

Description

InterviewMate is an AI based interviewer.
Give it any software engineering job description from any platform(exp: LinkedIn, wellfound, etc.) and InterviewMate will

help you extract the necessary skills from the job description, to which you can add new skills and remove unnecessary skills according to your requirement
allow you to decide the number of questions you want per interview round
generate relevant interview questions on the extracted skill set
conduct a chat based interview
give feedback on your answers

Thus, it will help you create an interview based on your inputs, practice interview questions on the skills extracted and clarify your doubts if any using explanations.

Link to Source Code

InterviewMate Github

Permissive License

MIT

Background (What made you decide to build this particular app? What inspired you?)

Recently I am preparing for interviews and I found it really repetitive and time consuming to filter out the relevant technical skills from a job description and the search relevant interview questions and then again look for their answers to ensure if I my answer is correct or not, thus I built InterviewMate which will simply do all these tasks for me and all I have to do is just a few clicks and CTRL+C,CTRL+V :)

How I built it (How did you utilize GitHub Actions or GitHub Codespaces? Did you learn something new along the way? Pick up a new skill?)

In this project i used the following technologies and learnt quite a lot from each of them :

API : OpenAi api, this was my first time making an application using openai api thus I learnt a few new things like
temperature - which is used to regulate the degree of difference between responses to the same prompt request and it came to my rescue when I was struggling quite a lot while trying to standardize my prompt responses, 2.learnt about the various ai modules openai is providing and their respective api end points which are to be access these modules in a specific way. Example : GPT-3.5 and Davichi models have different api endpoints and different api request body format. Github feature used - I used Github as a code repository and I created a codespace in between this project's development process and realized in a few seconds all my node modules were already installed, README.md files were much more intuitive since they were actually being rendered directly. It was not doubt a smooth experience using Github codespace for development. Frontend - SvelteKit, this was my 2nd time trying out SvelteKit for a hackathon project, though I am now a bit familiar with SvelteKit but I feel there is a lot more practice needed to write clean and optimal code in the first go.

Linode + DEV Hackathon

Divya Pankaja Nanda — Tue, 21 Feb 2023 22:33:09 +0000

What I built

Mimi is an expense journaling and budgeting application.

Category Submission:

Wacky Wildcard

App Link

-Not deployed

Screenshots

Description

Main objective of this app is to help the user keep track of the expenses made by them and thereby helping them to analyse their spending pattern and further optimize it.

Link to Source Code

UI: https://github.com/DivyaPankajaNanda/mimi.git
API: https://github.com/DivyaPankajaNanda/mimiapi.git

Permissive License

MIT

Background

I believe that money should be spent on this that really provide us happiness, therefore to figure out what type of expense porvides us immense pleasure we need to track it.

How I built it

UI - SvelteKit,Bootstrap(initial setup wip)
API - Spring boot (initial basic setup)
DB - PostgreSql

Additional Resources/Info

MongoDB Atlas Hackathon 2022 on DEV

Divya Pankaja Nanda — Thu, 08 Dec 2022 23:59:22 +0000

What I built

Unveil is a platform built with the intention to help developers showcase their talent and make recruitment easier for recruiters by providing them with means to handle an entire cycle of recruitment process at a single place and developers to apply to a job as smoothly as possible.

Currently a basic version is deployed - where in all open jobs are being displayed. Stay tuned for more features.

Category Submission:

Think Outside the JS Box

Images

Link to Source Code

https://github.com/DivyaPankajaNanda/unveil/tree/master

Permissive License

MIT

Background

I wanted to make the recruitment process easier for both dev and recruiters and add more transparency to the entire process.

How I built it

I used Fastapi and SvelteKit along with MongoDb.

Though there are many features still pending on the frontend side, while building the backend i did came accross a lot of interesting facts about Fastapi and MongoDb like understanding the difference between json and bson while i was deciding wether to use UUID or Objectid, crud operations in MongoDb with order by and other additional constraints,etc.

No doubt there is still a lot more to learn w.r.t realtime features , text based search using aggregation, etc. which will continue after this hackathon too.