Financial Education is an interactive web-based app built with p5.js that aims to make financial literacy fun, engaging, and accessible—especially for teens and beginners. In an age where financial knowledge is essential but often overlooked in formal education, this app fills the gap by teaching users how to budget, save, and spend wisely through hands-on learning and gamified features.

Users begin at a vibrant main menu where they can choose from three core features: Manage Expenses, Take a Quiz, or View Summary. The Manage Expenses section allows users to add categorized expenses using dropdown menus and pre-set amounts, helping them visualize where their money is going. The Summary screen turns this data into a colorful pie chart and shows real-time savings based on a fixed income, offering a clear and digestible financial snapshot.

The app also includes a rotating list of financial tips, promoting healthy money habits in small, memorable ways. In the Quiz section, users test their knowledge through randomized, multiple-choice questions that cover essential topics like saving strategies, budgeting, credit, and the Sustainable Development Goals (SDGs)—particularly SDG 4: Quality Education.

What sets this project apart is its commitment to accessibility and clarity. With a clean design, animated transitions, helpful tooltips, and a built-in instructions tab, Financial Education lowers the barrier to entry for users who may find personal finance intimidating or confusing.

Ultimately, this project doesn't just teach financial concepts—it empowers users to apply them in their daily lives, reinforcing the idea that smart money management is a skill anyone can build with the right tools and guidance.

Built With

  • p5js
Share this project:

Updates