A Pickleball Resource Guide using KendoReact

This is a submission for the KendoReact Free Components Challenge. What I Built I built a pickleball resource guide using KendoReact's list of components. This guide is for pickleball players of all types, providing recommendations for paddles, coaches and a list of local tournaments. Demo URL: https://pickleballresource.netlify.app/ Github: https://github.com/kaymed/pickel-resource Screenshots: Homepage: Tournaments Page: Stats of Coaches: KendoReact Experience I used the following components: The Card component (and their building blocks: CardBody, CardTitle, CardActions, CardHeader, CardTitle, CardSubtitle,CardBody) is the main visual structure of the guide. It organizes the content into something clean but playful. I love that you can use an image, but don't necessarily need an image for the section to look clean and clear. Button- The call to action(s) of the guide. I love that there are so many uses for one component. There is no real "menu" for this application, but the use of the Button component creates a 'site map kind of' flow to the application. I created a 'dark mode' button that is probably my favorite button on the site. Yes, I have a list of favorite buttons... FloatingActionButton- The first component that I used, oddly enough. As I was coming up with the premise of my idea, this component stuck out to me the most. It was a simple call to action but I loved how it overlayed on the Card component, and I knew I needed to use it. SVGIcon - I'm a sucker for icons and using KendoReact's 500 count library of svg icons is a must! Stepper - I wanted to create an element of the guide that was interactive and the Stepper was perfect for the job! At first I thought this component would be paired well with the navigation, but I changed my mind (for the 1,000th time) about the use of it. Instead, I decided to use it as a 'leave a review' section at the bottom of the pages. Since I could incorporate cute emojis into it as well, this is a piece I'd love to add a form to, in the future, that can be sent to developers (

Mar 22, 2025 - 09:42

This is a submission for the KendoReact Free Components Challenge.

What I Built

I built a pickleball resource guide using KendoReact's list of components. This guide is for pickleball players of all types, providing recommendations for paddles, coaches and a list of local tournaments.

Demo

URL:
https://pickleballresource.netlify.app/

Github:
https://github.com/kaymed/pickel-resource

Screenshots:

Homepage:

Tournaments Page:

Stats of Coaches:

KendoReact Experience

I used the following components:

The Card component (and their building blocks: CardBody, CardTitle, CardActions, CardHeader, CardTitle, CardSubtitle,CardBody) is the main visual structure of the guide. It organizes the content into something clean but playful. I love that you can use an image, but don't necessarily need an image for the section to look clean and clear.
Button- The call to action(s) of the guide. I love that there are so many uses for one component. There is no real "menu" for this application, but the use of the Button component creates a 'site map kind of' flow to the application. I created a 'dark mode' button that is probably my favorite button on the site. Yes, I have a list of favorite buttons...
FloatingActionButton- The first component that I used, oddly enough. As I was coming up with the premise of my idea, this component stuck out to me the most. It was a simple call to action but I loved how it overlayed on the Card component, and I knew I needed to use it.
SVGIcon - I'm a sucker for icons and using KendoReact's 500 count library of svg icons is a must!
Stepper - I wanted to create an element of the guide that was interactive and the Stepper was perfect for the job! At first I thought this component would be paired well with the navigation, but I changed my mind (for the 1,000th time) about the use of it. Instead, I decided to use it as a 'leave a review' section at the bottom of the pages. Since I could incorporate cute emojis into it as well, this is a piece I'd love to add a form to, in the future, that can be sent to developers (