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.
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.
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.
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 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.