🚀 TaskFlow

A full-stack task and project management platform built during my 3-month internship at NTT DATA.

TaskFlow is a web-based project and task management application designed to help teams organize projects, assign tasks, monitor progress, and collaborate efficiently.

The application provides user authentication, project and task management, team invitations, notifications, search functionality, and a containerized MongoDB database.

---

📌 Overview

TaskFlow allows users to manage their work through a centralized dashboard.

Users can:

• 🔐 Create an account and securely log in
• 📊 Access a personal dashboard
• 👥 Build teams and invite other registered users
• 📁 Create and manage projects
• 📝 Create and manage tasks
• 🔔 Receive notifications for team invitations
• 🔎 Search and filter tasks
• 📅 Set optional deadlines for projects and tasks
• 📈 Track project and task status

---

✨ Features

🔐 Authentication

TaskFlow includes a complete authentication system.

• User registration
• User login
• Password hashing using bcryptjs
• JWT-based authentication
• Protected application routes
• Persistent authentication using browser storage

---

📊 Dashboard

After authentication, each user is redirected to their personal dashboard.

The dashboard provides an overview of:

• Teams
• Projects
• Tasks
• Activity and progress
• Notifications

Tip

Users only have access to the projects and tasks associated with them.

---

👥 Team Management

Team creators can invite other registered users to participate in their team as members. Users are added to teams using the User ID they can copy from their profile.

The invitation system allows users to:

• See the team owner name and other members
• See the project of the team they are in it

And just the team owner who can edit on that team.

---

📁 Project Management

Users can create and manage projects.

Each project can contain:

• Project name
• Description
• Optional deadline
• Status
• Associated team (if it's not a personal project)
• Tasks

Supported project statuses include:

• Active
• Paused
• Finished

Any team member can create project Assigned to that team. And just the project creature and team owner (if the project is a team project and not personale) can edit on that project.

---

📝 Task Management

Tasks can be created and assigned to team members.

Each task contains information such as:

• Task name
• Description
• Assigned member
• Optional deadline
• Status
• Associated project

Any memeber of the team can assign task to an other team member Just the creatre of the task and the creature of the project this task is part of it and the creature of the team that project is in it can edit on the task. The task dashboard also provides search and filtering functionality to quickly find tasks within projects. And every one can see just the tasks assigned to him and task he create.

---

🔔 Notifications

TaskFlow includes a notification system for user interactions such as team invitations.

Notifications allow users to stay informed about important events related to their projects and teams.

---

🗄️ Database

TaskFlow uses MongoDB to store application data, including:

• Users
• Projects
• Tasks
• Teams
• Notifications

MongoDB runs inside a Docker container as part of the application's containerized environment.

---

🏗️ Architecture

TaskFlow follows a client-server architecture:

                    ┌─────────────────────┐
                    │       Browser       │
                    │   React Frontend    │
                    └──────────┬──────────┘
                               │
                               │ HTTP / REST API
                               ▼
                    ┌─────────────────────┐
                    │      Express.js     │
                    │       Backend       │
                    └──────────┬──────────┘
                               │
                               │ Mongoose
                               ▼
                    ┌─────────────────────┐
                    │       MongoDB       │
                    │      Database       │
                    └─────────────────────┘

The application can be fully containerized using Docker.

---

🛠️ Tech Stack

Frontend

• HTML5
• CSS3
• JavaScript
• Nginx

Backend

• Node.js
• Express.js
• REST API
• JWT
• bcryptjs

Database

• MongoDB
• Mongoose

DevOps / Tools

• Git
• GitHub
• Docker

---

📂 Project Structure

TaskFlow/
│
├── frontend/
│   ├── pages/
|   |     ├── scripts/
|   |     ├── styles/
|   |     ├── src/
|   |     ├── dashboard.html
|   |     └── login.htm
│   ├── nginx.conf
│   └── Dockerfile
│
├── backend/
│   ├── models/
│   ├── routes/
│   ├── middleware/
│   ├── config/
|   ├── package.json
|   └── Dockerfile
│
├── docker-compose.yml
├── .env
├── .gitignore
└── README.md

The exact structure may vary depending on the current version of the project.

---

🐳 Running with Docker

Prerequisites

Make sure you have installed:

• Docker
• Git

Clone the repository:

git clone https://github.com/Oanekrif/TaskFlow.git

Move into the project directory:

cd TaskFlow

Start the application:

docker compose up --build

The containers will start the required services, including:

• Frontend
• Backend
• MongoDB

To stop the application:

docker compose down

---

🔑 Environment Variables

Create the required environment configuration for the backend.

Example:

PORT=5000
MONGO_URI=mongodb://mongodb:27017/taskflow
JWT_SECRET=your_secret_key

🔌 API

The backend exposes REST API endpoints for managing:

Authentication
Users
Projects
Tasks
Teams
Notifications

Example API structure:

/api/auth
/api/users
/api/projects
/api/tasks
/api/teams
/api/notifications

---

🔒 Security

TaskFlow implements several security mechanisms:

• Password hashing with bcryptjs
• JWT authentication
• Protected API routes
• Authentication middleware
• Environment variables for sensitive configuration
• User-based access control

Passwords are never stored in plain text.

---

🎯 Project Objectives

The main objectives of TaskFlow were to:

• Develop a complete full-stack web application
• Implement a frontend architecture
• Design and consume REST APIs
• Implement authentication and authorization
• Work with a NoSQL database
• Implement relationships between users, teams, projects, and tasks
• Containerize the application using Docker
• Apply software development concepts in a professional environment

---

💼 Internship

TaskFlow was developed as part of my 3-month internship at NTT DATA.

During the project, I worked on different aspects of full-stack development, including:

• Frontend development
• Backend development
• REST API design
• Authentication
• Database design
• Docker containerization
• API integration
• Debugging and troubleshooting

The project allowed me to apply software engineering concepts in a professional environment and gain practical experience developing and deploying a complete web application.

---

📚 What I Learned

Working on TaskFlow helped me strengthen my understanding of:

• Full-stack web development
• React.js
• Node.js and Express.js
• REST APIs
• MongoDB and Mongoose
• JWT authentication
• Password security
• Docker and Docker Compose
• Nginx
• Git and GitHub
• Debugging and problem solving
• Software architecture

---