DEV Community

Cover image for MyFinApp: Take Control of Your Finances – Track, Analyze, and Achieve Your Financial Goals with Ease!
jakpanudoh
jakpanudoh

Posted on

MyFinApp: Take Control of Your Finances – Track, Analyze, and Achieve Your Financial Goals with Ease!

This is a submission for the KendoReact Free Components Challenge.

What I Built

MyFinApp is designed to help users manage their financial health by providing tools to track income, monitor expenses, and set savings goals. The application enables users to input financial data, categorize transactions, and visualize their financial habits through interactive charts and tables. By leveraging KendoReact's powerful UI components, this app delivers a seamless and engaging user experience.

Whether you are looking to create a monthly budget, analyze spending patterns, or stay on top of your savings objectives, this dashboard provides a structured and user-friendly interface to achieve your financial goals..

Demo

Live Demo - my-fin-app.vercel.app
Source code - https://github.com/ubonisrael/my-fin-app
Here are some screenshots of the application
Screenshot of homepage

Image of transaction creation

Image showing transaction logs

Image showing the creation of a savings goal

KendoReact Experience

This project makes use of 10 KendoReact Free components, including:

  • 🎞 Animation – Used for fading in notifications.
  • 🔘 Buttons – Perform actions like adding or removing transactions and savings goal.
  • 🖼 SvgIcon – Used for displaying icons throughout the application.
  • 📊 Data Grid – Used for displaying financial records in a structured format.
  • 📅 Date Inputs (DatePicker) – For selecting deadlines for savings goals.
  • 💬 Dialog – Show confirmation messages, transaction and savings forms.
  • 📂 DropDownList – Categorize income and expenses.
  • 🏗 Indicators (Skeleton) – Provide loading state placeholders.
  • ✍️ Inputs – Collect user input for income, expenses, and goals.
  • 🏷 Labels – Provide clear labeling for form elements.

Working with KendoReact has been an enjoyable experience. The numerous collection of well-designed, feature-rich components made it easy to build a modern and interactive frontend. The components are highly customizable, well-documented, and integrate seamlessly with React and TypeScript.

I highly recommend KendoReact to any frontend developer looking to accelerate development while maintaining high-quality UI/UX. Whether you're building dashboards, business applications, or any data-driven interface, KendoReact provides the tools to create a polished and professional product effortlessly.

Hot sauce if you're wrong - web dev trivia for staff engineers

Hot sauce if you're wrong · web dev trivia for staff engineers (Chris vs Jeremy, Leet Heat S1.E4)

  • Shipping Fast: Test your knowledge of deployment strategies and techniques
  • Authentication: Prove you know your OAuth from your JWT
  • CSS: Demonstrate your styling expertise under pressure
  • Acronyms: Decode the alphabet soup of web development
  • Accessibility: Show your commitment to building for everyone

Contestants must answer rapid-fire questions across the full stack of modern web development. Get it right, earn points. Get it wrong? The spice level goes up!

Watch Video 🌶️🔥

Top comments (1)

Collapse
 
nazim_akkal_a6c14939d5955 profile image
nazim akkal

rechart ?

The best way to debug slow web pages cover image

The best way to debug slow web pages

Tools like Page Speed Insights and Google Lighthouse are great for providing advice for front end performance issues. But what these tools can’t do, is evaluate performance across your entire stack of distributed services and applications.

Watch video

AWS GenAI LIVE!

GenAI LIVE! is a dynamic live-streamed show exploring how AWS and our partners are helping organizations unlock real value with generative AI.

Tune in to the full event

DEV is partnering to bring live events to the community. Join us or dismiss this billboard if you're not interested. ❤️