Inspiration
I love my coin jar. I've spent years putting all my spare change or any coins I find on the ground into my savings jar. The best part? It has one of those cool slots that counts the coins for me! Over the past year, I've been able to save over $50 in just change. So it got me thinking about how much more I would've saved if I had been able to put my debit/credit card change into my coin jar, too. So from, there, Make it Make Cents was born.
What it does
Financial education is extremely important, but unfortunately, it's not prioritized in public school teachings. My web application is designed to not only each kids and teens about finances, but to empower them to make small savings now, so that they can work on their saving skills in the future. Features of the web app include a show of recent purchases whose change can be sent to savings, goals to complete for stars which can be redeemed for real-life rewards the child sets with their parent, and games about financial terms that can be played to earn more stars.
How we built it
I first set the design up in Figma, then utilized SvelteKit, JavaScript, HTML, and Sass to build a responsive, fast, and scalable front-end solution. The project aimed to provide an interactive user interface with dynamic features and smooth styling. This framework would allow for easy integration of real-time financial data to fill in the recent transaction history. The games are both built into the application using a combination of JavaScript and styling for a more cohesive feel. The logo used throughout was a quick Adobe Illustrator drawing.
Challenges we ran into
Honestly, this wasn't the first challenge I attempted for Datathon this year. I started off working on the Connections AI, but around 8 hours into the competition my solution felt like it was at a standstill, so I pivoted to designing for the Capital One challenge and worked on it through the night. Therefore, I didn't have enough time to implement the full scale (pop-ups for user settings and adding rewards/goals) I had wanted to.
Accomplishments that we're proud of
I'm really proud of the layout and design! I think it really suits the preteen audience, and building it in a dashboard-like manner rather than having multiple navigations lets the users see all their information at once, helping with financial transparency.
What we learned
Prior to this project, I hadn't really worked much with app integration into Sveltekit pages, so I was excited to get to learn more about that process in my game integrations.
What's next for Make It Make Cents
I would love to continue working on the functionality for adding new goals and rewards. The goal for this project was to eventually connect it to real-time financial data, and that's something I see myself working on in the future.
Built With
- css
- html
- javascript
- node.js
- scss
- sveltekit
Log in or sign up for Devpost to join the conversation.