The latest articles on DEV Community by Yugal Agarwal (@yugal). https://dev.to/yugal 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%2F720134%2F0fb15e04-4006-4aca-943e-5fb109900cb6.png https://dev.to/yugal en Yugal Agarwal Mon, 29 Sep 2025 05:37:08 +0000 https://dev.to/yugal/friendsrate-5cjl https://dev.to/yugal/friendsrate-5cjl <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> <h2> What I Built </h2> <p>This project is a "FriendRate" application, a private social platform where users can rate and review various items (movies, games, web series, etc.) and share these ratings with their friends. It allows users to:</p> <ul> <li>Sign Up/Login: Users can create an account or log in with a username.</li> <li>Join Friend Profiles: Users can view a friend's profile by entering their unique profile ID, allowing for shared viewing of ratings and reviews.</li> <li>Manage Categories: Users can create and organize items into custom categories (e.g., Movies, Games).</li> <li>Add/Edit/Delete Items: Users can add new items to their categories, providing a title, description, and an optional website link. They can also edit or delete their own items.</li> <li>Add Reviews: Users can add a star rating (1-10) and a text review for any item.</li> <li>View Reviews: Users can see their own reviews and reviews from friends on shared items.</li> <li>Comment on Reviews: Users can add comments to specific reviews.</li> <li>Share Profile: Users can easily share a link to their profile for friends to join.</li> </ul> <h2> Demo </h2> <p>The project is available at: </p> <div class="ltag__bolt"> <iframe src="https://friendrate-private-r-r4me.bolt.host" title="Bolt App" width="100%" height="600"> </iframe> </div> <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%2Fs6snsyv1o4fepngmsh7z.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%2Fs6snsyv1o4fepngmsh7z.png" alt=" "></a></p> <h2> KendoReact Components Used </h2> <p>The KendoReact components that are implemented in this project:</p> <ul> <li>Input: To replace standard HTML elements for text fields, such as usernames in AuthModal.tsx, category names in AddEditModal.tsx, and comment input in CommentsModal.tsx.</li> <li>TextArea: To replace standard HTML elements for multi-line text inputs, like item descriptions in AddEditModal.tsx and review text in ReviewModal.tsx.</li> <li>DropDownList: To replace the standard HTML element for category selection in AddEditModal.tsx.</li> <li>Button: To replace all standard HTML elements throughout the application, providing a consistent and styled button experience. This would apply to buttons in Header.tsx, AuthModal.tsx, AddEditModal.tsx, ReviewModal.tsx, CommentsModal.tsx, and ItemCard.tsx.</li> <li>DropDownButton: To replace custom dropdown menus, such as the "More Options" menu (Edit/Delete) in ItemCard.tsx.</li> <li>Dialog / Window: To replace the custom modal implementations (AuthModal, AddEditModal, ReviewModal, CommentsModal) for a more robust and accessible modal experience.</li> </ul> <h2> [Optional: Code Smarter, Not Harder prize category] AI Coding Assistant Usage </h2> <p>The assistant was tasked with identifying appropriate places in the existing React codebase to replace native HTML elements and custom components with their KendoReact equivalents. This involved modifying multiple files.</p> devchallenge kendoreactchallenge react webdev