Overview

Project Management System

A full-stack project management application built with React, TypeScript, Node.js, and MongoDB. This system provides comprehensive workspace management, project tracking, and task organization with role-based access control.

Features

Workspace Management

• Multi-workspace Support: Create and manage multiple workspaces
• Role-based Access Control: Owner, Admin, and Member roles with granular permissions
• Member Management: Invite, remove, and manage workspace members
• Workspace Analytics: Track workspace performance and metrics

Project Management

• Project Creation & Organization: Create and organize projects within workspaces
• Project Analytics: Monitor project progress and performance
• Permission-based Project Access: Control who can create, edit, and delete projects

Task Management

• Task Status Tracking:
  • Backlog
  • Todo
  • In Progress
  • In Review
  • Done
• Priority Levels: Low, Medium, High priority tasks
• Task Assignment: Assign tasks to workspace members
• Task Analytics: Track task completion and performance metrics

Authentication & Security

• Multiple Auth Methods:
  • Local authentication (email/password)
  • Google OAuth integration
• Secure Session Management: Cookie-based sessions with proper security
• Password Encryption: Bcrypt hashing for secure password storage

User Interface

• Modern Design: Built with Tailwind CSS and Radix UI components
• Responsive Layout: Mobile-first responsive design
• Dark/Light Theme Support: Customizable theme preferences
• Interactive Components:
  • Emoji picker for reactions
  • Data tables with sorting and filtering
  • Dialog modals for forms
  • Toast notifications
  • Loading skeletons

Tech Stack

Frontend

• Framework: React 18 with TypeScript
• Build Tool: Vite
• Styling:
  • Tailwind CSS
  • Radix UI components
  • class-variance-authority for component variants
• State Management:
  • Zustand for global state
  • TanStack Query for server state
• Routing: React Router DOM v7
• Forms: React Hook Form with Zod validation
• UI Components:
  • Radix UI primitives
  • Lucide React icons
  • React Day Picker for date selection
  • React Table for data tables
• Utilities:
  • Axios for HTTP requests
  • date-fns for date manipulation
  • Immer for immutable state updates

Backend

• Runtime: Node.js with TypeScript
• Framework: Express.js
• Database: MongoDB with Mongoose ODM
• Authentication:
  • Passport.js (Local & Google OAuth)
  • Cookie sessions
• Validation: Zod schema validation
• Security: bcrypt for password hashing
• Development: ts-node-dev for hot reloading

Development Tools

• Language: TypeScript
• Linting: ESLint
• Code Formatting: Prettier (implied)
• Build Tools:
  • Vite (frontend)
  • TypeScript compiler (backend)

Project Structure

project-management/
├── backend/                    # Node.js backend
│   ├── src/
│   │   ├── config/            # Configuration files
│   │   ├── controllers/       # Route controllers
│   │   ├── middlewares/       # Express middlewares
│   │   ├── models/           # Mongoose models
│   │   ├── routes/           # API routes
│   │   ├── services/         # Business logic
│   │   ├── utils/            # Utility functions
│   │   ├── validation/       # Zod schemas
│   │   └── seeders/          # Database seeders
│   └── package.json
├── client/                    # React frontend
│   ├── src/
│   │   ├── components/       # React components
│   │   ├── hooks/           # Custom hooks
│   │   ├── lib/             # Utility libraries
│   │   ├── pages/           # Page components
│   │   ├── types/           # TypeScript types
│   │   └── context/         # React contexts
│   └── package.json
└── README.md

Getting Started

Prerequisites

• Node.js (v16 or higher)
• MongoDB database
• npm or yarn package manager

Environment Variables

Create a .env file in the backend directory:

# Database
MONGODB_URI=mongodb://localhost:27017/project-management

# Authentication
SESSION_SECRET=your-session-secret
GOOGLE_CLIENT_ID=your-google-client-id
GOOGLE_CLIENT_SECRET=your-google-client-secret

# Frontend URL
FRONTEND_ORIGIN=http://localhost:3000
FRONTEND_GOOGLE_CALLBACK_URL=http://localhost:3000/auth/callback

# Server Configuration
PORT=5000
NODE_ENV=development

Installation & Setup

1. Clone the repository

git clone https://github.com/rohittiwari-dev/project-management.git
cd project-management

2. Install backend dependencies

cd backend
npm install

3. Install frontend dependencies

cd ../client
npm install

4. Setup database

cd ../backend
npm run seed  # Seed initial roles

5. Start development servers

Backend (from backend directory):

npm run dev

Frontend (from client directory):

npm run dev

The application will be available at:

• Frontend: http://localhost:5173
• Backend API: http://localhost:5000

API Endpoints

Authentication

• POST /auth/register - User registration
• POST /auth/login - User login
• GET /auth/google - Google OAuth login
• GET /auth/google/callback - Google OAuth callback

Workspaces

• GET /workspaces - Get user workspaces
• POST /workspaces - Create workspace
• GET /workspaces/:id - Get workspace details
• PUT /workspaces/:id - Update workspace
• DELETE /workspaces/:id - Delete workspace

Projects

• GET /workspaces/:workspaceId/projects - Get workspace projects
• POST /workspaces/:workspaceId/projects - Create project
• GET /workspaces/:workspaceId/projects/:id - Get project details
• PUT /workspaces/:workspaceId/projects/:id - Update project
• DELETE /workspaces/:workspaceId/projects/:id - Delete project

Tasks

• GET /workspaces/:workspaceId/projects/:projectId/tasks - Get project tasks
• POST /workspaces/:workspaceId/projects/:projectId/tasks - Create task
• GET /workspaces/:workspaceId/projects/:projectId/tasks/:id - Get task details
• PUT /workspaces/:workspaceId/projects/:projectId/tasks/:id - Update task
• DELETE /workspaces/:workspaceId/projects/:projectId/tasks/:id - Delete task

Permissions System

The application implements a comprehensive role-based access control system:

Roles

• OWNER: Full access to workspace
• ADMIN: Management permissions (cannot delete workspace)
• MEMBER: Basic access permissions

Permissions

• Workspace: CREATE, DELETE, EDIT, MANAGE_SETTINGS
• Members: ADD, CHANGE_ROLE, REMOVE
• Projects: CREATE, EDIT, DELETE
• Tasks: CREATE, EDIT, DELETE, ASSIGN

Architecture Highlights

• Modular Structure: Clean separation of concerns with controllers, services, and models
• Type Safety: Full TypeScript implementation across frontend and backend
• Validation: Consistent validation using Zod schemas
• Error Handling: Centralized error handling with custom error classes
• Security: Secure authentication with proper session management
• Responsive Design: Mobile-first approach with Tailwind CSS
• Performance: Optimized with React Query for caching and Vite for fast builds

Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

This project is licensed under the ISC License.

Known Issues & Roadmap

• [ ] Real-time notifications
• [ ] File attachments for tasks
• [ ] Advanced project templates
• [ ] Time tracking functionality
• [ ] Mobile app development

Support

For support, please open an issue in the GitHub repository or contact the development team.

Built with ❤️ using modern web technologies