Categories
Programming Side Projects

Money

A year ago, I was trying to organize my bank accounts and found that it was really hard for me to understand where I was spending most of my money. So I started doing some research in order to find a good tool/application which would do this for me.

Mint, of course, was my first tool of choice. Mint is a pretty good application, but not the right one for me. I’ve been a Mint user since a long time and never found it to be really helpful for me in organizing and understanding my expenditures. Every single time I logged in to Mint, it complained about Bank Account Authentication Failures™. I’ve tried re-connecting my bank accounts over a 100 times and it still never works. Moreover, I’m not really comfortable letting a 3rd party access my bank details anymore. Also, it’s not that great at auto-categorizing my bills/expenses anyway and it still lacks some of the features that I thought would be cool and helpful for me.

So I moved on to a few other solutions and tried them. Some needed me to sell one of my kidneys to buy the app, while others just lacked features. Almost every single time, I ended up having a 50% positive impression of the apps. None of them were feature rich or flexible enough for me to find them actually useful.

I was frustrated and gave up on the search. The only thing that was left for me to do was to write an app that would basically have all the features I wished to have.

Introducing Money

🎉 💵 Money is a simple web application that helps you keep track of your expenses/bills and gives you insights on where your money went. Currently, the app is under active development and lacks features. But the idea is to eventually have all the awesome features I’ve dreamt of, implemented in the application.

Stack

Money is built using Ruby on Rails and BackboneJS. It uses Bootstrap for the UI.

Implementation details

My initial goal was to have a native mobile app (and eventually that’s what I want to do). Since I don’t have the time to do that, I chose to go ahead and implement a web app with mobile-first approach. The current app itself is a JSON API, which is consumed by the Backbone frontend (that ships with the app) client using the OAuth2 client credentials flow. The API can be used to build native clients on various platforms.

The best part about Money app is that it’s open source ❤️ and licensed under the awesome MIT License. It is available at https://github.com/mohnish/money. Feel free to fork it or deploy your own instance or build your own features or extend it to whatever the way you want it to be or build your own client or file issues. I already have an instance deployed and running.

I will keep you guys posted about the updates. Current version of Money app is 1.7.1.

Thank you

Shoutout 🎉 to Sindhu Monica and Sandeep Appikonda for helping me test the app and improving the UX of the app.

Categories
Programming

Integrating Twitter Bootstrap and H5BP in Rails

Disclaimer: There are other alternatives to this setup by means of gems. But this is how I prefer to do it. Manually. With total control.

I have been working on a Rails application (a side project) and wanted to utilize the power of Twitter Bootstrap 2.0.1 and HTML5 Boilerplate 3.0.2 with Asset Pipelining in Rails 3.2.1.

**Requirements: **

Download Twitter Bootstrap from http://twitter.github.com/bootstrap/

Download HTML5 Boilerplate from http://html5boilerplate.com/

Setting up the Rails Application

First and foremost, create a new Rails application by using the command rails new app_name.

Once the app is created, navigate into the app folder cd app_name.

Integrating HTML5 Boilerplate

Now let’s first start with HTML5 Boilerplate. Open the downloaded H5BP zip file.

CSS:

Navigate into the css directory in the zip file. Copy the style.css file into app/assets/stylesheets of the Rails application that you just created.

JavaScript:

Once you’re done with that, navigate into the js directory of the H5BP zip archive. You’ll have script.js, plugins.js and a directory called libs. Copy the plugins.js and script.js into the app/assets/javascripts of your Rails application.

Open the js/libs directory in your H5BP zip archive and you’ll have jquery-1.7.1.js, jquery-1.7.1.min.js and modernizr-2.5.3.min.js. These are the versions available during the time of this post. These will change eventually. Now copy those three files into lib/assets/javascripts directory of your Rails app. If you don’t have the javascripts directory in your lib/assets of your Rails app, create it and then copy the said files.

Next, from the H5BP zip archive, copy the files highlighted in the image below into the public directory of your Rails application.

"H5BP

Next, copy the left out index.html from your H5BP zip archive into the app/views/layouts directory of your Rails app.

Delete the file named application.html.erb (if you’re using ERB) from the app/views/layouts directory of your Rails app and rename your index.html file existing in that directory to application.html.erb. We’ll get back to this file after setting up Twitter Bootstrap.

With that, you can get rid of your H5BP zip archive. Next step would be integrating Twitter Bootstrap into the application.

Integrating Twitter Bootstrap

Open the downloaded Twitter Bootstrap zip archive and navigate to the css directory in the zip archive. You’ll find the bootstrap.css and bootstrap-responsive.css files along with their corresponding minified versions. Based on your requirements, copy the needed files into the app/assets/stylesheets directory of your Rails application.

Now, navigate into the img/ directory in the Twitter Bootstrap zip archive and copy the **glyphicons **files into the app/assets/images directory.

Next, navigate into the js/ directory in the Twitter Bootstrap zip archive and copy the bootstrap.js file into app/assets/javascripts directory of your Rails application.

And you’re done with the Twitter Bootstrap zip archive.

You’ve now successfully placed all the required files in the right places of your Rails application. The next part would be tweaking the Rails application a bit and modifying the default layout.

Changing the Directives

Now, change the contents of your app/assets/javascripts/applications.js file with the contents of this:

Next, change the contents of your app/assets/stylesheets/application.css file with the contents of this:

Change the contents of your app/views/layouts/application.html.erb file with the contents of this:

Important: If you’ve used the minified versions of the files from Twitter Bootstrap, then you should change the directives in the app/assets/javascripts/applications.js and app/assets/stylesheets/application.css to the corresponding minified files.

For ex: in app/assets/javascripts/applications.js, require bootstrap becomes require bootstrap.min.

Also, the reason we are manually “requiring” the files is to maintain the required order of the files. This also prevents overriding of the styles and functionality.

That’s it. You’re done setting up your Rails application with the power of HTML5 Boilerplate and Twitter Bootstrap (Rails BootPlate). Now the rest is in your hands.

If you find anything wrong with the setup, please do let me know in the comments section below. I will make changes and update this post. If you’re interested, you may fork the project at: https://github.com/mohnish/rails-bootplate

**Update: **To make the glyphicons work properly, you need to change the path of the icon files in the bootstrap.css file at Line 1174 and Line 1183 to /assets/glyphicons-halflings.png and /assets/glyphicons-halflings-white.png correspondingly.