Inspiration
The inspiration for GradFinance was derived from my extended family. My cousin, a recent graduate from medical school, always had issues with money due to the sheer cost of his education. While my cousin may know how to spend money wisely, he and many others like him often lack personalized financial tools to systematically build and track wealth. Existing financial management apps are usually tailored towards generic users with little personalization, and they have much less features compared to GradFinance. GradFinance builds upon this issue, enabling users to budget, invest, set goals, and track their money with an easy to use UI and comprehensive calculations to best alleviate their financial burdens and issues.
What it does
GradFinance is a comprehensive and personalized financial management web application, specifically tailored towards recent graduates. It features many useful tools such as goal-based financial planning with visual progress tracking, easy to use UI for personalized budgeting and investing, investing guidance, real-time updates, and complex calculations to meet the user’s financial needs. The app also provides personalized financial tips and emergency fund tracking, helping users manage their money in a more efficient and effective manner.
How it was built
GradFinance is built entirely through CSS, CSS3,JavaScript, and HTML. It works entirely in a web browser, easing the process for users. I also integrated a local browser storage so that a backend server is not required. The app utilizes modular JavaScript functions for all of the displayed features (budget management, goal tracking, financial calculations). The frontend consists of custom CSS, SVG-based progress indicators, visualizations, and it is paired with the integration of TailWind CSS for further styling. I used JavaScript DOM for making sure that the web app content displayed properly and timely.
Challenges I ran into
Other than finding a catchy name for the project, time was a major constraint. The logic aspect, specifically the financial calculations took a long time to code in. The sliders and SVG-based progress indicators took forever to learn and implement as well, given the short nature of this hackathon. It was difficult to come up with a functionable web application without having a backend, but now GradFinance functions fully offline through local storage, making it even more convenient for users! It was also difficult finding a balance between adding new features while also maintaining simplicity for users. As any programmer, I spent a majority of my time reviewing my code because of the countless errors that were present, specifically with making the UI and text/number inputs functionable.
Accomplishments
I am very proud of the fact that I created a fully functionable web application from scratch. I had to do extensive research when learning more about how to incorporate UI and the necessary calculations to give users correct numbers in their financial endeavors, and it brought me great joy to experience how this knowledge resulted in GradFinance.
What was learned
I learned a lot about the vast realm of computer science. I learned about full-stack web development and how to formulate and implement solutions for real-world problems through my participation in this hackathon. I learned more about important CS concepts like beta testing and kept on creating and deleting pieces of code that add or subtract from the final product, taking feedback from my family. I discovered how to integrate CSS3 animations, JavaScript DOM Manipulation (which changes web content in real time), and essentially code a big project from a vague idea in my head. I learned more about HTML, TailWind CSS, and JavaScript which I only knew at a basic, beginner level. Through this hackathon, I learned so much more about the power of these languages and how they can be employed to create amazing web applications!
What's next for GradFinance
The primary objectives for GradFinance is to implement new features, and branch out/advertise to a greater demographic, not restricted to new graduates, thus requiring a name change….The web application is truly a helpful money management application, according to some of my beta testers, AKA my family, and they plan on incorporating GradFinance in their daily lives. Through extensive marketing initially from my family, I believe with some adjustments, this web application can reach many new users. Regarding some new features, I plan to implement a way to sync through the cloud, so users can access their financial data from any device. I also want to use secure APIs to connect to user’s real-time bank accounts. I could also incorporate AI to generate personalized financial recommendations to shift this application to a more “financial coachy” vibe, making the app more than a tracking tool. Lastly, I would like to research how to mold the app’s content to make it an IOS or Android app which users can access on their phone, like any other application. This will definitely boost the popularity, efficiency, and scalability of the product.
Built With
- css3
- dom
- eventlistners
- htlm5
- html
- javascript
- json
- localstorage
- pwa
- svg
Log in or sign up for Devpost to join the conversation.