Full stack adventures #1 - Meet the stack

I have a lot of different development projects. Most aren't all that great, and some of the older ones are...well, they're awful. (For the morbidly curious, I have many of them on GitHub, and my newer ones will start to appear on Gitlab.)

My current one, however, has been an adventure. It's useful, it makes for a good learning experience, and it has a very wide range of technologies. I'm truly working with a full stack on this one, even if I may not be playing with a full deck.

What it is

The project is called Pixeme, a portmanteau of "picture" and "lexeme" that, in my opinion, captures the essence of what I'm trying to create. Basically, I took the old saying "A picture is worth a thousand words" far too literally.

My goal is to make a full web platform for what I describe in the documentation as a community for visual language learning. To put it simply: users post pictures with simple, descriptive captions. Nothing more than a single word or phrase, though they can add more text later. What separates this from, say, Instagram is that other users (or the same one) can add captions for other languages.

For example, I could post a photo of my stepdad's dog with the caption "a dog". Then, someone who speaks French might come along and add "un chien" to it. A Japanese user could then add "犬" to the mix, and so on. Together, we build a kind of cross-language picture dictionary. This can then be used by people who really are trying to learn languages and understand that visual reinforcement helps.

(I have plenty of other ideas, things like audio attachments, larger texts, Anki-style flashcards, adding in support for constructed or artificial languages, and even possible research uses, but those are all for much later. Let me get the site started first.)

All in all, Pixeme checks all the boxes for me. It involves programming and linguistics, two topics which any reader of this blog will know are among my favorites. It's a long-term project, so it requires focus but gives the satisfaction of completion in return. And maybe I can even find some way to monetize it in the future. Even if I can't, it's still valuable experience with a number of different languages, frameworks, and libraries.

The stack

Every web application is layered. There's no way around it. At the very least, you have the server side and the client side, but most modern apps add in multiple extra layers, forming a stack. Pixeme is no exception. For this project, I chose a stack which, for the most part, reflects my personal preferences while also allowing me to stay on top of current developments in both sides of the web equation.

The server-side framework I chose is Flask. I like Python. Even though I feel the 3.x series was a needless break in compatibility, it's still one of the few languages I feel comfortable writing. I've joked before that I can write Python in my sleep---that's how much experience I have, and how much it fits my mindset.

Flask calls itself a "micro-framework" for web applications, meaning that it comes with very few bells and whistles, but plenty of extensibility. And I like that, too. It's a little harder to set up, as you have to track down a number of extensions for things like database connectivity, form validation, authentication, etc., but that's okay. You only pay for what you use, and there's nothing hidden.

Apart from Flask extensions, the rest of the back end is pretty standard. SQLAlchemy and PostgreSQL, which is pretty much Python Databases 101. Pytest for testing, because tests are important. (I'll admit that I haven't always kept those up to date in past projects!) The Marshmallow library for serialization and validation. And the usual host of minor packages for little things. You can't get away from those.

The front end is where things get interesting. Pixeme has a REST API because that's the cool thing to do these days, but also because it really does make things easier even when you don't want an SPA. And I decided after writing half of one that I don't want another SPA. It just doesn't fit the vision I have for this platform. Oh, there will be an app eventually, and that'll have web and mobile versions, but the site itself needs to be the initial focus.

Flask includes the Jinja template engine; you can use your own, but it's easier to go with the default. So I'm writing the view layer (Pixeme mostly follows the typical MVC architecture, in case you were wondering) as HTML templates using Jinja. That's sometimes harder than it looks, one reason why this post is the first in a series. We'll get into some of the difficulties later, though.

HTML isn't the only part of the web in 2020, so Pixeme has a whole client-side layer, and this is where my focus on minimalism ramps up. As I said, I gave up on an SPA for the initial version of the site. I personally like Vue over React, so that's where I started. But then I saw how I was duplicating so much of the server functionality, so I decided to back up and make a more traditional site. Still, reactivity is great, so I turned to Alpine.js to fill that niche. It's not perfect, but it's very helpful, and I'll explain that later in the series, too.

Last, CSS. I know what you're thinking: Bootstrap. Or maybe Bulma or one of the other alternatives. And those are great. I've used them before, and I do enjoy them...when they fit. I wanted to try something different with Pixeme, something more customized, so I chose TailwindCSS instead. It takes more setting up, it doesn't play perfectly well with Jinja (yet another topic for another post), but it suits me. Once I grasped the concepts behind it, it just made so much sense.

So that's the Pixeme stack. Python, Flask, and Postgres are the server side; what OS the whole thing will run on is still an open question, but bet on some flavor of Linux. Jinja for templating and views. A front end built with Alpine and Tailwind. "Full stack" is always a juggling act, and this might be my most ambitious attempt yet. Stay tuned to see how it works out.