dashboard DT money

2022frontend (web & mobile)

I designed and developed DT Money, a comprehensive personal finance management application available both on the web and mobile platforms. The application enables users to track and control their personal finances, manage income and expenses, and monitor financial trends. The web version was built using ReactJS with Vite, styled with TailwindCSS, and enhanced with ShadCN UI and Redux for state management. The mobile version was developed using React Native with Expo, styled using Styled-Components, and integrated with OneSignal for push notifications. I also utilized Expo Dev Client to streamline mobile development and testing.

web

The web version of DT Money was developed using ReactJS with Vite for a fast and modern development experience, paired with Redux for state management and TailwindCSS and ShadCN UI for responsive and clean styling.

  • ReactJS with Vite: The application follows a modular structure, separating business logic from the infrastructure and delivery mechanisms. I used Aggregates and Watched Lists to maintain consistency across related objects and track changes effectively. This also allowed for easy scalability and extension of the application with additional subdomains and domain events.
  • TailwindCSS: I implemented a robust error-handling system based on functional programming techniques. This approach ensures that errors are caught and handled at appropriate layers without leaking across boundaries, improving the overall stability of the application.
  • Redux: For each domain's core use cases, I developed comprehensive tests to ensure that all functionalities work as expected under various conditions. These tests are tightly coupled with the use case logic, offering high confidence in the behavior of the system.
mobile

The frontend was developed using ReactJS (v19) in combination with Next.js (v15), providing a powerful foundation for building fast and dynamic web pages. Key features of the frontend include:

  • React Native with Expo: By using Expo, I was able to accelerate development and testing, making it easier to deploy updates and manage native functionalities like notifications and storage.
  • Styled-Components: I utilized Styled-Components to create dynamic, theme-based styles that adapt to different screen sizes and devices. This ensured that the mobile app remained visually consistent with the web app while providing a more native feel on mobile.
  • Expo Dev Client: During the development process, I used Expo Dev Client for testing and debugging, which provided a customized development environment that allowed for faster iterations on mobile features.
  • OneSignal Notifications: I integrated OneSignal to send real-time notifications to users about their financial activity. This includes reminders for upcoming bill payments, alerts for budget overspending, and motivational updates when users reach savings goals.
Conclusion:

DT Money is a powerful personal finance management tool that provides users with the ability to monitor and manage their finances seamlessly across web and mobile platforms. The combination of ReactJS, Vite, TailwindCSS, and Redux on the web, along with React Native, Expo, and Styled-Components on mobile, resulted in a cohesive, user-friendly application that enhances the financial control experience. Through features like real-time notifications, budget tracking, and detailed reports, DT Money empowers users to take control of their financial health and make informed decisions with ease.