Sai Shravan Vadla

Posted on Mar 24

MoneyFlow - Your Finance Buddy built using Kendo UI and React

#devchallenge #kendoreactchallenge #react #webdev

This is a submission for the KendoReact Free Components Challenge.

What I Built

MoneyFlow is a comprehensive financial money management app designed to help you track, manage, and optimize your finances effectively and efficiently. It provides a user-friendly interface to record income and expenses, categorize transactions, and visualize your spending patterns. This project utilizes the Kendo UI components, to create a beautiful and responsive UI. You can enter transactions, view them, and delete them. The application aims to simplify personal finance management, making it accessible to users with varying levels of financial literacy.

Demo

money-flow-client.vercel.app

shravzzv / MoneyFlow-client

MoneyFlow is a comprehensive financial money management app designed to help you track, manage, and optimize your finances effectively and efficiently.

MoneyFlow - Your Finance Buddy

Demo

Description

Features

Transaction Management:

Add new income and expense transactions with details like date, amount, category, and description
View a list of all transactions, sorted by date or category. * Delete individual transactions.

Categorization:

Categorize transactions to gain insights into spending habits (e.g., groceries, rent, entertainment).
Ability to add new categories.

User-Friendly Interface:

Intuitive and easy-to-navigate design using Kendo UI components.
Responsive design for…

View on GitHub

shravzzv / MoneyFlow-server

This repository contains the backend API for the MoneyFlow financial dashboard application. Built with Express.js, it provides robust endpoints for managing user financial data, including transaction tracking, budgeting, and generating financial reports. It utilizes PostgreSQL for data storage and Prisma ORM for efficient database interactions.

MoneyFlow Server

Project demo

Description

This repository contains the backend API for the MoneyFlow financial dashboard application. Built with Express.js, it provides robust endpoints for managing user financial data, including transaction tracking, budgeting, and generating financial reports. It utilizes PostgreSQL for data storage and Prisma ORM for efficient database interactions.

Features

Data Management: Efficient handling of user data with Postgres and Prisma.
API Endpoints: RESTful API endpoints for various operations.
Error Handling: Comprehensive error handling and logging.
Scalability: Designed to scale with your application's needs.
Documentation: Well-documented code and API endpoints.

API Endpoints

Index

GET /: Retrieve a welcome message to the server.

Entry Endpoints

GET /entries: Retrieve all entries.
GET /entries/:id: Retrieve an entry by ID.
POST /entries: Create a new entry.
PUT /entries/:id: Update a entry by ID.
DELETE /entries/:id: Delete a entry by ID.

AI Endpoints

…

View on GitHub

KendoReact Experience

I've had a truly positive experience leveraging the KendoReact Free Components to build the user interface for MoneyFlow. The rich set of pre-built components significantly streamlined the development process, allowing me to focus more on the application's logic and user experience rather than spending excessive time on UI development.

While I did encounter some challenges navigating the documentation initially, the quality and flexibility of the KendoReact components ultimately delivered a polished and professional-looking UI. The components' customization options allowed me to tailor the interface to match the application's specific needs, resulting in a visually appealing and user-friendly financial management tool. The responsiveness of the KendoReact components also ensured a consistent experience across different devices, which is crucial for a modern web application. Overall, the KendoReact Free Components played a pivotal role in the successful development of MoneyFlow's front-end, and I'm very satisfied with the final result.

Here's a list of all the components that i've used:

Buttons for submitting forms.
Floating Action Button for the main input button in the home page.
Typography for headings, and all other text items.
Bottom Navigation for navbar on mobiles.
Date Time picker for the main input form.
Dialog for the main input form.
Drop down list for the category selection in the main input form.
Floating labels for the inputs.
Inputs/textbox for the amount in main input form.
Inputs/text area for the description in the main input form and for interacting with AI.
Inputs/radio group for selecting the expense/income in the main input form.
Layout/drawer for the navbar on bigger screens.
Tooltips to show information regarding the FAB.

