Fiambond is a complete full-stack finance tracking app that was designed to help individuals and families manage their income and expenses and financial goals in a systematic way. The Fiambond, which is based on a React front end and Firebase back end (previously based on the original Laravel API), provides an easy-to-understand, easy-to-read, and fully-responsive interface. Depending on a mobile phone, tablet, and desktop computer, the user can easily track the financial well-being.
The app allows to have a safe space to handle personal finances, with the added option of creating a so-called Family Realm in which family members can use to track their finances jointly.
The platform is divided into two major realms, each with specialized features:
- Centralized Dashboard: The level of financial status of a person is presented in a full picture in terms of current liquid assets, active goals, and outstanding loans.
- Transaction Management: Income and expenses are added conveniently and there is an optional feature of uploading receipts which are hosted on Cloudinary; a detailed view of transactions provides a complete history of the transactions.
- Financial Goal Setting: All personal financial goals can be generated, monitored, and adjusted; the user can indicate the goal as accomplished or give up on it, and even add an achievement photo to show the success.
- Lending and Borrowing: This is a strong system that monitors money borrowed and given to other people in the family and outside of the family.
- Financial Summary: The visualisation of financial health is presented in weekly, monthly, and annual data presented on bar graphs with an analysis summary.
- Collaborative Dashboard: A common pool of finances is availed to family members to operate their common finances into focus with net family wealth, active family objectives, and family loans.
- Shared Transaction Ledger: All income and expenses connected with the family are presented in a transparent manner with the possibility to see the receipts and recognize the contributors or spenders of the family fund.
- Family Financial Goals: Financial objectives can be established and tracked together as a family with all members having a contribution and being able to see the progress.
- Integrated Family Lending: Loans amongst the members of the family are handled in a special system that has a two-way confirmation system to ascertain accuracy and agreement as the debtor and the creditor are the only people who see the details of their loan.
- Member Management: The Invitation of family members to the Family Realm is facilitated through their email addresses, and thus, collaborative financial tracking is launched.
| Stack Component | Technologies Used |
|---|---|
| Frontend | React, TypeScript, Vite |
| Backend API | Node.js, Express.js |
| Hybrid Database | MongoDB (Core Data) & Firebase Firestore (User Profiles) |
| Authentication | Firebase Auth |
| Image Hosting | Cloudinary |
| Deployment | Firebase Hosting |
| Archived / Explored | Cloudflare Pages, Render, Laravel, PHP, Python, Docker Desktop, LocalStack, Supabase (PostgreSQL) |
It was marked by a significant architectural transformation of the project, which was dictated by the limitations of free-of-charge Platform-as-a-Service (PaaS) providers.
The first release made use of a Laravel-based API server. In spite of its use, implementation of this stack on free platforms presented essential, non-sustainable issues:
- Service Expiration: Services provided by providers like Render do expire in 90 days, which makes them not suitable in long-term projects.
- Temporary URLs: Back4app the free version provides temporary URLs that are rotating. Whenever it is reinstated after the application has been put into an idle position, the API endpoint differs, which requires a painstaking, manual deployment process and constant updates of the frontend environment variables on Cloudflare to keep connected.
The above limitations had pointed to the need to have a more stable, server-free architecture. As a result, there was a strategic pivot to a Hybrid Architecture:
- Node.js, Express.js, & MongoDB: To ensure complete control over data relationships and API logic, the core backend was migrated to a custom RESTful API using Node.js and Express. This is backed by MongoDB (Atlas), which provides a permanent, scalable database solution for handling complex financial transactions and loan records without the risk of data loss or service expiration.
- Firebase: To leverage robust security without reinventing the wheel, Firebase Authentication and Firestore were retained to h[4]andle user identity and profile management, working in sync with the Node.js backend.
- Cloudinary: To store files, Cloudinary was chosen due to its large free option and efficient media APIs, eliminatin[1][2][5]g the necessity of a custom backend file system or paid cloud storage.
This transformation is a typical example of a practical attitude to software development; it recognizes the constraints of the original design but transitions to a long-term viable MERN-Hybrid design that ensures stability and a professional user experience.
Experience the live demo of the Fiambond application:
https://fiambond.web.app/welcome
Disclaimer: This is a demo application. It does not involve actual money transactions. All information is for demonstration purposes only.
🔑 User Authentication & Account Management
Figure 1. The Fiambond Opening demonstrates the introductory interface of the app, with the most prominent action control being login and register.
Figure 2. FiamBond V2 will have the option of manual authentication and Sign In With Google, thus allowing an immediate registration and a login with Firebase.
Figure 3. Once registered, one must verify their e-mail address.
Figure 4. When the verification link is being clicked, the Firebase provides this screen which guarantees the user that he is now authorized to sign in.
Figure 5. The Forgot Password option sends a secure connection through Firebase, which allows the user to modify their password.
Figure 6. The Account Settings page enables the user to change their profile information and change the password.
👤 Personal Dashboard & Core Features
Figure 7. The User dashboard is the overall financial management center that has summary cards, a set of action buttons, and a financial status representation graph.
Figure 8. The Personal Transaction modal shows a complete analysis of the user income and expenses, with the ability of printed receipts.
Figure 9. The Financial Goals modal shows active goals, allows one to mark a goal complete (possibly with an achievement photo), and also keeps a goal history.
Figure 10. The modal titled Add New Transaction enables one to record personal income or expenses.
Figure 11. The modal of adding a goal allows one to add a new personal financial goal.
💸 Lending and Borrowing Activity
Figure 12. The first option to be entered when recording a new loan is either to a Family Member or to an individual (Personal).
Figure 13. The application to be filled in recording a personal loan to a person who is not part of the Fiambond family system is shown.
Figure 14. The loan form that is used to register a new loan to a particular family member is provided in the application.
Figure 15. The Lending Activity section is divided into collapsible groups, including: Action required, Money you have lent and Money you have borrowed.
Figure 16. The section of Action required shows the unfinished confirmations of loans and repayments among users.
Figure 17. Debtor recognizes the money received by a creditor.
Figure 18. A creditor ascertains that a debtor repays his or her debt.
Figure 19. The Money you have lent section displays the information regarding the loan directions that the user has.
Figure 20. The creditor enters the payment made by a debtor, and he or she can append evidence.
Figure 21. The Money You have Borrowed page displays the information about loans the user is owing.
Figure 22. The debtor repays and this is registered in the creditor Action required section.
Figure 23. The loan history shows the list of the loan history between the debtor and the creditor.
👨👩👧👦 Family Realm & Collaborative Finance
Figure 24. One condition that is prerequisite to the users is the formation or choice of a family cohort before indulging oneself in a family-related financial activity.
Figure 25. The Manage Families modal, where the users have the ability to create their family groups, rename them, or delete them.
Figure 26. The Family Dashboard provides a summary of the family financial health.
Figure 27. Family Transaction modal shows an extensive information on family income and spending shared.
Figure 28. The Family Goals modal allows the members to see goal objectives that were currently undertaken, indicate that they are finished and the history of goals.
Figure 29. The Family Lending Activity is effectively identical to personal lending except in that it is limited to selected family members.
Figure 30. There is the addition of a family transaction, which is the deduction of an income entry to the personal funds, and addition of an expense to the family pot.
Figure 31. The form to include the new financial goal of the family.
Figure 32. The form that enables a creditor to document a loan to another family member, with specification of interest, and the reason why it is so.
Figure 33. The interface application, Manage Members which allows users to invite others to join to their family realm through email.