KendoReact Free Components Challenge

#devchallenge #kendoreactchallenge #react #webdev

This is a submission for the KendoReact Free Components Challenge.

📌 What I Built

For this challenge, I created 📊 Fiscally, a finance-focused web application that leverages KendoReact's free components to provide users with financial insights, interactive charts, and AI-powered advice. The app is fully responsive and works across devices, ensuring users can manage their finances on the go.

The app allows users to:
✅ View financial data in KendoReact Charts & Grids
✅ Interact with KendoReact Forms & Inputs
✅ Get AI-driven financial advice using Cohere AI

🎥 Demo

🔗 Live App: Fiscally
🔗 GitHub Repository: KendoReact-Free-Components-Challenge

🖼️ Screenshots

🔥 KendoReact Experience

I used 10+ KendoReact free components to build Fiscally. Here’s how I leveraged them:

@progress/kendo-react-grid: Used to display the transaction history table, allowing users to view and manage their financial transactions easily.
@progress/kendo-react-charts: Used to create the "Income vs. Expenses" chart, providing users with a visual representation of their financial trends.
@progress/kendo-react-dateinputs: Integrated into the budget planner and bill reminders for date selection.
@progress/kendo-react-dropdowns: Used for category selection in the budget planner.
@progress/kendo-react-buttons: Used for actions like "Add Income," "Add Expense," and "Set Budget."
@progress/kendo-react-dialogs: Used for modals and popups, such as the AI advice section.
@progress/kendo-react-form: Used for form inputs in the budget planner and other sections.
@progress/kendo-react-layout: Used to structure the app’s layout, ensuring a clean and organized design.
@progress/kendo-react-tooltip: Added tooltips to provide additional context for certain UI elements.
@progress/kendo-react-scheduler: Used for the bill reminders calendar view.

These components allowed me to build a feature-rich app quickly while maintaining a consistent and professional design.

🤖 AIm to Impress

To make Fiscally stand out, I integrated Cohere AI to provide users with personalized financial advice. The AI analyzes the user’s financial data and offers actionable tips on how to save money, reduce expenses, and achieve financial goals. For example, it suggests setting specific savings goals and tracking spending habits.

The AI advice feature is powered by the cohere-ai package, which connects to Cohere’s natural language processing API. This integration adds a layer of intelligence to the app, making it more than just a financial tracker—it’s a financial advisor.

📸 Screenshot of AI integrated :

🎨 Delightfully Designed

To enhance the UI, I used Progress ThemeBuilder to customize KendoReact components and improve the app’s visual consistency.

📸 Screenshot of ThemeBuilder Customization :

Key Improvements Using ThemeBuilder:
✔️ Custom color scheme
✔️ Better form & grid styling
✔️ More user-friendly visual hierarchy

💡 Final Thoughts

Participating in the KendoReact Free Components Challenge was a great experience!
KendoReact’s feature-rich components helped me build Fiscally faster, while AI and ThemeBuilder added unique value to the app.

Deploy with ease. Manage efficiently. Scale faster.

Leave the infrastructure headaches to us, while you focus on pushing boundaries, realizing your vision, and making a lasting impression on your users.

Get Started