AIm to Impress

I've integrated GitHub's powerful AI models to develop a sophisticated chat interface within MoneyFlow, significantly enhancing the user's ability to interact with their financial data. This AI-powered chat functionality transforms the application from a simple transaction tracker into a dynamic financial assistant.

By leveraging these models, the AI gains a comprehensive understanding of the user's entire transaction history. This awareness allows for natural language queries, enabling users to ask questions like, "What was my total spending on groceries last month?" or "Show me all income received in the last week." The AI can then parse these queries, retrieve the relevant data, and present it in a clear, conversational format.

Delightfully Designed

In the development of MoneyFlow, I've harnessed the power of Progress ThemeBuilder to achieve a highly customized and cohesive user interface. This tool has been instrumental in ensuring that the application not only functions effectively but also presents a visually appealing and brand-consistent experience.

One of the key applications of ThemeBuilder was the seamless integration of the Inter font across all KendoReact components. This custom font, chosen for its readability and modern aesthetic, significantly enhances the user's reading experience and contributes to the overall professional look of the application. By leveraging ThemeBuilder's capabilities, I was able to apply this font consistently, ensuring a uniform typographic style throughout the entire interface.

Furthermore, I've meticulously fine-tuned the appearance of each KendoReact component used within MoneyFlow. This process involved "nudging" or customizing various aspects of the components, such as colors, spacing, and sizing, to align perfectly with the application's design specifications. ThemeBuilder's granular control over component styling allowed me to achieve a level of precision that would have been significantly more challenging with traditional CSS methods.

Notes

This project marked my inaugural experience integrating TypeScript with React, a learning curve I initially found quite steep. Navigating the intricacies of static typing within a dynamic React environment presented numerous challenges. However, I persevered, and I'm ultimately very pleased with the outcome. The enhanced code maintainability and reduced runtime errors that TypeScript provides have proven to be invaluable, solidifying my appreciation for its benefits. The initial hurdle was significant, but the resulting robustness of the code base makes the effort worthwhile.
To further enhance the reliability and quality of MoneyFlow, I adopted a Test-Driven Development (TDD) approach throughout the development lifecycle. This involved meticulously crafting comprehensive tests for both the client-side React components and the back-end API. This proactive testing strategy allowed me to identify and rectify potential issues early on, ensuring that the application functions as intended and meets the required specifications. The thorough test suite provides a safety net, enabling me to confidently make changes and additions to the codebase without fear of introducing regressions. This TDD strategy provided a high level of confidence in the application's stability.
This project also represented my first foray into implementing GitHub Continuous Integration (CI). Setting up automated workflows to build, test, and deploy my application was a new and enlightening experience. I configured CI pipelines to automatically run my test suites and build the application whenever changes were pushed to the repository. This automation not only streamlined the development process but also ensured consistent code quality and expedited the delivery of updates. Learning to leverage GitHub CI has significantly improved my development workflow and instilled a strong appreciation for the benefits of automation in software development.
Furthermore, MoneyFlow provided my first opportunity to utilize PostgreSQL as a production database, coupled with the Prisma ORM. This combination proved to be powerful and efficient, allowing me to manage database interactions with ease and maintain a clean, organized data layer. The seamless integration of Prisma with PostgreSQL significantly simplified data modeling and querying, contributing to the overall stability and performance of the application. This experience has expanded my database management skills and has given me confidence in using these technologies for future projects.

While the challenge presented an opportunity to witness the impressive capabilities of other developers, I'm content with the significant strides I've made in mastering new technologies. The skills I've acquired in TypeScript, React, and TDD will undoubtedly serve me well in future projects. The successful integration of these tools into MoneyFlow, coupled with the functional and reliable application I've built, represents a substantial achievement. Therefore, I consider the knowledge and experience gained during this challenge a victory in itself, and I'm proud of the progress I've made. Earning a completion badge would be a satisfying acknowledgment of this accomplishment.