📋 Team Task Manager - Full-Stack Web Application

A modern, professional task management system built with React, Node.js/Express, and PostgreSQL. Users can create projects, manage teams, assign tasks, and track progress with an intuitive dashboard.

✨ Key Features

Authentication & Authorization: Secure signup/login with session-based authentication
Project Management: Create, edit, and delete projects with full team collaboration
Task Management: Create tasks with title, description, due dates, and assignees
Task Status Tracking: Tasks can be marked as To Do, In Progress, or Done
Team Collaboration: Add team members to projects and manage roles
Dashboard: Real-time overview of tasks, statistics, and progress tracking
Role-Based Access: Admin (project owner) and Member (team participant) roles
Modern UI: Beautiful, responsive design built with Tailwind CSS and React

🛠️ Tech Stack

Backend

Runtime: Node.js with ES Modules
Framework: Express.js
Database: PostgreSQL
Authentication: Express Sessions + bcryptjs
Validation: Joi
Security: Helmet, CORS
Environment: dotenv

Frontend

Library: React 18 with TypeScript
Routing: React Router v6
Styling: Tailwind CSS
HTTP Client: Axios
Notifications: React Hot Toast
Build: Create React App

📋 Database Schema

Tables

-- users: User accounts with roles
- id (PRIMARY KEY)
- email (UNIQUE)
- password_hash
- first_name, last_name
- role (admin/member)
- created_at, updated_at

-- projects: Projects managed by teams
- id (PRIMARY KEY)
- name, description
- owner_id (FOREIGN KEY → users.id)
- created_at, updated_at

-- tasks: Tasks within projects
- id (PRIMARY KEY)
- project_id (FOREIGN KEY → projects.id)
- title, description
- status (todo/in_progress/done)
- assignee_id (FOREIGN KEY → users.id, nullable)
- due_date
- created_at, updated_at

-- team_members: Join table for project teams
- id (PRIMARY KEY)
- project_id (FOREIGN KEY → projects.id)
- user_id (FOREIGN KEY → users.id)
- role (admin/member)
- joined_at

🚀 Getting Started

Prerequisites

Node.js (v16+)
PostgreSQL (v12+)
npm or yarn

Local Development Setup

1. Database Setup

# Create PostgreSQL database
createdb task_manager

# Run schema file
psql task_manager < backend/db/schema.sql

2. Backend Setup

cd backend

# Install dependencies
npm install

# Create .env file
cp .env.example .env

# Edit .env with your database credentials
# DATABASE_URL=postgresql://user:password@localhost:5432/task_manager

# Start development server
npm run dev
# Server runs on http://localhost:5000

3. Frontend Setup

cd frontend

# Install dependencies
npm install

# Start development server
npm start
# App opens at http://localhost:3000

🔌 API Endpoints

Authentication

POST /api/auth/register - Create new account
POST /api/auth/login - Login with credentials
POST /api/auth/logout - Logout and destroy session
GET /api/auth/me - Get current user (requires auth)

Projects

GET /api/projects - List all user's projects (requires auth)
POST /api/projects - Create new project (requires auth)
GET /api/projects/:id - Get project details with team members (requires auth)
PUT /api/projects/:id - Update project (owner only)
DELETE /api/projects/:id - Delete project (owner only)

Tasks

POST /api/projects/:projectId/tasks - Create task (requires auth)
GET /api/projects/:projectId/tasks - List tasks in project (requires auth)
PUT /api/projects/task/:id - Update task status/details (requires auth)
DELETE /api/projects/task/:id - Delete task (requires auth)

Team Management

POST /api/projects/:projectId/members - Add team member (owner only)
GET /api/projects/:projectId/members - List team members (requires auth)
PUT /api/projects/:projectId/members/:userId - Update member role (owner only)
DELETE /api/projects/:projectId/members/:userId - Remove team member (owner only)

Dashboard

GET /api/dashboard - Get dashboard stats and recent tasks (requires auth)

📊 API Request/Response Examples

Register

POST /api/auth/register
Content-Type: application/json

{
  "email": "user@example.com",
  "password": "securepassword123",
  "first_name": "John",
  "last_name": "Doe"
}

