Join

A Kanban board for small teams: create tasks, move them across the board with drag and drop, and manage contacts. Built as a team project during my web development training at the Developer Akademie.

Live demo: join.tobias-klanert.de. Use the guest login to try it without an account.

About this project

• Team project with three people, part of my web development training at Developer Akademie GmbH.
• Design provided by Developer Akademie GmbH.
• My role: team coordination, Firebase integration, login and sign-up, the board with drag and drop, and support with bug fixes.

Features

• Sign-up and login with email and password (Firebase Authentication)
• Guest login with demo data, no account needed
• Summary page with an overview of your tasks
• Board with drag and drop between status columns
• Tasks with title, description, due date, priority, category, subtasks and assigned contacts
• Contact management
• Responsive layout for desktop, tablet and phone

Tech stack

Area	Choice
Frontend	Vanilla JavaScript, HTML, CSS (no framework, no build step)
Auth	Firebase Authentication (email and password)
Data	Firebase Realtime Database (region europe-west1)
Hosting	nginx container behind Caddy on my own Hetzner VPS

Security

The Firebase web config in js/firebase.js is public on purpose. It only identifies the Firebase project and does not grant access to any data. Access is enforced on the server side by Realtime Database Security Rules:

• Signed-in users can only read and write their own data under users/<uid>.
• The guest demo data under users/guestUser is read-only.
• Everything else is denied by default.

How it runs in production

Join is a static site, so there is nothing to build. On my VPS the repository is checked out and mounted read-only into a hardened nginx container: non-root user, read-only file system, no Linux capabilities. Hidden files such as .git/ are blocked. Caddy sits in front of it as a reverse proxy and handles HTTPS. An update is a git pull on the server.

Run it locally

The Firebase SDK is loaded as an ES module, which browsers refuse to load from file://. Serve the folder with any local web server instead:

git clone https://github.com/TobiasKlanert/Join.git
cd Join
python3 -m http.server 8000

Then open http://localhost:8000. The app connects to the same Firebase project as the live demo, so the guest login is the easiest way to look around.

Project structure

Join/
├── assets/      # Images, fonts and templates
├── html/        # Subpages: summary, board, add task, contacts, legal pages
├── js/          # Application logic, Firebase setup in js/firebase.js
├── styles/      # Stylesheets
├── index.html   # Login page and entry point
└── script.js    # Shared scripts

Contact

• Portfolio: tobias-klanert.de
• LinkedIn: Tobias Klanert
• GitHub: @TobiasKlanert

License

No license is granted. The code is public so you can see how Join is built. The design belongs to Developer Akademie GmbH, the code to the project team.