About
Aufgabenjäger is a full-stack application for tacking project tasks using a kanban style dashboard. It’s designed for those who wish to run an all-in-one solution locally, rather than use a SASS solution.
The following is not a tutorial on how I created Aufgabenjäger. Instead, it is meant to provide an overview of the project.
The Stack
Features
- Create multiple boards (i.e. projects)
- Each board supports multiple lists and tasks
- Each board includes a
Donelist - Reorder tasks and lists through drag and drop
- Store database content locally through docker mount volume
Examples
New Board
New List, Edit Title, and Delete List
Various Task Features
Edit Board Title
Delete Board
React
React is a component based JavaScript library for building user interfaces. As its name suggests, React provides developers with the ability to create reactive components through state management.
As Kanban tools tend to have many changes during the planning and development phases, I knew React would be performative enough to handle many realtime changes.
Vite
Vite is a local development server and build tool for Vue and React projects.
There are a handful of different solutions for starting a new React project. Although the start a new react project documentation does not list Vite, for Aufgabenjäger, I chose it for the straightfoward setup process as I needed a frontend application with TypeScript.
TypeScript
Developed by Microsoft, TypeScript is a popular choice for adding types to JavaScript.
As a developer, I prefer typed languages because they ensures a tighter integration and can catch errors at compile time, rather than run time.
Tailwind CSS
By trade, I’m a service developer and have not spent much time developing frontend elements. For that reason, I tend to prefer opinionated UI libraries, but some options are not as flexible as I would like. So, I find Tailwind CSS to be more of a middle ground.
Although it tends to make classnames verbose, I do not mind it as I find it cleaner than maintaining inline styles, separate style classes, or CSS files.
Express JS
Given React is a frontend library, the project does not need SSR, and the API would need to support basic CRUD operations for three database tables, I needed a lightweight backend solution. Therefore, I decided on Express JS because it has minimal setup.
Drizzle ORM
Drizzle ORM, according to the site, “is a lightweight and performant TypeScript ORM with developer experience in mind.” This was the first project where I used Drizzle ORM, and I found it to be a good library.
It was easy to integrate with PostgreSQL, but that integration did lack some features; not sure if the limitation was with PostgreSQL or Drizzle. Regardless, writing logic to perform CRUD commands was straightforward and easy.
I would likely use Drizzle ORM for other JavaScript projects that need a relational database.
PostgreSQL
The features of Aufgabenjäger require a relational database because each board would have multiple lists and each list would have multiple tasks. Given PostgreSQL is a free and open-source relational database management system, I figured it would be sufficient.
The only downside I find with PostgreSQL is there’s no GUI for viewing the data, which I find helpful for debugging. So I opted to use pgAdmin as it was free.
Entity Relationship Diagram
Here’s a simple ERD I made using PlantUML for the database.
Nginx
Nginx is a web server that acts as a reverse proxy for this application. As I wanted React and Express JS running on different ports within the docker container, Nginx helps to route requests to either application based on the endpoint and through a single port.
Admittedly, this was the first project where I used Nginx. Therefore, I followed this repo’s design to understand how to integrate React, Node, and PostgreSQL.
Docker
Docker is a service that uses OS-level virtualization to deliver software in contained packages, i.e. containers. For Aufgabenjäger, it runs containers for Ngnix, React, Express JS, and PostgreSQL to create a repeatable deployment. Each container can be ran in isolation, but with docker-compose, all containers run together.
Repository
The project can be found here, and its README has information on how to run the application in develop and production modes.
Feel free to open any issues you find.
There are a list of todos to add features or improve the code. I do not have any plans to address the todos soon but plan to use the tool for upcoming projects. So I suspect I will fix issues as I find them.
Conclusion
To me, I accomplished the goals I set out for this project: create a minimal kanban full-stack application that can support multiple projects for local use. My hope is that I will continue to use the tool for other projects and evolve the project overtime. For now, I had fun learning how to make a full-stack application using Docker and Nginx.
(If I do end up make changes to the project that warrant an explanation, I will add them below the conclusion. Although, once the examples above become out of date, I will edit that section.)