Response (201):
{
  "message": "User registered successfully",
  "user": {
    "id": 1,
    "email": "user@example.com",
    "first_name": "John",
    "last_name": "Doe",
    "role": "member"
  }
}

Create Project

POST /api/projects
Content-Type: application/json
Cookie: connect.sid=...

{
  "name": "Website Redesign",
  "description": "Redesign company website"
}

Response (201):
{
  "message": "Project created",
  "project": {
    "id": 1,
    "name": "Website Redesign",
    "description": "Redesign company website",
    "owner_id": 1,
    "created_at": "2026-05-06T10:00:00Z",
    "updated_at": "2026-05-06T10:00:00Z"
  }
}

Create Task

POST /api/projects/1/tasks
Content-Type: application/json
Cookie: connect.sid=...

{
  "title": "Design homepage mockup",
  "description": "Create initial mockups for homepage",
  "due_date": "2026-05-20",
  "assignee_id": 2
}

Response (201):
{
  "message": "Task created",
  "task": {
    "id": 1,
    "project_id": 1,
    "title": "Design homepage mockup",
    "status": "todo",
    "assignee_id": 2,
    "due_date": "2026-05-20",
    "created_at": "2026-05-06T10:05:00Z"
  }
}

🧪 Testing the Application

Manual API Testing (using curl)

# Register
curl -X POST http://localhost:5000/api/auth/register \
  -H "Content-Type: application/json" \
  -d '{"email":"test@example.com","password":"password123"}'

# Login
curl -X POST http://localhost:5000/api/auth/login \
  -H "Content-Type: application/json" \
  -d '{"email":"test@example.com","password":"password123"}' \
  -c cookies.txt

# Get current user
curl -X GET http://localhost:5000/api/auth/me \
  -b cookies.txt

# Get projects
curl -X GET http://localhost:5000/api/projects \
  -b cookies.txt

Application Flow

Register → Create new account with email/password
Login → Session cookie automatically set
Create Project → Start a new team project
Add Team Members → Invite users by email
Create Tasks → Add tasks to project
Assign Tasks → Assign to team members
Update Status → Track progress (To Do → In Progress → Done)
View Dashboard → Monitor all tasks and statistics

🌍 Deployment to Railway

Prerequisites

GitHub account with repo pushed
Railway.app account (free tier available)

Step 1: Deploy Backend

# 1. Push code to GitHub
git add .
git commit -m "Initial commit"
git push origin main

# 2. Create Railway project at railway.app
# 3. Connect GitHub repository
# 4. Add PostgreSQL plugin
# 5. Set environment variables:
#    - DATABASE_URL (auto-populated by PostgreSQL plugin)
#    - SESSION_SECRET (generate secure key)
#    - NODE_ENV=production
#    - FRONTEND_URL=https://yourapp.up.railway.app

# 6. Deploy automatically

Step 2: Deploy Frontend

# 1. Create .env.production with backend URL
REACT_APP_API_URL=https://api.taskmanager.up.railway.app/api

# 2. Build React app
npm run build

# 3. Deploy to Railway
# Add New Service → Static Site
# Deploy the /build folder

Step 3: Verify Deployment

Visit frontend URL: https://taskmanager.up.railway.app
Register a new account
Create a project
Add tasks
Test all features end-to-end

📝 Environment Variables

Backend (.env)

PORT=5000
NODE_ENV=development|production
DATABASE_URL=postgresql://user:password@host:port/dbname
SESSION_SECRET=your-random-secret-key-here
FRONTEND_URL=http://localhost:3000 (dev) or https://app.up.railway.app (prod)

Frontend (.env)

REACT_APP_API_URL=http://localhost:5000/api (dev) or https://api.app.up.railway.app/api (prod)

🔒 Security Considerations

✅ Passwords hashed with bcryptjs (salt rounds: 10)
✅ Session-based auth with secure, HTTP-only cookies
✅ SQL injection protection via parameterized queries (pg library)
✅ CORS configured for specific frontend domain
✅ Helmet middleware for security headers
✅ Role-based access control (RBAC) for sensitive operations
✅ Input validation with Joi schemas

🚧 Future Enhancements

📂 Project Structure

