Join: Kanban Task Management App

Join is a responsive Kanban task management application that helps users organize, assign, and track work through an intuitive drag-and-drop board. It was built as a collaborative team project during the Fullstack/AI Software Developer program at Developer Akademie.

About the Project

The goal of Join was to build a production-style task management application from scratch. The project covers account and guest authentication, contact management, task assignment, and a database-backed Kanban board. It focuses on reusable Angular components, reactive state management, responsive design, accessibility, automated testing, and a collaborative Git workflow.

Features

• 🔐 Authentication: create an account, sign in with email and password, or use an isolated guest session
• 🧪 Demo Data: new accounts and guest sessions start with editable sample contacts and tasks
• 🗂️ Drag-and-Drop Board: search, reorder, and move tasks between status columns using drag and drop or mobile controls
• ✏️ Task Management: create, edit, and delete tasks with descriptions, priorities, due dates, categories, and subtasks
• 👥 Task Assignment: assign one or more contacts to a task
• 📇 Contact Management: create, edit, select, and remove contacts
• 📊 Summary Dashboard: view task metrics, urgent deadlines, and a personalized greeting
• 📱 Responsive Design: use the application across desktop, tablet, touch-laptop, and mobile layouts
• ☁️ Persistent Storage: store accounts, profiles, contacts, tasks, assignments, and subtasks with Supabase

Tech Stack

Frontend

• Angular standalone components and Signals
• Angular Router and Signal Forms
• Angular CDK drag and drop
• TypeScript, RxJS, HTML, and SCSS

Backend and Database

• Supabase Auth for regular and anonymous guest sessions
• PostgreSQL for profiles, contacts, tasks, assignments, and subtasks
• Versioned SQL migrations, database functions, and atomic RPC operations
• Row Level Security policies for user-owned data

Testing and Development Tools

• Vitest and jsdom for unit and component tests
• Prettier for consistent source formatting
• Git and GitHub for version control and team collaboration

Hosting

• Hetzner Webhosting
• Apache rewrite rules for Angular client-side routes
• Supabase-hosted authentication and PostgreSQL database

Team

This project was built collaboratively by:

• Tobias Illner — Supabase integration and migrations, authentication and guest sessions, data models and services, task creation, application layout, testing, and technical documentation
• Kamyar Zamanfar — Angular project foundation, shared UI components, sign-up, contact management, task forms, task details and editing, responsive behavior, and UI refinement
• Maik Radke — Kanban board, search and drag-and-drop behavior, Summary dashboard, sidebar and navigation, routing, static-page foundations, and responsive improvements
• Valerij Markov — initial login and session protection, application header, and mobile readability improvements for static content pages

Getting Started

This project uses Angular CLI 22.1.4 and npm.

Install Dependencies

npm install

Start the Development Server

npm start

Open http://localhost:4200/ in your browser. The application reloads automatically when source files change.

Build for Production

npm run build

Build artifacts are stored in the dist/ directory.

Run Unit Tests

npm test -- --watch=false

Format the Source Code

npm run format

License

This non-commercial project was created for educational purposes as part of the Developer Akademie curriculum.