This project is a task management and visualization tool designed to help users create, organize, and manage tasks within a project. The tool leverages a visual graph-based representation to display task dependencies.

This project was inspired by a university course on Graph Theory, where I explored topological sorting to determine task degrees and optimize project visualization. Currently, I use topological sorting in this project to:

• Calculate the degree of each task based on its dependencies.
• Determine the positioning of tasks in the graph view.
• Improve the visualization of task dependencies for better project planning.
• Reschedule tasks dynamically – When a task is delayed or updated, its dependent tasks are automatically adjusted to maintain a consistent and valid project timeline, ensuring all constraints are respected.

VIDEO DEMO

Live Demo website

• email : test@gmail.com
• password : 1111

Prerequisites : Node.js (v16+ recommended) PostgreSQL (configured in .env file) Prisma ORM

• Features
• Project Structure
• Project setup
• Database setup

• Project & Task Management – Create and manage projects, assign tasks, and track progress.
• Graph View (DAG Representation): Visualize project dependencies as a Directed Acyclic Graph (DAG) using topological sorting.
• Team Collaboration: Assign team members to projects, manage roles.
• Task Rescheduling (Gantt View) – Reschedule tasks by dragging them on a Gantt chart. Updates automatically propagate to dependent tasks.
• Real-Time Messaging – Collaborate with your team using built-in messaging within each project workspace.
• Authentication & Authorization : Secure login with jwt Refresh and Access tokens
• Responsive & Modern UI : Designed with TailwindCSS for a clean and intuitive user experience.

# Frontend folder client/ ├── .next/ ├── node_modules/ ├── public/ ├── src/ │ ├── app/ ├── .env # backend folder server/ ├── prisma/ │ ├── migrations/ │ └── schema.prisma ├── src/ │ ├── controllers/ │ ├── middleware/ │ ├── routes/ │ └── utils/ ├── .env

# Clone the repository git clone https://github.com/AhmedTrb/Project-Management-web-app.git

Install npm packages :

cd project-management-platform

Install dependencies

cd client npm install --legacy-peer-deps

cd server npm install

Create an environment variables file :

Frontend :

NEXT_PUBLIC_API_BASE_URL=http://localhost:8000 

Backend .env file :

PORT=8000 DATABASE_URL=postgresql://postgres:<Database password>@localhost:5432/<db name>?schema=public JWT_ACCESS_TOKEN_SECRET=1234567890 JWT_REFRESH_TOKEN_SECRET=0987654321 STATUS=development FRONTEND_URL=http://localhost:3000 

For local database:

• install PgAdmin

• create a new postgres database

• save database name and password

• update DATABSE_URL in .env file in server directory

• create database with the commands :

• Or use Neon as a database provider

  cd server npx prisma migrate dev --name init

 cd client npm run dev

 cd server npm run dev