Assignment/
├── backend/
│   ├── config/
│   │   └── database.js          # PostgreSQL connection pool
│   ├── middleware/
│   │   ├── auth.js              # Auth & error handling
│   │   └── validation.js        # Input validation with Joi
│   ├── routes/
│   │   ├── auth.js              # Auth endpoints
│   │   ├── projects.js          # Project CRUD
│   │   ├── tasks.js             # Task CRUD
│   │   ├── team.js              # Team management
│   │   └── dashboard.js         # Dashboard stats
│   ├── db/
│   │   └── schema.sql           # Database schema
│   ├── app.js                   # Express app setup
│   ├── package.json
│   ├── .env                     # Environment variables
│   └── .env.example
│
├── frontend/
│   ├── src/
│   │   ├── api/
│   │   │   ├── client.ts        # Axios instance
│   │   │   └── index.ts         # API service functions
│   │   ├── pages/
│   │   │   ├── LoginPage.tsx
│   │   │   ├── RegisterPage.tsx
│   │   │   ├── DashboardPage.tsx
│   │   │   ├── ProjectsPage.tsx
│   │   │   └── ProjectDetailPage.tsx
│   │   ├── components/
│   │   │   └── Navbar.tsx
│   │   ├── App.tsx              # Main app with routing
│   │   ├── index.tsx
│   │   ├── index.css            # Tailwind styles
│   │   └── App.css
│   ├── public/
│   ├── .env                     # Dev environment
│   ├── .env.production          # Prod environment
│   ├── tailwind.config.js
│   ├── postcss.config.js
│   └── package.json
│
├── .gitignore
└── README.md                    # This file

💡 Usage Example

Creating and Managing a Project

Register: Sign up with email/password
Create Project: Click "New Project" → Enter name and description
Add Team Member: Go to project → Team tab → Add member by email
Create Task: Click "New Task" → Fill details → Assign to team member
Update Status: Click status dropdown on task → Select new status
View Dashboard: Dashboard shows all tasks, counts, and overdue items

🤝 Contributing

This is an assignment project. For modifications, ensure:

Code follows the existing structure
All endpoints have proper error handling
Frontend components are reusable and well-styled
Database queries use parameterized statements
Environment variables are properly configured

📞 Support

For issues or questions:

Check the API documentation above
Review error messages in console
Ensure PostgreSQL is running
Verify environment variables are set
Check backend server is running on port 5000
Check frontend is accessing correct API URL

📄 License

This project is created for educational purposes.

Last Updated: May 6, 2026
Version: 1.0.0
Status: Ready for Production Deployment

Name		Name	Last commit message	Last commit date
Latest commit History 2 Commits
backend		backend
frontend		frontend
.gitignore		.gitignore
ARCHITECTURE.md		ARCHITECTURE.md
IMPLEMENTATION_SUMMARY.md		IMPLEMENTATION_SUMMARY.md
INDEX.md		INDEX.md
QUICKSTART.md		QUICKSTART.md
RAILWAY_DEPLOYMENT.md		RAILWAY_DEPLOYMENT.md
README.md		README.md
TESTING_GUIDE.md		TESTING_GUIDE.md
package-lock.json		package-lock.json
package.json		package.json
pro.jpeg		pro.jpeg

Folders and files

Latest commit

History

Repository files navigation

📋 Team Task Manager - Full-Stack Web Application

✨ Key Features

🛠️ Tech Stack

Backend

Frontend

📋 Database Schema

Tables

🚀 Getting Started

Prerequisites

Local Development Setup

1. Database Setup

2. Backend Setup

3. Frontend Setup

🔌 API Endpoints

Authentication

Projects

Tasks

Team Management

Dashboard

📊 API Request/Response Examples

Register

Create Project

Create Task

🧪 Testing the Application

Manual API Testing (using curl)

Application Flow

🌍 Deployment to Railway

Prerequisites

Step 1: Deploy Backend

Step 2: Deploy Frontend

Step 3: Verify Deployment

📝 Environment Variables

Backend (.env)

Frontend (.env)

🔒 Security Considerations

🚧 Future Enhancements

📂 Project Structure

💡 Usage Example

Creating and Managing a Project

🤝 Contributing

📞 Support

📄 License

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

Packages