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.
Top comments (0)