I finally decided to redo an old Django project of mine, GlucoseTracker, a web application for tracking blood sugar levels mainly for people with diabetes (I’ve been Type 1 diabetic since I was 13), using the latest version of Django and Twitter Bootstrap. I originally started this project to teach myself Django but I lost interest at some point and pretty much abandoned it.

That was over 2 years ago. Now, with more experience working with Django as I was helping out a friend on and off with his Django app while I was traveling, I’ve learned quite a bit. I’m now able to build a much better looking app, thanks to Twitter Bootstrap, and much faster with less code by using Django features such as class-based view (CBVs) and 3rd party apps such as django-crispy-forms.

I’ve also been reading “Two Scoops of Django,” a book about Django best practices which my friend highly recommended and it’s been helping a lot as well. My project is a lot more organized than before and I was able to get rid of a lot of unnecessary code.

I’ve been spending quite a bit of time working on this project the past 3 days and I’m really impressed with how easy it is to integrate and customize Bootstrap 3. The website is very well documented, complete with screenshots making it easier to visualize how certain components and styles will look. Here’s a side-by-side comparison of my old project (top) using mainly templates from the Django admin and the new one using Bootstrap 3 (bottom):

As you can see, the one with Bootstrap looks a lot more professional and modern. It’s also mobile friendly. For example, the menu on the top right automatically changes to a square which you can click or tap to show more options if the window reduces to a certain size as show below:

Here are some more screenshots:

The project is still at a very early stage, but I’m pretty happy with the progress so far. I’m making this project open-source so if you’re interested in checking it out or contributing to it, please feel free to fork it on GitHub: https://github.com/jcalazan/glucose-tracker

Django and Bootstrap make a really powerful combination. I can see how those very familiar with these tools can build a very professional-looking website or application in just a few hours. I’m adding some links below to some of the resources I’ve used to hopefully help those who are new to these.

Useful Links

• Django CBVs reference: http://ccbv.co.uk/
• Two Scoops of Django: Best Practices book
• Twitter Bootstrap 3 CSS reference: http://getbootstrap.com/css/
• Twitter Bootstrap 3 Components reference: http://getbootstrap.com/components/
• Bootstrap 3 Datetimepicker plugin: http://eonasdan.github.io/bootstrap-datetimepicker/
• Django Crispy Forms app (lets you build your forms in Python, works with Bootstrap 3): http://django-crispy-forms.readthedocs.org/en/latest/
• DataTables plugin (makes really pretty tables): http://www.datatables.net/
• Django Braces app (provides useful CBV mixins to make your life easier): http://django-braces.readthedocs.org/en/v1.2.2/
• South (for database migrations): http://south.aeracode.org/