DEV Community

Cover image for Making TUI kanban app with BubbleTea | MongoDB Atlas Hackathon 2022 on DEV
Gabriel Grubba
Gabriel Grubba

Posted on

Making TUI kanban app with BubbleTea | MongoDB Atlas Hackathon 2022 on DEV

What I built

  • A TUI(A terminal app with UI) Kanban app

I've taken what I saw in this playlist that was made by @bashbunni and took it to the next level.

I've made some adjustments and in order to this app be able to connect to a MongoDB and saved the data of the user.

Category Submission:

  • Think Outside the JS Box

App Link

repo

As it is a self-hosted app, you can download it and run it with the commands:

make sure that you provide a MongoDB URL in the .env file, the same way it is shown in the .env.example

go get
go run .
Enter fullscreen mode Exit fullscreen mode

Screenshots

The main view:
Main view

The loading view:
loading vi

The edit/add view:

Edit View

Description

This full-CRUD app runs in your terminal with a beautiful UI.
It has three columns, To-do, In Progress, and Done columns. Where you can add tasks to the queue and edit them, changing the description or task location

Link to Source Code

repo

Permissive License

  • MIT

Background

I've decided to build this app because I wanted to learn Go and BubbleTea. Creating new features/recreating an app is an excellent way to get this knowledge.

Also, as a maintainer of an OSS project(MeteorJS) that has MongoDB as its first-class citizen, I wanted to see what other MongoDB drivers look like with other languages that are not JS. And got happy with the results.

How I built it

(How did you utilize MongoDB Atlas? Did you learn something new along the way? Pick up a new skill?)
I used MongoDB Atlas to save user's data in the database. So that whenever you close your terminal, you will not lose any data.

I would say that I learned a lot about Go and BubbleTea and how to use them to make glamorous command-line apps.

Also, I think I got better at MongoDB in general. After all, I could turn my language-specific understandings with MongoDB into general ones because I used them in an unfamiliar language.

Additional Resources/Info

Demo video:

Showing all CRUD operations

Started deleting old documents from DB

Created some task

Edit its column

Top comments (2)

Collapse
 
timotej_avsec profile image
Timotej Avsec

This looks incredible.
I think I'll start using this as my day-to-day todo list :D

Collapse
 
codewithrabeeh profile image
Rabeeh Ebrahim

Great project!