Inspiration

We came up with innovative hack that replaces conventional expense tracking and bill payment management with a much more accessible and secure platform that not only tracks your day-to-day expenses but also packs a few awesome features under it's hood.

What it does

  • Our application primarily tracks a consumer's day-to day expenses along with category of purchased item, name, price and receipt upload functionality.
  • It also displays the daily logged expenses in a neat tabular format with added functionality of date-based filtering and pdf-based report generation.
  • Wallet-X also packs some creative visualizations and categorized graphical analysis of a consumer's day-to-day expenses.
  • It also facilitates location-based expense tracking and real-time rendering on Google Maps for a detailed historic location trend.
  • Wallet-X is highly secure due to dedicated Google Oauth Authentication Strategy and features a fully mobile-responsive user interface.

How we built it

Our application features 5 major components, namely:

  • Authentication
    • We devised and implemented a basic authentication strategy using PassportJS and Passport-Google-OAuth20 which essentially prompts a sign in/signup page for any new user that lands on our web application and also maintains separate sessions for every single user.
  • Expense Entry
    • We built a minimal input form for any user which takes in three major fields, namely, item name, price of item and category plus a optional image-based receipt upload functionality, all of which is being persisted in MongoDB Atlas.
  • Expense Logging
    • We added a separate EJS rendered html page that visualizes and displays all related expenses in a neat tabular format.
    • It also features a dedicated date-based expense filtering which works with vanilla JS on the frontend and queries MongoDB on the backend using Express.
    • Also, we integrated a pdf-based expense generation using the JSPdf npm package in Node.js.
  • Expense Visualization
    • We managed to build a visualization functionality inside our web-app by utilizing Chart.js on the frontend which is fed directly from MongoDB through Express.js.
    • We added a dedicated donut chart to visualize our expense categories as well as a spider web chart for an aerial overview of an individual user's expense trend.
    • We also managed to integrate a line graph to demarcate the total expenditure on each of the 5 categories hardcoded into our application.
  • Expense tracking and rendering
    • Finally, we integrated a location-based map rendering wherein each expense logged is associated with precise latitude and longitude which, with the help of Google Maps API, displays an awesome world map with location markers demarcating the points of purchase.
    • The map also utilizes location marker clustering to maintain a neat overview of an individual's purchase location history.

Challenges we ran into

  • Faced issues with setting up passport.js for Google Oauth.
  • Faced difficulties integrating Google Maps API inside our web application as it was our first hands-on experience with API's and backend development in general.
  • Faced some unexpected issues with plotting charts on the frontend using data from MongoDB.

Accomplishments that we're proud of

  • We successfully managed to build most of what we were planning to build in our ideation stage.
  • We are proud of building an end-to-end full stack application from scratch as we never thought we had the potential to see the application to its end.

What we learned

  • We learnt to integrate an API inside our full-stack application.
  • We understood and learnt about CRUD operations on MongoDB from the browser.
  • We learnt the importance of teamwork and pros of distributing the workload of an entire application among all of us.

What's next for Wallet-X

  • Integrating optical character recognition to scan receipts from the application.
  • Integrating payment gateway to pay due bills from inside the app itself.
  • Adding incentives (in-app points) on savings checkpoints to redeem vouchers/gifts.
Share this project:

Updates