Split

• 

  Landing page

• 

  Dashboard Page

Inspiration

I was tried of using the popular app for splitting bills with its very restrictive free tier and wanted to build something simpler and better

What it does

Very simple yet powerful app for splitting bills or expenses, I wanted to focus on some core features:

• Splitting the way the user wants
• Focus on transparency (by implementing a audit trail on each expense).
• Ease of onboard/invite. Can invite a user and start splitting bills with them right away.

How we built it

Started of with a simple template project using vite + react:

• Tailwind for styling
• Zustand for state management
• Lucide for icons
• Framer for animations

Later additions:

• Tanstack router
• Supabase with edgefunctions

Challenges we ran into

Since we focused first on getting all the user, group, expenses working from the beginning we missed a couple of key things to include in our application. The two things were Database (we were using mockdata) and Routing (using zustand to switch what is displayed). Now having these two in our focus was a huge mistake as migrating the json structured mockdata to tables was a challenge but the bigger challenge was fitting the routing. As we started working on routing there were a whole new set of possibilities we can could do and it honestly felt like we were rewriting the application from scratch.

Accomplishments that we're proud of

We are very happy with our v0 of the application using Zustand, all the features work as intended across the application with adding users to net settlements (individual + group for a user). The audit trail is awesome and we wish more applications starts showing the users that kind of information (maybe we ask bolt to creating a diff algo similar to github).

What we learned

Learned a lot about how powerful Zustand could be and how much it could do just on its own. We learned a lot during our migrations, converting json like data into a form that could be put in databases and the many junction tables and inner joins that were needed, also tanstack router with its powerful capabilities of datafetching and routing.

What's next for Split

Finish up the migrations properly, mockdata -> Supabase and Tanstack router. Then built up the tech by adding some sort of query library (tanstack I am looking at you again), and using more of Framer for some fun animations

Built With

• bun
• deno
• framer
• supabase
• tailwindcss
• tanstack-router
• typescript