Finhelper

• 

Inspiration

I got my inspiration for this project when I was watching YouTube. I thought ' I wonder what it was like to learn new things before YT.' I also realized that there weren't many resources to understand finance and economics, So I set out to create an website that would make learning about finance a lot easier. I had also observed that many young individuals struggle to understand financial concepts, Hence, I decided to make a website that gives info about finance through various interactive lessons. The Hackonomics 2025 theme provided the perfect platform to combine my passion for using technology for social good with my growing interest in computer science and web development.

What it does

FinHelper serves as a Important learning resource:

1) Interactive Lessons: It has many different pages. In the learn the basics page it has information about various financial topics like budgeting, Savings, Types of debt, Investing, etc. This is useful Information for anyone who might want to learn about finance.

2) Interactive Savings Calculator: The website also features a savings calculator that was made with the help of Html, JavaScript and CSS. This is a useful feature for anyone who wants to see their future savings and plan accordingly.

3) Stock comparison tool: The website also has a stock comparison tool built from scratch. It can be used to compare various aspects of a stock like value, percentage gain dividend, etc. with each other.

4) Quizzes - The website has various quizzes about the topics covered in the website about finance. These Quizzes Help users to deeply understand the topics about finance.

5) AI Assistant - The website also features an AI assistant that can help the users understand the topic that they had difficulty understanding before. Users can ask it various questions about the topics covered in the website.

6) Dashboard - It helps keep track of the users achievements and completed lessons and Quizzes.

7) Community Forum - This was absolutely the most demanding task of this entire project , but I am glad it works !

How we built it

FinHelper was made by using various different platforms -

Google Sites: The primary informational pages (Home, Learn the Basics, About Us) were made using Google Sites. This no-code platform allowed me to focus on content creation, user experience, and overall site aesthetics, making a clean looking interface.

Google Forms: I used google forms to make the quizzes in the website. The were embedded using the forms feature in google sites.

Programming : The heart of the website, the Savings Calculator, was made from the ground up using HTML, CSS, and JavaScript.

Dialogflow: I used Dialogflow by google to make a custom chatbot for my website.

FireBase : Firebase was used for the server side hosting of the Community forum and the dashboard.

AI-Assisted Development: As a beginner, I utilized AI tools (specifically Gemini) to assist in generating foundational code snippets for the calculator's structure and core calculation logic. My prompt engineering skills were critical in making the AI understand my need. Use of AI also allowed me to accelerate development and gain immediate hands-on experience with functional code.

Integration: The calculator was hosted independently on GitHub Pages. I then used its public URL to embed it into the dedicated "Savings Calculator" page within the website, creating a fully complete and integrated user interface. Also the other integrated calculators were integrated directly into the website with the help of google site's embedder tool.

Challenges we ran into

Despite using a clear and streamlined methods, there were several challenges:

Translating Theory to Code: Even if the idea was clear in my mind, the actual implementation took longer that I had initially thought. I learnt that AIs have a habit of not giving proper code on the first try. I had to spent hours trying to tell it what I really wanted, and then understanding the code and looking through it to see if there were any bugs.

Harmonizing Across Platforms: Using a hybrid approach was a tough job, as I had to essentially merge two websites into one, The one with info and the one with the calculator. This was a tough one, especially since I knew nothing about GitHub, But integrating the chatbot was also exceptionally difficult and challenging.

Learning on the Fly: As a beginner, setting up GitHub Pages for embedding was a new concept, demanding quick learning and persistent problem-solving

Making stock comparison tool: Making a working stock comparison tool was a serious challenge as we would have needed an API to make it, which is mostly paid, but since I was determined to keep the budget of the project zero, we had to come up with a different solution.

Making a community forum: This was by far the most demanding task. I had to use Firebase to make it work, but I am glad it does as it is like a boon for learners, as they can get their doubts cleared by posting them in the forum anonymously!

Accomplishments that we're proud of

I am particularly proud of:

Creating a Functional Tool: I had never made a online tool like this which could be actually useful to someone, even though I have made many projects this was by far the most exiting to make.

Building a Hybrid Solution: I loved this approach to making a 'financial literacy project combining code', as it combines the aesthetics of no-code google sites with my coded calculators.

Leveraging AI Effectively: I am especially proud of this as without my prompt engineering skills and the use of AI, This project would have taken me much more time to make and with lesser results.

Making a customized chatbot to make learning easier for the users.

What I learned

This Hackonomics experience with FinHelper has been incredibly insightful:

Programming: We learnt about the fundamentals of what makes a website work also had a hands on experience of coding. I also realized the potential of no-code platforms.

Problem-Solving: Learned to break down large problems (like building a website) into smaller, manageable tasks and to systematically debug code.

Resourcefulness: Discovered how to effectively use online resources, documentation, and AI tools to overcome technical hurdles and accelerate learning.

Impact of Tech: Reinforced my belief that technology can be a powerful tool for education and positive change in society, especially in areas like financial literacy.

What's next for Finhelper

Looking ahead, We see several exciting enhancements for FinHelper:

Deeper Content: Developing more in-depth modules on specific investment types, taxes, or advanced budgeting strategies.

Achievement Badges: Award badges for completing specific lessons, achieving high quiz scores, or contributing actively to the community.

Leaderboards: Introduce friendly competition with leaderboards for quiz scores or lesson completion.

Accessibility Features: Ensure the platform is accessible to users with disabilities.

Built With

• dialogflow
• github
• google-form
• google-sites