Who Owes Whom

Intro

If you’ve ever found yourself in a situation where you’re regularly sharing expenses with someone - perhaps a roommate, family member, or friend - you know how quickly things can get complicated. Keeping track of who paid for what, when, how much, and who owes whom can quickly become overwhelming and lead to unnecessary tension in your relationships. Fortunately, there’s a progressive web application called Wow (Who Owes Whom) that was specifically designed to help solve this problem.

Wow is a simple yet powerful tool that allows you to easily manage your group finances. With Wow, you can create a group and invite your roommates, friends, or family members to join. Once everyone is onboard, you can start adding expenses, such as rent, groceries, utilities, and other shared costs.

Features

I will focus on highlighting the core features implemented in the project.

Feature - Authentication

In order to establish a secure authentication system, I opted to use BaaS, specifically Firebase. Users can register via Google account or email address.

Once an account is created, the user can navigate to the profile menu and select the edit profile option in order to modify their profile image, name, and email address.

Feature - Creating dedicated ‘rooms’ for users

Once a user creates an account on our platform, a unique room ID is automatically generated for their designated ‘space’. This room ID is essential for inviting other participants to the user’s designated space. In order to obtain an invite link for this specific room, the user can navigate to the home screen or the menu. From there, the user can copy the link and share it via any preferred method or send it directly to other participants’ email addresses through the app. This streamlined process allows for easy communication and invitation of other users within the designated space.

After the registration user will then be added to the same “room” from which the invite link was sent. In this “room,” every user has the ability to send links and invite other users to join.

Feature - Transactions

All the updates made by all participants in a single room are visible simultaneously in the app at the exact moment they are made.

On the home scree of the app statiscitcs are shown for every participant in the room as well as for all room in genereal. Statistics are dynamic and display information in comaprison to selected previuos time period.

For mobile devices, the statistics bar for each user is designed to be individually horizontally scrollable, providing a more user-friendly experience.

Feature - Transaction history

The app’s home screen displays a table populated with all the transactions made for the room. These transactions are fetched from Firestore database and listed in the table with various details such as transaction type, author, and other relevant information. The table is designed to be scrollable on smaller screens for ease of use.

Furthermore, the table provides a filtering option that allows users to filter transactions based on their type or author. This feature makes it easier for users to find specific transactions they are looking for.

By clicking on the ‘Details’ button next to a particular transaction, the user is directed to a dedicated details page for that transaction. Here, the user can access even more information about the transaction and make edits or delete the transaction if they are the author of the transaction.

Design

In order to achieve the best possible user experience, ease of use, and responsiveness, I utilized the DaisyUi library of components, which were created with TailwindCSS. The design of this project was focused on utilizing mobile native interactions for navigating the app and accessing the data, as well as incorporating colors to help translate the meaning of numbers, avatars, and different font weights to highlight important details.

Additionally, this web application can be installed on both mobile and desktop devices, and can function as a native application. It is fully responsive and has been designed to function seamlessly on any device, providing a consistent and enjoyable user experience.

Optimizations

Accessibility

It is important to recognize that certain clients may not give priority to accessibility when developing their websites. However, it is imperative to keep in mind that the internet is a space that should be accessible to all. As a web developer, I make certain to prioritize accessibility in all my projects. This involves incorporating basic but vital approaches to make your project accessible for everyone on the web!

Performance

In the realm of web development, the loading speed of a website is a pivotal factor that determines the quality of user experience. While it may not always be the topmost priority, it is a best practice to optimize the website's speed during the development process. As a developer, I adhere to a set of guidelines that aid in achieving rapid loading speeds for every project undertaken.

SEO

Search engine optimization (SEO) is a critical aspect of web development that can significantly impact a website's success. As a developer, I take responsibility for the initial setup of SEO and making sure the website is ready for further ongoing SEO. While the process of achieving good SEO results, such as indexing on the top of search results, can take time, my expertise enables me to establish a solid foundation for the website's future success.

Responsiveness

In the today's world, more than 53%(and growing) of web users worldwide access the web through mobile devices. In light of this, it is important for every website to be mobile-friendly and responsive. To this end, I adhere to the mobile-first approach in the development process, ensuring that websites are designed and developed to perform smoothly on all devices and screen sizes.

Long story short - my goal is to deliver you a website which has this performance scores on Google Lighthouse: