Expenso

Inspiration

As university students, we realise the importance of budgeting in our daily lives. We wanted to create an application that would make budgeting easier for students by replacing manual budgeting with a user friendly application. Now that users can not only calculate their net expenses but also view a history of their transactions, they'll be even more motivated to begin budgeting!

What it does

The website has an expense tracker which lets users do a variety of actions related to budgeting. They can add in any deposit or expense, and view the net amount remaining. They are also able to view any previous transactions that they made and posted on it. It also contains an advice page for students on budgeting. While these advices are really useful for school going students, they can also be followed by any user.

How we built it

For the expense tracker, we used React as it would conveniently help us divide the application into multiple components, making the code simpler. Different subsections of the application such as history of transactions and net expenses have different components combined together into a Javascript file. We also created a Navbar using React that shows up on each page on the website, providing an user experience as different pages on the website are readily available. Furthermore, the backend of the app was also created using React as well as node.js and express.js. MongoDB was also used as the database to store and fetch the transactiosn entered by the user. Different components of the backend were combined with the frontend programming. This prevented the information stored in the app, such as the transaction list, from being deleted when the page is reloaded.

Challenges we ran into

We faced difficulty when trying to implement Navbar on each page of the website, as it was originally designed as a React component in the src directory of the project. However, as our html files were located in the public directory, we relocated parts of the Navbar to individual html files for each webpage. We also had some difficult whith the back-end programming of the expense tracker. As it was the first time doing this for some of the group members, it was hard to figure out how to connect the back-end programming to the front-end. There was also a big learning curve when working with MongoDB as it was our first time ever using this. However, with trial and error, and with some help from each other, we were able to understand how to fix our errors and eventually create a fully functioning expense tracker.

Accomplishments that we're proud of

We're proud of being able to pull the project off using React, as none of us had experience with it before. We referred to various resources to learn the basics of React and helped each other with issues. We also added a backend component to the project, so that transactions are not lost.