Join
Kanban-style project board for visual task management and collaboration.
JavaScriptHTMLCSSFirebase
🧩 Visual Kanban board for organizing tasks and workflows
Join lets you create tasks, assign them to contacts, and drag them across a Kanban board, so you always see what's pending, in progress, and done at a glance.
🔍 What is Join?
Join is a task manager built with vanilla JavaScript, HTML, and CSS. It provides a drag-and-drop Kanban board where tasks move between different stages. Each task can have details such as description, due date, priority, category, and assigned contacts. The app was created as a team project and focuses on solid fundamentals.
🧩 Key Features
🧪 Tech Stack Overview
- JavaScript - Vanilla JS powers the entire app: drag-and-drop interactions, task creation flows, board filtering, and state handling without a framework.
- HTML - Semantic multi-page structure for login, board, add-task, contacts, summary, and help views, forming the backbone of the UI.
- CSS - Custom styling for the Kanban board, modals, responsive layout, and hover/focus states, giving the app a polished, app-like feel.
- Firebase - Backend for persisting tasks, users, and board data with real-time syncing between clients.
⚙️ Getting Started
Clone the repository
git clone https://github.com/alessandro-arg/join && cd joinInstall dependencies
npm installBuild and run locally
npm run build && npm run serve🧠 Challenges & Learnings
- Modeling tasks, statuses, categories, and contacts upfront makes later features like filtering and searching much easier to implement.
- Implementing drag-and-drop with the native HTML5 API requires careful handling of indices, drop zones, and visual feedback states.
- Keeping a single source of truth for task state and re-rendering from that state avoids subtle DOM desync bugs.
- Splitting logic into smaller script modules (board, add-task, contacts, summary) keeps a growing vanilla JS codebase maintainable.
- Working in a 5-person team reinforced the importance of Git workflows, consistent coding conventions, and clear UI/UX decisions.
📸 See it in Action
Want to chat about this project? Let’s chat.