Skip to content

README.md

Latest commit

 

History

History
869 lines (640 loc) · 18 KB

README.md

File metadata and controls

869 lines (640 loc) · 18 KB
Raw

📋 CodeAlpha Project Management Tool

A full-stack Project Management Tool built as Task 3 for the CodeAlpha Full Stack Development Internship.

The application provides a collaborative workspace where users can create and manage projects, add team members, assign tasks, organize work through a Kanban board, communicate through task comments, receive in-app notifications, and monitor project progress through reports.

✨ Features

🔐 Authentication

  • User registration
  • User login
  • JWT-based authentication
  • Password hashing using PHP password_hash()
  • Protected API endpoints
  • Authentication state management
  • Automatic session expiration through JWT

📊 Project Management

  • Create projects
  • Edit projects
  • Delete projects
  • Project descriptions
  • Project status management
  • Project priority management
  • Project due dates
  • Project ownership
  • Project-level authorization

👥 Team Collaboration

  • Add members to projects
  • Remove project members
  • View project members
  • Assign tasks to project members
  • Owner/member roles
  • Collaborative project workspace
  • Member authorization

✅ Task Management

  • Create tasks
  • Edit tasks
  • Delete tasks
  • Assign tasks to users
  • Task descriptions
  • Task priorities
  • Task due dates
  • Task status management
  • Kanban board
  • Drag-and-drop task organization

💬 Task Collaboration

  • Add comments to tasks
  • View task comments
  • Delete your own comments
  • Task-based communication
  • Comment ownership

🔔 Notifications

  • Task assignment notifications
  • Project membership notifications
  • Comment notifications
  • Notification center
  • Read/unread notification state
  • Direct navigation from notifications to related project boards

📈 Reports

  • Project status breakdown
  • Task status breakdown
  • Overall task completion rate
  • Personal assigned-task summary
  • Project progress monitoring

🛠️ Tech Stack

Layer Technology
Frontend React 18
Frontend Routing React Router
Build Tool Vite
Styling CSS
Backend PHP 8
API REST API
Database MySQL / MariaDB
Database Access PDO
Authentication Custom JWT (HS256)
Password Security PHP password_hash()
Web Server Apache
Local Environment XAMPP
Package Manager npm

🏗️ Application Architecture

┌──────────────────────────────────────────┐
│              React Frontend              │
│                                          │
│ Dashboard │ Board │ Reports             │
│ Projects  │ Tasks │ Comments             │
│ Notifications │ Authentication           │
└────────────────────┬─────────────────────┘
                     │
                     │ HTTP / REST API
                     │ JSON + JWT
                     ▼
┌──────────────────────────────────────────┐
│               PHP Backend                │
│                                          │
│ Authentication │ Projects               │
│ Tasks │ Comments │ Notifications         │
│ Reports │ Authorization                  │
└────────────────────┬─────────────────────┘
                     │
                     │ PDO
                     ▼
┌──────────────────────────────────────────┐
│             MySQL / MariaDB              │
│                                          │
│ Users                                    │
│ Projects                                 │
│ Project Members                          │
│ Tasks                                    │
│ Comments                                 │
│ Notifications                            │
└──────────────────────────────────────────┘

📁 Project Structure

CodeAlpha_ProjectManagementTool/
│
├── backend/
│   ├── api/
│   │   ├── auth/
│   │   │   ├── login.php
│   │   │   ├── register.php
│   │   │   └── me.php
│   │   │
│   │   ├── comments/
│   │   │   ├── index.php
│   │   │   └── delete.php
│   │   │
│   │   ├── notifications/
│   │   │   └── index.php
│   │   │
│   │   ├── projects/
│   │   │   ├── index.php
│   │   │   ├── detail.php
│   │   │   ├── update.php
│   │   │   └── members.php
│   │   │
│   │   ├── reports/
│   │   │   └── index.php
│   │   │
│   │   └── tasks/
│   │       ├── index.php
│   │       ├── update.php
│   │       └── delete.php
│   │
│   ├── config/
│   │   ├── cors.php
│   │   └── database.php
│   │
│   ├── database/
│   │   └── schema.sql
│   │
│   ├── utils/
│   │   ├── Jwt.php
│   │   └── authorize.php
│   │
│   └── .htaccess
│
├── docs/
│   ├── QA_CHECKLIST.md
│   └── screenshots/
│       ├── login.png
│       ├── register.png
│       ├── dashboard.png
│       ├── create-project.png
│       ├── project-members.png
│       ├── kanban-board.png
│       ├── task-details.png
│       ├── comments.png
│       ├── notifications.png
│       └── reports.png
│
├── frontend/
│   ├── src/
│   │   ├── api/
│   │   │   └── client.js
│   │   ├── components/
│   │   ├── context/
│   │   ├── pages/
│   │   ├── styles/
│   │   └── utils.js
│   │
│   ├── index.html
│   ├── package.json
│   ├── package-lock.json
│   └── vite.config.js
│
├── .gitignore
└── README.md

