ProjectGrid Management Application

A cloud-based Project & Task Management platform built with the MERN Stack (MongoDB, Express, React, Node.js) and modern tooling for scalable, secure, and user-friendly collaboration.

---

✨ Showcase

[Watch the project demonstration video]

✨ Features

🌐 General

• Fully responsive design – optimized for desktop, tablet, and mobile
• Modern Homepage with introduction, features, and entry point to the application

🔐 Authentication & Security

• JWT-based Authentication & Authorization for session management
• Email Verification (via SendGrid)
• Two-Factor Authentication (2FA) with OTP (One-Time Password)
• OTP expiry timer for secure, time-limited login sessions
• Forgot & Reset Password functionality
• Zod validation for robust input handling
• Secure role-based access control for Workspaces & Projects

👥 Workspaces & Collaboration

• Create Workspaces and invite members via email or link

• Assign roles (Member, Admin, viewer)

• Manage workspace settings (transfer ownership, delete workspace, etc.) in Settings page

• View all members with search & filter functionality

📂 Projects & Tasks

• Create and manage Projects under Workspaces
• Add Tasks with the following capabilities:
  • Subtasks
  • Comments
  • Watchers
  • Archive / Unarchive
  • Delete tasks
• Role-based permissions for managing Projects & Tasks
• Manage project settings (Update name, proirity and delete project, etc.) in Settings page

📜 Activity Log

• View all activity history within a workspace
• Track task creation, updates, deletions, comments, watchers, and archive actions
• Provides a transparent audit trail for better collaboration

📊 Dashboard & Insights

• Visual analytics with:
  • Line charts
  • Pie charts
  • Bar charts
• Recent & upcoming projects overview

✅ My Tasks

• View all assigned tasks
• Filter, Pagination and search functionality
• List view and Board view for tasks

🗂 Archive

• View all archived tasks
• Search, filter, and restore (unarchive) tasks

🙍 Profile Management

• Update profile details (name, avatar, etc.)
• Enable / disable 2FA Auth login
• Update password

---

🛠️ Tech Stack

Frontend

Backend

Security & Validation

---

🚀 Deployment & Cloud Setup

• Frontend → Vercel (auto-deployment from GitHub)
• Backend → Render (scalable cloud hosting)
• Fully integrated for production-ready workflows

---

⚡ Getting Started & Collaboration

Run Locally

1. Clone the repository:

git clone https://github.com/kaziragib18/ProjectGrid-MERN-Stack-Project-Management-App.git

2. Navigate into the project:

cd ProjectGrid-MERN-Stack-Project-Management-App

3. Install dependencies in both backend and froentend folder:

npm install

4. Set up environment variables using .env file:

MONGO_URI=your_mongodb_connection_string
JWT_SECRET=your_jwt_secret
SEND_GRID_API_KEY=your_sendgrid_api_key
FRONTEND_URL=http://localhost:5173
PORT=5000
ARCJET_KEY=Your_key
FROM_EMAIL=Registered_email

5. Run the development server:

npm run dev

---

🐳 Run with Docker

ProjectGrid is fully Dockerized for easier local development and testing. You can spin up the entire stack (frontend + backend) with one command using Docker Compose.

📦 Requirements

Make sure you have these installed:

Docker

Docker Compose (usually bundled with Docker Desktop)

🗂️ Folder Structure:

ProjectGrid-MERN-Stack-Project-Management-App/
│
├── backend/
│   ├── Dockerfile
│   ├── .dockerignore
│   └── .env
│
├── frontend/
│   ├── Dockerfile
│   ├── .dockerignore
│   └── .env
│
├── docker-compose.yml
└── README.md

---

⚙️ Environment Variables backend/.env

PORT=5000 MONGODB_URI=your_mongodb_connection_string JWT_SECRET=your_jwt_secret SEND_GRID_API_KEY=your_sendgrid_api_key ARCJET_KEY=your_arcjet_key FROM_EMAIL=your_verified_sendgrid_email FRONTEND_URL=http://localhost:3000

frontend/.env

VITE_API_URL=http://backend:5000/api-v1

🚀 Run the App with Docker

In the root directory, run:

docker-compose up --build

---

🔄 Rebuilding After Code Changes

To rebuild containers after making changes to Dockerfiles or dependencies:

docker-compose down docker-compose up --build

---

Collaboration

Feel free to fork the repository and create a feature branch for contributions.

Submit a pull request for review.

Add issues for bugs or feature requests.

⭐ If you like this project, don’t forget to give it a star on GitHub!