Coder Social home page Coder Social logo

ahana15 / budget-app Goto Github PK

View Code? Open in Web Editor NEW

This project forked from cindyhalim/budget-app

0.0 1.0 0.0 19.46 MB

A gamified monthly budgetting app that helps track and visualize frivolous spending.

Ruby 37.09% HTML 0.92% CSS 9.87% JavaScript 52.12%

budget-app's Introduction

Budgey

Budgey is a gamified monthly budgetting app that helps users keep track and visualize their frivolous spending.

We are currently looking to convert this app into a mobile application via Apache's Cordova. In the meantime, when viewing this app in the browser please do so in mobile view.

Motivation

During bootcamp most of our time was spent coding at Lighthouse Labs, and this left us with very little time to meal prep or cook at home. As a consequence our Ritual, McDonald's and Dollar Store bills quickly raked up. This was our inspiration for creating an app that could easily convey to us how much money we were spending per day/month and how much we could actually spend based on our monthly incomes (read limited monthly income).

Contributors

Ahana Ghosh, Nikita Sheremet, Cindy Halim

Tech/Framework

Our Stack: React.js/Material UI < Ruby on Rails < PostgreSQL

Libraries:

  • SASS
  • Axios
  • Moment
  • Carrierwave
  • Rack CORS
  • Bcrypt
  • Faker

Features

  • Clear break down of spending: Users' monthly budget is further broken down to a daily budget.

gif showing app features - dashboard - edit a goal

  • Side goals: Saving for a trip? A new phone? Users can add side goals and Budgey will re-analyze their daily progress to cover for those side goals.

gif showing app features - dashboard - transaction added

  • Analytics: Users can view their monthly breakdown based on categories, compare their current spending with their previous months', as well as compare budget trends throughout the year.

gif showing app features - analytics

  • Gamified: Users lose health points when they don't meet their monthly budget and earn coins when they do. They can purchase potions to revive their health and earn badges when they've met their budget for more than 1 month.

gif showing app features - store - add hp

Installations

  1. cd to the front-end directory (budget-frontend)
  2. Install dependencies via npm install
  3. Run the development server via npm start
  4. Head to http://localhost:8080 on the browser

Notes

  • Our backend is hosted on Heroku, which takes a few seconds to 'warm-up'
  • Test User: email: [email protected]; password: password

budget-app's People

Contributors

nikitasheremet avatar cindyhalim avatar ahana15 avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.