This project is a web-based task manager and similar to the Kanban system. With Join you can create, organize, and track all tasks for your project. Join was generated using Angular CLI version 19.2.12. The Firebase SDKs for authentication and the firestore database were used to handle all upcoming data.
Live demo: Try Join yourself!
👤 Login and User registration. In order to use the board, you need to log in first. You can either register or use the guest log in account.
📅 Task board. The board represents your projects tasks and contains four default lists: to do, in progress, await feedback and done.
📝 Summary board. The summary gives an overview about all current tasks and the next upcoming date.
📒 Contact page. Here, you can add or edit contacts to collaborate on your projects.
🖼️ Image upload by click or drag & drop. You can upload images for contacts and tasks. For tasks multiple images can be uploaded at once.
🧭 Single-Page Routing for easy navigation.
❓ Help: A dedicated Help page with details about the task manager join and how it works.
⚖️ Impressum & Privacy: A dedicated Impressum page with legal information and privacy details.
💾 All data are stored in the firestore database.
Mobile phone previews
Desktop preview
- Angular version 19.2
- TypeScript
- SCSS for styling
- Firestore Database & Firebase Authentication
- Material Design CDKs for Drag & Drop functionality
- Clone the repository.
- Install dependencies:
npm install- Start the development server:
ng serve- Once the server is running, open your browser and navigate to
http://localhost:4200/. The application will automatically reload whenever you modify any of the source files.
Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
ng generate component component-nameFor a complete list of available schematics (such as components, directives, or pipes), run:
ng generate --helpTo build the project run:
ng buildThis will compile your project and store the build artifacts in the dist/ directory. By default, the production build optimizes your application for performance and speed.
For more information on using the Angular CLI, including detailed command references, visit the Angular CLI Overview and Command Reference page.
- 🖼️ Image upload option for contacts or tasks
- 👤 Manage own user account (image upload, account deletion)
- 🏓 Provide dummy data for guests to tests the application without affecting the database
Created by Michelle Puschkarow.
If you like this project, feel free to give it a ⭐️ or contribute!