Split the Bill

Project Overview

This project is my practice with NextJS. I wanted to really get the hang of using NextJS, jest Testing and use all of what Next JS has to offer for API testing. This project is something I would like CI/CD as well as try new things.

view site view github

Technology Used:

ReactJS
Redux & Redux Toolkit (RTK)
SASS
SCSS Modules
React Hook Forms

Ideation

Background

For this project I wanted to use tech stack I have not used often. For this project I wanted to make use of Redux. I know I could have passed state down with context API or prop drilling 2 - 3 layers deep. But I wanted to try soemthing new. Mostly because I haven't been developing much of the year due to my time in Formation of data structures & algos and I needed project to reflect growth and my current skills at this point in time. For this app, I wanted users to be able to create their party, and then assign who participated, along with the cost and it will spit out what each person will owe. I'm sure there are apps for this but I wanted the scope to be small as I work on more advance techniques and add unit testing and more features in the future. Initially this app was going to feature drag-n-drop but the idea was scoped for reasons in the phase 2.

Objective 1: Users should be able to create the people involved in their party

Objective 2: Users should be able to create expenses, add who was involved and delete expenses as it accumulates

Research

There was much to consider since from the ground up I wanted to add Drag-n-Drop functionality. In early mock ups it was designed this way. However, upon building it and the form I noticed a few problems. One, users would need to drag and drop each name of their party to the event. A way to circumvent this was to add a call-to-action button that will add everybody in the current party. But this would only work if everyone is expected to chip in. Another issue is the amount of expenses. Even for a short trip, a lot of expenses can add up. So, users dragging names from the homepage to each expense bucket as the expense grows would not be good user experience and that idea was scrapped. Additionally, although this was intended to be used more on a web application, it would be nightmare for mobile users.

Iteration

For the first iteration, most of the core features is complete. Users can create a party, which I expect to be between 12 - 20 people. But there is no minimum or limits to what a user can create. Equally important, after creating at least two people in the party, users can now create expenses that will populate the grid. Both are guided by directions of modals powered by React Hook Form and using the redux state via dispatches by the Redux Toolkit (RTK).

This is the modal of adding an expense. At first, I wanted to add a text field that would auto complete and filter from the list users in the party. This was the intended replacement of drag-n-drop. However, there is a limitation to how React Hook Form registers user data that will go to the form. Which is why I needed to use either an input or select form. This part was the trickiest as the data needed to be an array. In the end this idea was scrapped due to this limitation and I opt'd in for just a repeat of party members in which users have to still check mark them on the box below as a final confirmation. If I followed through the original plans, users would just have to type in the same data and that would be bad user experience, so I opt'd in for displaying the full party and just checking who will be paying.

This is the current iteration of the app as launched on the MVP and that can be viewed by clicking the view site CTA. The form has been simplified as noted above, but the app is at a functional state and core features implemented.

Summary

This was a great project and I was able to apply what I learned recently and use the Redux ToolKit (RTK). I have used old school redux in the past, so it functioned the same way but a little more streamlined with the helper hooks. I do want to give user the users the ability to edit an entry but I would to dig more into how React Hook Form deals with data, combined with editing the redux state slice. I do have an idea but I cannot devote time to it at the moment as I am in a few interview loops. Likewise, I would love to add unit testing to the app for practice and learning. This will surely be a product I come back to and add more features as well as experiment. I released version 1.0.0 and I'm awaiting collecting data before the next major iteration.

view site view github Return to Top