Check out my capstone - Mealwise

Hey folks, I’m here to share my Django capstone project!

I wound up calling it Mealwise instead of Django Delights. Technically, I completed the course back a couple months ago, but I didn’t want to post it here for feedback until I’d finished what I wanted to do with it.

You can try out a live demo of the app at iamjameswalters.pythonanywhere.com. Give it a shot! (database resets nightly)

You can find the code at github.com/iamjameswalters/codecademy-mealwise. Note: I used Poetry for dependency management. However, there’s a requirements.txt in the repository, so you can create a virtual environment and pip install -r requirements.txt if you like.

There are two versions (see Releases, or the git tags). v1.0 is the barebones version that checks all the boxes for the capstone assignment. v2.0 is the fully finished project, which incorporates a number of technologies I was interested in learning and applying on this project.

The first of those is htmx, a fantastic Javascript library that allows you to make dynamic load-ins to your page by writing just HTML attributes. This is becoming very popular in the wider Django community, because of how it allows us to create modern UI patterns that are typically only possible by using a Javascript framework. It’s very easy to incorporate them into your Django project if you’re using class-based views–just subclass an existing view and modify the template or whatever you have to in order to make it work with htmx!

A companion project to htmx is _hyperscript, a scripting language that’s designed to fill in for Javascript in most places. It has a natural language syntax that mimics English. It can take some getting used to writing it, but it’s a lot closer to Python than JS is! I used it for a couple of nice touches, such as the orange text animation on the home page, and the login form’s fields send a “click” to the login button when you hit enter inside them. I also used it to get the Bootstrap modals working without really writing any JS.

Speaking of which, I used Bootstrap 5 for the frontend framework. I tweaked the color variables in the source SASS and compiled it manually, to get the theme. It’s not a mobile-first site, but Bootstrap does an awful lot of responsive stuff for you out of the box, so feel free to give it a look on your phone (or in your browser devtools).

I don’t care a lot about data visualization, but I wanted to do something for a graph on the reports page. So, I looked around and settled on Bokeh. There’s still a lot more I could do with it, but I’m happy with what’s there, given the scope of this project.

It’s worth mentioning that the admin area is a bit nicer looking, thanks to django-admin-interface. This will probably be a standard install on every project, it gives a much needed facelift to the admin area.

I’m pretty pleased with the end result. Please give me any comments or criticisms, and I’m happy to try and answer any questions. :slight_smile: