About

Info: This article is still WIP.

Okane is a simple expense tracker, built with privacy in mind. I was curious to try out some technologies I haven’t used before. Namely Linear, API-Platform, Vue and Heroku (more on this later). The app itself is based on a PHP REST-API backend, with a decoupled Vue.js frontend. As a hosting solution I went with the free tier of Heroku, which includes a tiny web server and a managed Postgres database. Beside this, I also built my own Hugo theme, for the landing page and static SEO optimized content. Hugo is a Static Site Generator (SSG), written in Go. Right now, the static part is served by a tiny Typescript server on edge functions via Deno Deploy. All my deployment steps are fully automated and only need a merge or push on the main branch.

Linear

For my first product built from scratch, I wanted to try out a new tool for project management. You can think of Linear as a opinionated version of Jira, but way better. It let’s you plan tickets in the form of customizable sprints, the so called “cycles”. Linear comes with integrations for Gitlab and GitHub, which made the ticket flow a breeze. I worked with milestones for the initial release and different epics for the many parts of Okane. A few weeks in I learned, what my velocity is developing Okane besides my day job, and it was quite easy to plan the initial release of the MVP.

Heroku

Heroku is a simple to use platform service. It let’s you spin up managed Postgres databases and servers in a few clicks or via a CLI. It integrates seamlessly with GitHub and enables simple continuous deployments. It has a generous free tier, which I’m using for this project.

API-Platform

API-Platform is a PHP framework to create API driven services. Since it was created in the wider Symfony ecosystem, I felt immediately at home. For example - API-Platform provides out-of-the-box REST-APIs around Doctrine entities. You can also make use of different built-in patterns like persisters, to hook into this automatically generated API endpoints. It was really refreshing to build with this framework.

Vue

Vue.js is a JavaScript framework to create single page applications (SPA’s). During development I made use of the Vuetify component library, to easily scaffold different parts of my app’s UI.

Hugo

For the static parts, like the landing page or SEO optimized content pages like blog posts, FAQs and more, I decided to build my own Hugo theme. Hugo is a static site generator (SSG) that renders Markdown files into static HTML. I also use Hugo for this blog you’re reading.