Studibucket Project
Blogpost Web Development Group 1 — Studibucket Project
Introduction
Our project is a mobile budgeting app designed to help students manage their finances and plan for the future economically. In today’s fast-paced world, it can be challenging for students to keep track of their daily expenses and create savings plans. Our mobile app tackles this issue by allowing users to organize and monitor their income, expenses, and savings using “buckets,” which is why we named it Studibucket. These buckets are analogous to piggy banks and can be dynamically allocated to different proportions of income and expenditures, aiding users in making financial decisions such as vacations and laptop purchases.
Method
We initially opted for the React Native framework to build our mobile app because we had gained expertise in the popular React.js framework during the TechLabs bootcamp’s learning phase. React Native allowed us to leverage our knowledge in frontend web development, as it shares many concepts with React.js. We selected TypeScript for its type safety and debugging capabilities.
To streamline our development process, we used the Expo SDK, which enabled real-time emulation and browser-based debugging. For the backend, we chose Firebase Firestore for our database and Firebase Auth for user authentication due to their user-friendly interfaces and well-documented features.
We adopted Zustand for state management, appreciating its ability to reduce boilerplate code and its ease of learning.
- Step 0: React and TypeScript workshops with mentors
- Step 1: Setting up the development environment (framework and library installations, VS Code configurations, emulator setup, Firebase account)
- Step 2: Concept and workflow design using Excalidraw
- Step 3: Frontend design and theming in Figma
- Step 4: Initiation of basic coding for app pages
- Step 5: Testing the connection to Firebase Firestore and Auth
- Step 6: Implementation of frontend with theming
- Step 7: Integration of Firestore and Auth with the frontend code
- Step 8: Final touches and testing
Review of the tools and frameworks in detail
TypeScript, chosen for Studibucket, enhances code quality by adding static typing to JavaScript. This ensures early error detection, reducing runtime bugs and improving maintainability. However, TypeScript may have a slight learning curve, especially for developers new to static typing. Overall, it is a valuable tool for robust and scalable app development.
React Native provided several advantages for our project. It promoted code reusability between the web and mobile app, reducing development time and effort. The framework benefited from a large and active community, offering access to a wealth of libraries, tools, and resources. Additionally, React Native allowed us to target both iOS and Android platforms simultaneously.
However, React Native had some limitations, particularly in handling complex native features. While it supported native module integration, intricate native functionalities might require custom native code. Additionally, performance could be a concern for graphics-intensive applications.
To simplify development and testing, we relied on the Expo SDK, which provided real-time emulation and browser-based debugging. Expo streamlined the development process, allowing us to concentrate on building features rather than complex configurations. This approach expedited our development process and delivered a robust app.
Expo had its limitations, though, as it offered limited customization options, which could be restricting for projects requiring extensive custom native module integration and low-level configurations.
For the backend, Firebase Firestore served as our database, offering straightforward usage, robust security handling, and well-documented features. Firebase Auth was chosen for user authentication, ensuring a secure and user-friendly experience. Firebase provided real-time database synchronization, scalability, and versatile authentication methods. Nevertheless, it had vendor lock-in concerns due to its association with Google and some limitations in handling complex queries.
In terms of state management, we opted for Zustand due to its efficiency in reducing boilerplate code and its gentle learning curve, making it a suitable choice for our student project. Zustand’s minimal boilerplate code and simplicity made it an ideal fit for our application, despite having a smaller community compared to larger state management solutions like Redux.
Project Result
The Studibucket app has emerged as a powerful tool for students seeking to manage their finances effectively. With a user-friendly interface, the app allows users to create and allocate “buckets” for various expenses and savings goals, resembling traditional piggy banks. The project resulted in a robust mobile app that simplifies financial decision-making for students.
Upon logging in, users are greeted by a warm login screen that then redirects them to the homepage. The homepage features a doughnut chart displaying the total income and expenses. Users have access to several pages, including the Cashflow page for monitoring past cashflow and the Buckets page for managing their savings goals. Each bucket displays its current savings and maturity date. Users can create new buckets and allocate income and expenses to them using the add button.
Conclusion
In conclusion, our journey with the Studibucket project has been both educational and rewarding. We have successfully developed a budgeting mobile app that addresses the financial challenges faced by students today. Our choice of technologies, including React Native, TypeScript, Expo SDK, Firebase Firestore, and Zustand, has proven to be effective in achieving our project goals.
Future Work/Outlook
Looking ahead, there are several exciting avenues for further improvement and expansion of the Studibucket app. Our primary future goal is to make the app more community-oriented, fostering collaboration among users. We envision an option that allows flatmates to connect and create collaborative buckets for tracking shared expenses, such as groceries and bills. Additionally, we plan to introduce a forum page where users can share information about local sales and discounts, further enhancing their ability to save money.
In addition to these community-focused enhancements, we have other key future plans:
Expense Tracking Graphs: We aim to provide users with detailed expense tracking graphs, enabling them to visualize their spending habits over time and make informed financial decisions.
Personalized Financial Tips: Incorporating machine learning algorithms will allow us to offer personalized financial recommendations to users, helping them make smarter financial choices.
Cross-Platform Compatibility: We intend to expand the app’s compatibility to reach a broader audience, ensuring that both iOS and Android users can benefit from Studibucket.
Enhanced Security: Strengthening security measures and user data protection will remain a top priority to ensure a safe and secure user experience.
Financial Literacy Promotion: Collaborating with educational institutions to promote financial literacy among students is a crucial part of our long-term vision. We aim to empower students with the knowledge and tools they need to make informed financial decisions.
The Studibucket project has the potential to revolutionize how students manage their finances, and we are excited to continue its development journey. Thank you for joining us on this adventure, and we look forward to the future of Studibucket.
