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:
homepage

Tournaments Page:

tournaments page

Stats of Coaches:

Image description

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 (👋🏼 Hi, me).
  • AppBar - Originally, I wanted to house the menu for the guide in the AppBar but after looking at the different position options, I decided to use it as the footer with the 'made by' text. 'Kay Pickleball Group' is fake, of course.
  • Rating and Dialog - For the page, 'Coaches, I created a 'stats' section that uses both Rating and Dialog to showcase the skills and an 'average rating' for one of the coaches. With more time, I want to use the Rating component in a feedback form once a player works with one of the recommended coaches.
  • Grid / Grid Column / Filtering - This is my favorite section of the guide: the Tournaments page. I think majority of websites that have information about pickleball tournaments are very overwhelming. I wanted to simplify the UI of a general tournaments page, and housing the (random) tournament data in Grid with Filtering allowed me to do just that!
  • StackLayout - Minimally used but a strong impact in how I started building out the guide.

Delightfully Designed

I didn't spend a ton of time using the Progress ThemeBuilder but I did use it build a basic color palette. The system is simple to use, creating a 'playful' approach to editing components from the KendoReact library. The ability to select the main components that you want to use for your project (pictured below) was helpful in putting together the UI, keeping it small and myself out of trouble of making the project too crazy.

I would like to spend some more time with the builder, creating a proper UI library for my project. Maybe for my next one?
Image description

Future Self

I have a long list of "I wish I could add [blank] feature / component". Some of that can be found above.

In the next iteration, I would like to add an AI element. One that powers a quiz or chatbot that helps the user find a specific paddle, coach and/or tournament that fits the qualifications of that player. For example, if a player was doing their first tournament, the AI-powered bot would generate recommendations based on the information provided by the player.

I most certainly want to perfect the UI using ThemeBuilder, as well. But of course, published is better than perfect! I feel as if I've barely scraped the surface of what can be done!