DEV Community

Yugal Agarwal
Yugal Agarwal Subscriber

Posted on

FriendsRate

#devchallenge #kendoreactchallenge #react #webdev

This is a submission for the KendoReact Free Components Challenge.

What I Built

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:

  • Sign Up/Login: Users can create an account or log in with a username.
  • Join Friend Profiles: Users can view a friend's profile by entering their unique profile ID, allowing for shared viewing of ratings and reviews.
  • Manage Categories: Users can create and organize items into custom categories (e.g., Movies, Games).
  • 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.
  • Add Reviews: Users can add a star rating (1-10) and a text review for any item.
  • View Reviews: Users can see their own reviews and reviews from friends on shared items.
  • Comment on Reviews: Users can add comments to specific reviews.
  • Share Profile: Users can easily share a link to their profile for friends to join.

Demo

The project is available at:

friendrate-private-r-r4me.bolt.host

KendoReact Components Used

The KendoReact components that are implemented in this project:

  • 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.
  • TextArea: To replace standard HTML elements for multi-line text inputs, like item descriptions in AddEditModal.tsx and review text in ReviewModal.tsx.
  • DropDownList: To replace the standard HTML element for category selection in AddEditModal.tsx.
  • 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.
  • DropDownButton: To replace custom dropdown menus, such as the "More Options" menu (Edit/Delete) in ItemCard.tsx.
  • Dialog / Window: To replace the custom modal implementations (AuthModal, AddEditModal, ReviewModal, CommentsModal) for a more robust and accessible modal experience.

[Optional: Code Smarter, Not Harder prize category] AI Coding Assistant Usage

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.

Top comments (0)