🗄️ Database

The application uses a relational MySQL/MariaDB database.

Main Tables

Table Purpose
users User accounts and authentication data
projects Project information and ownership
project_members Project/user membership and roles
tasks Project tasks and assignments
comments Task-based communication
notifications User notifications

Relationships

Users
 │
 ├──────────────┐
 │              │
 ▼              ▼
Projects    Notifications
 │
 ▼
Project Members
 │
 ▼
Tasks
 │
 ▼
Comments

The database schema is provided in:

backend/database/schema.sql

The schema contains the required database tables and relationships.

It does not include demo accounts or test data.

🚀 Getting Started

1. Prerequisites

Make sure the following are installed:

  • PHP 8.x
  • XAMPP
  • Apache
  • MySQL / MariaDB
  • Node.js
  • npm
  • Git

Check the installed versions:

php --version
node --version
npm --version

2. Clone the Repository

git clone https://github.com/MBen213/CodeAlpha_ProjectManagementTool.git
cd CodeAlpha_ProjectManagementTool

3. Start XAMPP

Open the XAMPP Control Panel and start:

Apache
MySQL

4. Place the Project in XAMPP

The project should be located inside the Apache document root.

For a standard XAMPP installation:

C:\xampp\htdocs\CodeAlpha_ProjectManagementTool

5. Create the Database

Open phpMyAdmin:

http://localhost/phpmyadmin

Create a database named:

codealpha_pmt

Then import:

backend/database/schema.sql

The schema creates the required tables and relationships.

6. Configure the Backend

The backend supports local configuration through:

backend/config/config.local.php

This file is intentionally not committed to Git because it may contain local credentials and secrets.

The default XAMPP database configuration is:

Host: localhost
Database: codealpha_pmt
Username: root
Password: empty

If your MySQL credentials are different, configure them in your local configuration file.

Important

Do not commit:

backend/config/config.local.php

This file is ignored by .gitignore.

7. Configure CORS

The backend currently allows the Vite development server:

http://localhost:5173

The configuration is located in:

backend/config/cors.php

If you use a different frontend origin, update the allowed origin accordingly.

8. Start the Frontend

Open a terminal inside:

frontend/

Install dependencies:

npm install

Start the development server:

npm run dev

The frontend will normally be available at:

http://localhost:5173

9. Backend API

The PHP backend is served through Apache.

The API base URL used by the frontend is configured in:

frontend/src/api/client.js

Default API base URL:

http://localhost/CodeAlpha_ProjectManagementTool/backend/api

If the project is installed under a different directory, update API_BASE accordingly.

🏭 Production Build

The frontend can be built using:

npm run build

The production build is generated in:

frontend/dist/

The production build has been successfully verified with Vite.

Example build result:

vite v5.4.21 building for production...
✓ 51 modules transformed.
✓ built successfully

The dist/ directory is excluded from Git through .gitignore.

🔐 Authentication Flow

Register
   ↓
Password Hashing
   ↓
User Account
   ↓
Login
   ↓
JWT Token
   ↓
Authorization Header
   ↓
Protected REST API
   ↓
Authorized Resources

JWT tokens are signed using HS256 and include an expiration time.

Passwords are hashed using PHP's built-in password hashing functionality.

📡 REST API

Authentication

Method Endpoint Description Access
POST /api/auth/register.php Register a user Public
POST /api/auth/login.php Authenticate a user Public
GET /api/auth/me.php Get current user Authenticated

Projects

Method Endpoint Description Access
GET /api/projects/index.php Get projects Authenticated
POST /api/projects/index.php Create project Authenticated
GET /api/projects/detail.php?id={id} Get project details Authorized
PUT /api/projects/update.php?id={id} Update project Authorized
DELETE /api/projects/update.php?id={id} Delete project Owner
POST /api/projects/members.php Add project member Owner
DELETE /api/projects/members.php?project_id={id}&user_id={id} Remove member Owner

Tasks

Method Endpoint Description Access
POST /api/tasks/index.php Create task Authorized
PUT /api/tasks/update.php?id={id} Update task Authorized
DELETE /api/tasks/delete.php?id={id} Delete task Authorized

Comments

Method Endpoint Description Access
GET /api/comments/index.php?task_id={id} Get task comments Authorized
POST /api/comments/index.php Add comment Authorized
DELETE /api/comments/delete.php?id={id} Delete comment Comment Owner

Notifications

Method Endpoint Description Access
GET /api/notifications/index.php Get notifications Authenticated
PUT /api/notifications/index.php Mark notifications as read Authenticated

Reports

Method Endpoint Description Access
GET /api/reports/index.php Get project/task reports Authenticated

🔄 Project Workflow

Create Account
      ↓
Login
      ↓
Create Project
      ↓
