Team Task Manager

Team Task Manager is a full-stack collaboration and project management application with backend-enforced role-based access control, project membership, task assignment, progress tracking, and dashboard reporting.

Built with React, Node.js, Express, PostgreSQL, Prisma, JWT authentication, Render, and Supabase.

---

Live Demo

• 🌐 Live App: https://team-task-manager-fullstack-bcji.onrender.com
• 📂 GitHub Repository: https://github.com/SintuMishra/team-task-manager-fullstack
• 🎥 Demo Video: https://drive.google.com/file/d/1SIiEe_wTVQSiPvzwr-ai6PXUh2nTZ6lf/view?usp=sharing

---

Overview

Team Task Manager provides a structured workspace for managing projects, team members, tasks, priorities, due dates, and project progress.

The application focuses on backend authorization and data integrity rather than frontend-only restrictions. Access to projects and tasks is validated on the server, with permissions enforced for administrators, project members, and task assignees.

---

Approach

This project focuses on backend correctness and real-world system design rather than just UI.

Key considerations:

• Enforcing role-based access control at the backend level
• Designing proper relationships between users, projects, and tasks
• Ensuring predictable API responses and validation
• Handling edge cases such as empty dashboards and unauthorized access

---

Key Features

• User signup, login, logout, and session handling

• JWT-based authentication with bcrypt password hashing

• Backend-enforced RBAC for ADMIN and MEMBER roles

• Project creation, editing, and deletion (Admin only)

• Project member management via email

• Task creation, assignment, editing, and deletion

• Task status updates by assigned members

• Dashboard with:

  • Total projects and tasks
  • Task status breakdown
  • Overdue task tracking
  • Recent tasks and project progress

• Search and filtering for projects and tasks

• Responsive UI (desktop, tablet, mobile)

• Render deployment with health checks

---

Roles and Permissions

Capability	Admin	Member
View dashboard	Yes	Yes
View accessible projects	Yes	Yes
Create projects	Yes	No
Edit/delete managed projects	Yes	No
Add/remove project members	Yes	No
Create and assign tasks	Yes	No
Edit/delete managed tasks	Yes	No
Update assigned task status	Yes	Yes

Members can access only projects they own or belong to. Task status updates are restricted to project managers or the assigned user.

---

Tech Stack

Layer	Tools
Frontend	React, Vite, React Router, Tailwind CSS
Backend	Node.js, Express.js
Database	PostgreSQL
ORM	Prisma
Authentication	JWT, bcrypt
Tooling	Nodemon, Concurrently
Deployment	Render + Supabase

---

Architecture Overview

• client/ → React frontend (SPA)
• server/ → Express API + Prisma ORM
• API endpoints under /api
• Backend enforces authentication and RBAC via middleware
• In production, Express serves both API and frontend

---

Folder Structure

team-task-manager-fullstack/
├── client/
├── server/
├── submission-assets/
└── README.md

---

Database Design

Models

Model	Purpose
User	Stores account identity, credentials, and role
Project	Stores project details and ownership
ProjectMember	Links users to projects
Task	Stores task status, priority, due date, and assignment

Enums

• Role: ADMIN, MEMBER
• TaskStatus: TODO, IN_PROGRESS, DONE
• Priority: LOW, MEDIUM, HIGH

Relationships

• One user can own multiple projects
• One project can contain multiple members
• One project can contain multiple tasks
• One user can be assigned multiple tasks

---

API Endpoints

Area	Method	Endpoint
Auth	POST	/api/auth/signup
Auth	POST	/api/auth/login
Auth	GET	/api/auth/me
Projects	GET	/api/projects
Projects	POST	/api/projects
Tasks	POST	/api/projects/:id/tasks
Tasks	PATCH	/api/tasks/:id/status
Dashboard	GET	/api/dashboard
Health	GET	/api/health

---

Environment Variables

Required (Production)

DATABASE_URL=postgresql://...
DIRECT_URL=postgresql://...
JWT_SECRET=replace-with-a-strong-random-secret
FRONTEND_URL=https://team-task-manager-fullstack-bcji.onrender.com
NODE_ENV=production

For production, DATABASE_URL uses the Supabase transaction pooler and DIRECT_URL uses the Supabase session pooler for Prisma migration traffic.

Never commit production credentials.

---

Local Setup

npm install
cp .env.example .env
cp server/.env.example server/.env
cp client/.env.example client/.env

npm run prisma:generate
npm run prisma:migrate
npm run seed
npm run dev

---

Demo Credentials

Admin

• Email: admin@example.com
• Password: admin123

Member

• Email: member@example.com
• Password: member123

---

Screenshots

Login

Dashboard

Projects

Project Details

---

Deployment (Render + Supabase)

Current deployment architecture:

1. React/Vite frontend is built for production
2. Express serves both the frontend and REST API
3. Render hosts the Node.js web service
4. Supabase provides the PostgreSQL database
5. Prisma manages the database schema and migrations
6. /api/health provides deployment health verification

---

Testing Checklist

• Signup/login works
• RBAC enforced
• Admin actions restricted
• Member restrictions applied
• Dashboard loads correctly
• Tasks update correctly
• API returns valid responses

---

Notes

• Prisma migrations must run before first use
• Seed script inserts demo users and data
• FRONTEND_URL is used for CORS
• Render automatically assigns PORT

---

Author

• Name: Sintu Mishra
• GitHub: https://github.com/SintuMishra

---