A web application for everything

When all you have is a hammer, everything looks like a nail. Or in this case, the story of how I started writing web applications to solve everyday life problems in a very complicated way. But still, my job is making software, and I also spend a big part of my free time on this, so I can gain some fun and learn something from this crazy idea.

It all began a bunch of years ago, I had already some experience building software and doing server administration, had a very old laptop with a broken screen I wasn't using anymore, and was also concerned about self-hosting and data privacy, so I decided to set up a minimal Linux install with no-ip, Nginx, and began to host my own websites from home.

Fast forward a couple of years later, at the time I was used to building applications using the Laravel and AngularJS frameworks, these applications were solving business problems, and at the time had this crazy idea. What if I could build just for fun a custom web application that would choose what to wear?. I could also track what clothes I had at home, what had at my girlfriend's house, how old each of my clothes was and even I could also set rules to decide when to buy new clothes and make a budget.

As I was aware this wasn't something I would like to invest a lot of time in I took inspiration from the code and tools I was already doing at work and built the app in a few days. Some months after that, I moved in with my girlfriend and found two extra problems that could also be solved with this app, one was to share house expenses between us and the other was to keep track of all my stuff when moving. That way I could answer questions like In what box did I put that book and where is that box now? or How much money did we spend on groceries this month? Who paid for it? I know it is a bit excessive but... I did it anyway!

While on this coding frenzy I started to have a lot of related ideas, I could have different users, roles and permissions, and I could create user accounts for friends and family, so for example my sister could see what I was sending in a box to my parent's place after moving, just in case she wanted something for herself. It all grew quickly into this big hodgepodge big and slow application.

After some time using this application I realized some things were quite wrong and wanted to change them, I had to leave my server laptop in a place where I only had occasional physical access and whenever the power went down or something unexpected happened, I had to look for a free slot on my calendar and take a metro to reboot the server. The biggest second problem was that apart from me, none of the other users were actually using the application, I asked them and none of them were able to remember their username or password. Also, I couldn't share the code on GitHub because it contained a lot of hard-coded personal information on the code. The last nail on the coffin was when I changed jobs and moved to Barcelona, I did not bring the server laptop and I just left it, now physical access was not just difficult, but nearly impossible, and two months after moving, one day at 3 AM the laptop turned off, the application went 500 and I couldn't reach the server anymore.

Over the last two years I switched jobs and also languages and technologies, I spent a lot of time learning about Docker, Ansible, Terraform, Python and despite I still think PHP & Laravel is a very valid tool for writing performant web applications I wanted to try something different and put in practice most of the inspiring concepts I read about for the last two years, like using a micro framework and designing a microserviceesque architecture.

So, long story short, I've re-done all the work I did back then but using these new tools, migrated all data, deployed everything on a cloud provider, and published it all on my GitHub account.

Here is the repository list that make the whole thing:

Garments manager

namelivia/garments-server
Server app to manage garments inventory. Contribute to namelivia/garments-server development by creating an account on GitHub.
Server side for the garment management application
namelivia/garments-client
Client part of a garment inventory management app. Contribute to namelivia/garments-client development by creating an account on GitHub.
Client side for the garment management application

Plants manager

namelivia/plants-server
Backend for a plant care app, also an exercise to try FastAPI. - namelivia/plants-server
Server side for the plants management application
namelivia/plants-client
Client of a plants app. Contribute to namelivia/plants-client development by creating an account on GitHub.
Client side for the plants management application

Expenses manager

namelivia/expenses-server
Backend for an expenses management app, also an exercise to try FastAPI. - namelivia/expenses-server
Server side for the expenses management application
namelivia/expenses-client
Webclient of an expenses webapp. Contribute to namelivia/expenses-client development by creating an account on GitHub.
Client side for the expenses management application

Item tree inventory app

namelivia/itemtree-server
Backend for an item management app in the form of a tree of items, also an exercise to try FastAPI. - namelivia/itemtree-server
Server side for the item management application
namelivia/itemtree-client
Client part of a tree like item management app. Contribute to namelivia/itemtree-client development by creating an account on GitHub.
Client side for the item management application

Journaling service

namelivia/journaling-service
Simple journaling service to keep a timeline of entries - namelivia/journaling-service
Journaling service to attach journal like information to entities

Notifications service

namelivia/notifications-service
A dockerized REST API that will forward notifications sent through HTTP to messaging services like Telegram, Discord or Slack. - namelivia/notifications-service
Notifications service to send notifications to third party services like Telegram

User info service

namelivia/user-info-service
Small service to store user related metadata. Contribute to namelivia/user-info-service development by creating an account on GitHub.
User info service to keep additional user metadata shared among all applications

Each of these repositories is deployed as a Docker container on the same network, the whole application architecture looks like this:

Purple for third party applications, green for client applications, yellow for server applications, blue for databases and red for external services

Here are some of the key features that motivated the rewriting of the application that gave the highest value from the user perspective:

  • Passwordless login using SSO.
  • Mobile notifications (using Telegram).
  • Data backup on the cloud.
  • UI speed on mobile, fastest loading times.

Here is a list of tools used here, everything is deployed using Docker, Terraform, and Ansible. It uses pomerium as an authentication proxy that allows SSO, then all the client applications are build using VueJS, Bootstrap and Nginx for serving. For the server applications, I wanted to try FastAPI plus some extra tools (my first time using most of them), all databases are PostgreSQL, and finally thumbor for the image processing service, which allows image optimization on demand.

Finally, I wanted to be a bit pragmatic and didn't want to get too much crazy on the details and focusing on the core features that deliver some value to the users, so considering this is a side project it is full of half-baked details like untranslated strings and UI ugly details, but my idea here is to avoid spending too much time on this project if not strictly necessary.

And that's it! I can finally rest and mark as DONE a task that had been on my TODO's list for more than a year. Thanks to this rewrite I can finally publish all this work I've been doing and share the code with you all :)