Add Team Members
      ↓
Create Tasks
      ↓
Assign Tasks
      ↓
Manage Tasks
      ↓
Kanban Board
      ↓
Drag & Drop
      ↓
Task Comments
      ↓
Notifications
      ↓
Project Reports

📋 Kanban Board

The application includes a Kanban-style board with four task statuses:

┌─────────────┐
│    TO DO    │
├─────────────┤
│   Task 1    │
│   Task 2    │
└─────────────┘

┌─────────────┐
│ IN PROGRESS │
├─────────────┤
│   Task 3    │
└─────────────┘

┌─────────────┐
│    REVIEW   │
├─────────────┤
│   Task 4    │
└─────────────┘

┌─────────────┐
│     DONE    │
├─────────────┤
│   Task 5    │
└─────────────┘

Tasks can be moved between columns using drag and drop, allowing users to visually track project progress.

🧪 Testing & QA

A dedicated QA checklist is included in:

docs/QA_CHECKLIST.md

Authentication

  • User registration
  • User login
  • Invalid login rejection
  • JWT authentication
  • Protected routes
  • Logout

Projects

  • Create project
  • Edit project
  • Delete project
  • Project status
  • Project priority
  • Project due date

Team Management

  • Add project member
  • Remove project member
  • View project members
  • Assign tasks to members
  • Owner/member authorization

Tasks

  • Create task
  • Edit task
  • Delete task
  • Assign task
  • Change priority
  • Change due date
  • Change status
  • Kanban drag & drop

Comments

  • Add comment
  • View comments
  • Delete own comment
  • Unauthorized comment deletion rejected

Notifications

  • Task assignment notification
  • Project membership notification
  • Comment notification
  • Read/unread state
  • Notification navigation

Reports

  • Project statistics
  • Task statistics
  • Status breakdown
  • Completion rate
  • Personal task summary

📸 Screenshots

The following screenshots demonstrate the main application workflow and user interface.

🔐 Login

Login

📝 Register

Register

📊 Dashboard

Dashboard

➕ Create Project

Create Project

👥 Project Members

Project Members

📋 Kanban Board

Kanban Board

📝 Task Details

Task Details

💬 Task Comments

Comments

🔔 Notifications

Notifications

📈 Reports

Reports

🔒 Security

The project implements several security practices:

  • Password hashing using PHP password_hash()
  • JWT-based authentication
  • Protected REST API endpoints
  • Authorization middleware
  • Project-level access control
  • Owner/member roles
  • Comment ownership checks
  • PDO prepared statements
  • CORS configuration
  • Apache authorization-header forwarding

⚠️ Production Security

The current project is configured for local development and internship demonstration.

Before production deployment:

  • Set a strong CODEALPHA_JWT_SECRET
  • Keep config.local.php outside version control
  • Change database credentials
  • Restrict CORS to the production frontend origin
  • Review Apache and PHP production configuration
  • Use HTTPS in production
  • Store secrets using environment variables or a secure server-side configuration

The JWT secret is loaded through the application's configuration layer and is not hardcoded in Jwt.php.

Local secrets can be stored in:

backend/config/config.local.php

This file is excluded from Git.

🔮 Future Improvements

The following features can be added in future versions:

  • Real-time updates using WebSockets
  • Email notifications
  • File attachments
  • Advanced project permissions
  • Activity timeline
  • Search and advanced filtering
  • Team productivity analytics
  • Production deployment
  • Automated tests
  • CI/CD pipeline

🎓 CodeAlpha Internship

This project was developed as part of the:

CodeAlpha Full Stack Development Internship

Task 3 — Project Management Tool

Requirements Covered

  • ✅ Create group projects
  • ✅ Assign tasks
  • ✅ Comment and communicate within tasks
  • ✅ Authentication system
  • ✅ Project boards
  • ✅ Task cards
  • ✅ Backend API
  • ✅ Database integration
  • ✅ Project management
  • ✅ Team collaboration
  • ✅ Notifications
  • ✅ Reports

Bonus

  • ⏳ Real-time WebSocket updates

Real-time WebSocket functionality is not included in the current version.

📌 Project Notes

  • Built for the CodeAlpha Full Stack Development Internship.
  • Frontend built with React and Vite.
  • Backend implemented using plain PHP REST APIs.
  • MySQL/MariaDB is used for persistent data storage.
  • JWT is used for authentication.
  • Passwords are securely hashed before storage.
  • PDO is used for database access.
  • The application is designed for local development using XAMPP.
  • Notifications currently use application-level refresh/polling rather than WebSockets.
  • The production frontend build has been successfully verified with Vite.
  • Local configuration files containing credentials or secrets are excluded from Git.

👨‍💻 Author

Mohamed Ben

Full Stack Web Developer | Software Engineer

📄 License

This project was created for educational and internship purposes as part of the CodeAlpha Full Stack Development Internship.