The latest articles on DEV Community by Om343 (@om343). https://dev.to/om343 https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F794173%2F1204989d-1e03-42cd-bcc0-e8a8154baf8b.png https://dev.to/om343 en Om343 Mon, 29 Sep 2025 06:59:34 +0000 https://dev.to/om343/kendo-cv-builder-338l https://dev.to/om343/kendo-cv-builder-338l <p><em>This is a submission for the <a href="https://dev.to/challenges/kendoreact-2025-09-10">KendoReact Free Components Challenge</a>.</em></p> <p>I built a <strong>Kendo Cv-builder</strong>. a minimal yet intuitive cv builder powered by kendo ui beautiful and accessible components</p> <p>The project styling is achieved entirely with <strong>kendo-ui components</strong> and <strong>vanilla css</strong>.</p> <h2> Demo </h2> <p><strong>deployed app</strong> : <a href="//kendo-cvbuilder.netlify.app">Cv-builder</a></p> <p><strong>Code Repo</strong> : <a href="https://github.com/Oms-343/kendo-cvbuilder" rel="noopener noreferrer">repo</a></p> <h2> KendoReact Components Used </h2> <p>Kendo UI Components Used in this Project<br> <strong>Animations</strong><br> <strong>Fade **- Used for page transitions<br> **Slide</strong>- Used for page transitions<br> <strong>Expand</strong>- Used for page transitions<br> <strong>Layout</strong><br> <strong>Splitter</strong>- Main layout component for dividing the interface into <strong>panels</strong><br> <strong>Buttons</strong><br> Button - Used throughout forms and navigation<br> <strong>Inputs</strong><br> <strong>TextBox</strong>- Basic text input in forms<br> <strong>MaskedTextBox</strong>- Formatted text input (likely for phone numbers)<br> <strong>Checkbox</strong>- Used in experience form (probably for "current job" checkbox)<br> <strong>Date Inputs</strong><br> <strong>DatePicker</strong> - Used in education and experience forms for dates<br> <strong>Labels</strong><br> <strong>Label</strong>- Form field labels throughout the application<br> <strong>Editor</strong><br> <strong>Editor</strong>- Rich text editor for summary and experience descriptions<br> <strong>EditorTools</strong>- Toolbar configuration for the editor (Bold, Italic, Underline, Lists, Links)<br> <strong>PDF</strong><br> <strong>PDFExport</strong>- For generating PDF versions of the CV<br> <strong>Tooltip</strong><br> <strong>Tooltip</strong>- Used in sidebar navigation for enhanced UX<br> <strong>Theming</strong><br> <strong>Bootstrap Theme</strong> @progress/kendo-theme-bootstrap for consistent styling</p> <h2> [Optional: Code Smarter, Not Harder prize category] AI Coding Assistant Usage </h2> <p>I used the kendo mcp server in cursor for creating almost all the ui components for this project. here is one of the example i used to add a tooltip component </p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fpc77673se875z3jpdpas.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fpc77673se875z3jpdpas.png" alt=" " width="800" height="365"></a></p> devchallenge kendoreactchallenge react webdev