Firstly thanks to Appwrite and Hashnode for providing this opportunity.
Team
Description
Expense Care is a web application to take care of one’s expenses by keeping an eye on them in a simple way. The app solves a very real problem of keeping an account of your everyday expenses and making it available to view visually so that one can easily be aware of their expenses.
The application has been built by keeping in mind, that accounting our everyday expenses will only be possible for most people if adding an expense is a very quick and easy process. Hence the application requires minimum details when one adds any expense although an optional description is always possible if required.
The application majorly requires the user to create categories and add expenses to them. Rest all will be taken care of. The application allows user to view the data in a table with various filters so that user can look at the expenses of any period whenever he/she wants. The applications provide bar graphs and pie chart visualisation to allow users to view the data in a more visual format, so one can quickly see and get an idea of their expenses at any point in time.
Lastly, every aspect of the application has been consciously kept simple and intuitive whether it is signing up, logging in, adding data, editing data, visualising data etc. so, that it can be used regularly by anyone in general.
Why did I choose to build this?
This application is more than a hackathon project for me. Till now, I am using other applications like Notion which offers various other features to perform various other actions. But to keep an account of expenses, I had always wished to have an application where adding and analysing would be simpler and quicker. That is what exactly this application offers. I will continue to extend the functionality of this application making it more useful and efficient.
Tech Stack
Appwrite
Integration of the application with the appwrite made many major things simpler like authentification and management of data.
React
Javascript library for the front end along with other libraries of the react eco-system including react-router for routing, redux for state management and react hook form for form validations and form state management.
Chakra UI
For the UI Design, it has been used. It has made sure that the UI looks elegant, simple and intuitive.
Recharts
A library for data visualisation has been used to show data in the form of graphs and charts.
Features
Authentification
Major Aspects of Authentification :
Signup using Email and Password (Verification included)
Sign in using Google Sign in
Password Recovery
When signing up using email, the email will be verified, so that unverified users cannot get access, that has been done to make sure the application is secure. Verification will only happen on signup. The application provides users with the option to reset the password in case they have forgotten, by receiving a reset password link to their registered email. All the authentication process has been done using Appwrite.
Dashboard
The application provides users with their dashboard page, where a user will be able to view the “current year expense” and “current month expense”. And in addition to that the total expense data per category is also visible on the dashboard page on each category’s card.
The user can select whether to view the data yearly or monthly on categories’ cards. The data on the dashboard gets updated as the month or year changes. A user can delete or edit a category and all the related data will get updated whether it is charts or the total expense values in the whole application.
Expense Table
The user can filter and sort all expenses added in various ways. The user can also reach this page after directly clicking on the category card, that way the data in the table will be filtered by default according to that category clicked and the current year and month. Pagination and filtering of the data have been done on this page using Appwrite. Expenses can be edited or removed whenever a user wants and if some data needs to be updated on charts or the dashboard page, it will get updated in real-time.
Chart and Graph
The data visualisation page consists of a bar graph and a pie chart which have been developed using the Recharts library. By default, this page will provide the current month’s data. And here also the user can select the month for which he wants to view the data. Here also Appwrite has played a significant role as by using indexing in the database, the application is possible to display the graph and chart according to the user selection quickly. Any changes in the expenses or categories will be displayed in real-time on this charts page.
Challenges Faced
Relationships among collections
The application consists majorly three kinds of data to be stored i.e. users, categories and expenses in that categories. I wanted the data to be related so that all the related procedures can be done efficiently and simply. Although I was aware that Relationships in Appwrite database was in beta version and relationship queries are yet not possible but will be in future. Still, I chose to go with the relationship between the collections which worked quite well. And as this is not just a project hackathon for me, I want to develop this project further also, so as the relationship queries will get introduced, I’ll integrate that also.
Filtering of Data
I had to make sure to store the data in such a way that when the user requires filtering or viewing it on the graph, the data can get filtered quickly but at the same time relationships between the collections were also required. In this aspect also, the application was made more efficient by using Appwrite as by usage of indexes in the collection, I was able to provide the filtered data as per user requirement on one click. Whether it is the data getting rendered in the table of expenses or data required for the bar graph and pie chart.
Deployment
This is the challenge that I faced and have still not overcome. I would have been able to deploy the application if I had used Appwrite Cloud instead of Appwrite locally using docker but that was due to my requirement of the relationships feature which is currently not available on the cloud. For the last few days, I have been trying to deploy the application but haven't been able to. So, as soon as I'll do that I'll update the link here also.
Future Scope
Various useful features can still be added to the application:
Currently, the bar graph and pie chart can show data for a particular month only but if one needs to view visualised data of a year, that can be made possible.
Similarly, data of a certain category over various years can also be a useful feature to add on. Like if one wants to view how much they have been spending on “travel” for certain years.
Currently, an expense once added can only be edited or deleted but cannot be moved to another category, which can be made possible.
Lastly, the application can be developed as a mobile application to work in sync with the web application, so that it can be used on various devices.