Inspiration
My son uses a piggy bank made out of clay. He is always curious about how much money he has accumulated in his little piggy. So I thought why not create a digital version of his piggy bank.
What it does
Using the app one can create multiple money jars / pots for different purposes. They can add their family members, define roles for them (including child members) and manage their jars also. The "Child" role has limited permissions. They can add / deduct money to / from pre-created jars but those transactions remain pending unless and until approved by Admin / Member roles.
For every jar, you can also configure an auto credit amount with the desired frequency (Daily, Weekly and so on..). This makes it a handy tool for managing pocket money for kids, or for scenarios which occur at a fix schedule, say daily Milk purchase, weekly wages etc.
The app has a super admin dashboard also, which uses the TiDB's Data APIs backed by its Chat2Query AI features. Chat2Query Data APIs provide a fast and limitless possibility of querying the database without a predefined SQL query.
How we built it
This app is a Vue3 application built using the Nuxt3 framework. It utilizes Nuxt components from the simple yet powerful Nuxt Labs UI module. Backend processing is managed by Nuxt serverless functions. The database is MySQL based TiDB serverless instance. Prisma is used as an ORM for managing and talking to the TiDB cluster.
For authentication i'm using the Supabase Auth. For creating family members' accounts, serverless functions are used to talk to Supabase from a secure context.
The app is deployed on Vercel. As a result, the Nuxt serverless functions automatically get compiled and converted to Vercel Serverless functions. The app also utilizes a Vercel CRON function to manage the auto money credit feature.
Challenges we ran into
The main challenge I faced while building the app was learning how to use Prisma as I haven't used it before. The other challenge was to define the database schema properly keeping in mind the different roles and associated privileges. Having used Nuxt 2 in the past, one other good challenge was to learn to use Nuxt3 to create a full fledged app.
While using the Chat2Query Data API from the client I needed to add Digest Auth for making the request. TiDB's documents has examples for making a cURL request to the endpoint. Needed to figure out how to do this from a node application.
While deploying on Vercel, Prisma threw an error related to build caching because of which Prisma client is not generated properly. This was easy to solve with a quick Google Search,
Accomplishments that we're proud of
Getting good enough understanding of Prisma and combining it with TiDB was the highlight for me. I haven't used MySQL in quite a while, so using TiDB's AI powered SQL Query writer was great fun. Overall I'm very proud of the fact that I used all these new/unfamiliar technologies and created an almost finished app in such a short duration.
What we learned
Learnt to use Prisma. How to combine Prisma with a MYSQL based database like TiDB.
What's next for FamJars
FamJars has a long way to go. Right now it only tracks and manages the piggy banks and pocket money. I'm planning to add features that aids in kids' financial education. Ability to earn interest on the money jars is one such feature. THe pocket money can be linked to daily chores. I also plan to add tasks based rewards in the app.
Built With
- nuxt3
- prisma
- supabase
- tidb
- typescript
- vercel
- vue3
Log in or sign up for Devpost to join the conversation.