https://github.com/ahmedtrb/project-management-web-app
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.
https://github.com/ahmedtrb/project-management-web-app
nextjs postgresql prisma project-management topological-sort typescript
Last synced: about 1 month ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/ahmedtrb/project-management-web-app
- Owner: AhmedTrb
- Created: 2025-01-18T17:27:42.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2025-03-06T13:27:17.000Z (8 months ago)
- Last Synced: 2025-03-06T13:29:20.777Z (8 months ago)
- Topics: nextjs, postgresql, prisma, project-management, topological-sort, typescript
- Language: TypeScript
- Homepage: https://project-management-web-app-lilac.vercel.app
- Size: 2.97 MB
- Stars: 6
- Watchers: 1
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Project-Management-web-app
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.
***
### Insipiration :
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](https://drive.google.com/file/d/1nH3_EfDSxEBc-k4HovFmLGog7LNgxCe4/view?usp=sharing)
[Live Demo website](https://project-management-web-app-lilac.vercel.app)
- email : test@gmail.com
- password : 1111
***
***
### Overview :
Prerequisites :
Node.js (v16+ recommended)
PostgreSQL (configured in .env file)
Prisma ORM
- [Features](#1-features)
- [Project Structure](#2-project-structure-)
- [Project setup](#3-setup-)
- [Database setup](#4-database-setup-)
***
### 1. Features
- 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.
### 2. Project Structure :
```bash
# Frontend folder
client/
├── .next/
├── node_modules/
├── public/
├── src/
│ ├── app/
├── .env
# backend folder
server/
├── prisma/
│ ├── migrations/
│ └── schema.prisma
├── src/
│ ├── controllers/
│ ├── middleware/
│ ├── routes/
│ └── utils/
├── .env
```
### 3. Setup :
```bash
# Clone the repository
git clone https://github.com/AhmedTrb/Project-Management-web-app.git
```
Install npm packages :
```bash
cd project-management-platform
```
**Install dependencies**
```bash
cd client
npm install --legacy-peer-deps
```
```bash
cd server
npm install
```
Create an environment variables file :
**Frontend :**
```bash
NEXT_PUBLIC_API_BASE_URL=http://localhost:8000
```
**Backend .env file :**
```
PORT=8000
DATABASE_URL=postgresql://postgres:@localhost:5432/?schema=public
JWT_ACCESS_TOKEN_SECRET=1234567890
JWT_REFRESH_TOKEN_SECRET=0987654321
STATUS=development
FRONTEND_URL=http://localhost:3000
```
### 4. Database setup :
**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
```bash
cd server
npx prisma migrate dev --name init
```
### 5. Running the project :
```bash
cd client
npm run dev
```
```bash
cd server
npm run dev
```
### Screenshots :
#### Home Page
#### Project Page (Board view) :
#### Project Page (Graph view) :
#### Members Page :
#### Gantt View :
#### Team Messaging :
