BucketUp is an LHL final project that makes budgeting a breeze. Our objective with this project was to make a budgeting application that makes it fast and intuitive to set up a budget for experienced budgeters, but also easy to get up and running for users who might be newer to the craft.
Using the latest front-end frameworks, and a robust express backend we've automated the boring stuff while still leaving room for the user to create a fully customized budget!
React - This project was our first full-stack application built using React and Express. Getting used to managing state, and the built-in prop system React uses was a hurdle at first. A few days in, we started using Material-UI we were blown away by how fast we could proto-type and add new functionality, after that we started flying.
ThreeJS - Was a library we were incredibly excited to use, integrating and setting up the various Canvas elements was difficult at the beginning, and managing render times wasn't always easy, but we loved the dimension this library added to our app!
Managing Data - Over the course of the project we spent a lot of time working on ERD's and deciding how we could query and display useful data. It took a few refactors, but we learned an important lesson about trying to do two things at once. By separating concerns, and being cautious with how we mutated data the backend did come together.
To run the application locally fork, and clone the repository:
git clone <SSH_Key> bucketUpCD into the client folder:
cd bucketUp/clientInstall required packages, from within the client folder run:
npm installRepeat this process for the server folder:
cd ../server
npm installThat's it! Once you've run these commands you can run the application!
To start the application run:
npm startin the client and server folders respectively, you can then navigate to localhost:3000 to view the app.
Chat - Implemented using socket.io.
3D Elements - Implemented using ThreeJS.
Analytics - Charts are styled with CSS, generated with ChartJS.
Biometric Login - Implemented using Tensorflow. Although a good first taste of machine learning, the face-scan is currently just for show as we didn't have time to train the model.