🚀 TaskOrbit

A modern, real-time collaborative task management platform built with cutting-edge technologies

Features • Tech Stack • Getting Started • Documentation

📋 Overview

TaskOrbit is a full-stack task management application designed for teams and individuals who need powerful project organization with real-time collaboration. Built with a modern monorepo architecture using Turborepo, it demonstrates enterprise-level development practices with beautiful UI/UX powered by Shadcn and Tailwind CSS.

✨ Key Highlights

Real-time Collaboration - Live updates across all connected clients using Pusher
Multiple Views - Kanban, List, and Calendar views for flexible task visualization
Beautiful UI - Modern, responsive design with dark mode support
Monorepo Architecture - Organized codebase with Turborepo for optimal development
Secure Authentication - JWT-based auth with role-based access control
Fully Responsive - Seamless experience across desktop, tablet, and mobile
High Performance - Optimized with React Query for efficient data fetching
Type-Safe - 100% TypeScript for robust, maintainable code

🎯 Features

Task Management

Create, edit, delete, and organize tasks
Priority levels (Low, Medium, High, Urgent)
Due dates and time tracking
Tags and labels for categorization
Subtasks with progress tracking
Multi-user task assignments
File attachments support

Board Organization

Multiple boards/projects per user
Customizable board colors and icons
Board sharing and collaboration
Custom status columns
Kanban and List view options
Archive and restore functionality

Real-Time Features

Live task updates across all clients
User presence indicators
Real-time notifications
Drag-and-drop synchronization
Instant UI updates with Pusher

User Experience

Dark/Light theme toggle
Advanced search and filtering
Keyboard shortcuts
Mobile-responsive design
Beautiful animations with Framer Motion
Intuitive drag-and-drop interface

Additional Features

Email notifications
Secure authentication (JWT)
User profiles and avatars
Activity timeline
Role-based access control
Auto-save functionality

🛠️ Tech Stack

Frontend

Framework: React 19 with TypeScript
Build Tool: Vite
Styling: Tailwind CSS 4
UI Components: Shadcn UI + Radix UI
State Management: Zustand + React Query
Animations: Framer Motion
Drag & Drop: @dnd-kit
Forms: React Hook Form + Zod
Routing: React Router v7
Real-time: Pusher JS

Backend

Runtime: Node.js with Express
Language: TypeScript
Database: MongoDB with Mongoose
Authentication: JWT + bcrypt
Real-time: Pusher
Email: Nodemailer
Security: Helmet, express-rate-limit, xss-clean
Validation: Express Validator

DevOps & Tools

Monorepo: Turborepo
Package Manager: pnpm
Code Quality: ESLint + Prettier
Git Hooks: Husky + lint-staged
Type Checking: TypeScript 5.9

🚀 Getting Started

Prerequisites

Before you begin, ensure you have the following installed:

Node.js 18+ or 20+
pnpm 9.0.0+
MongoDB (local or MongoDB Atlas)
Git

Installation

Clone the repository

git clone https://github.com/yourusername/task-orbit.git
cd task-orbit

Install dependencies

pnpm install

Set up environment variables

Create .env files in both apps/api and apps/web:

apps/api/.env

# ServerPORT=5000NODE_ENV=development# DatabaseMONGODB_URI=mongodb://localhost:27017/task-orbit# JWTJWT_SECRET=your-super-secret-jwt-key-change-this-in-productionJWT_EXPIRES_IN=7d# Pusher (Real-time)PUSHER_APP_ID=your-pusher-app-idPUSHER_KEY=your-pusher-keyPUSHER_SECRET=your-pusher-secretPUSHER_CLUSTER=your-pusher-cluster# Email (Nodemailer)EMAIL_HOST=smtp.gmail.comEMAIL_PORT=587EMAIL_USER=your-email@gmail.comEMAIL_PASSWORD=your-app-passwordEMAIL_FROM=TaskOrbit <noreply@taskorbit.com># Frontend URLFRONTEND_URL=http://localhost:5173

apps/web/.env

VITE_API_URL=http://localhost:5000/apiVITE_PUSHER_KEY=your-pusher-keyVITE_PUSHER_CLUSTER=your-pusher-cluster

Start MongoDB

# macOS with Homebrew
brew services start mongodb-community
# Or manually
mongod --dbpath /path/to/data
# Windows
net start MongoDB

Run the development servers

# Start both API and Web servers
pnpm dev
# Or start individually
pnpm --filter api dev # API server on http://localhost:5000
pnpm --filter web dev # Web app on http://localhost:5173

Open your browser

Navigate to http://localhost:5173

📁 Project Structure

task-orbit/
├── apps/
│ ├── api/ # Backend API (Node.js + Express)
│ │ ├── src/
│ │ │ ├── controllers/ # Route controllers
│ │ │ ├── models/ # MongoDB models
│ │ │ ├── routes/ # API routes
│ │ │ ├── middleware/ # Auth, validation, error handling
│ │ │ ├── services/ # Business logic (email, pusher)
│ │ │ ├── utils/ # Utilities (JWT, etc.)
│ │ │ ├── config/ # Configuration files
│ │ │ ├── scripts/ # Seed data and utilities
│ │ │ └── index.ts # Entry point
│ │ └── package.json
│ │
│ ├── web/ # Frontend (React + Vite)
│ │ ├── src/
│ │ │ ├── components/ # React components
│ │ │ │ ├── ui/ # Shadcn UI components
│ │ │ │ ├── board/ # Board & Kanban components
│ │ │ │ ├── task/ # Task components
│ │ │ │ ├── layout/ # Layout components
│ │ │ │ ├── notifications/ # Notification components
│ │ │ │ ├── animations/ # Animation wrappers
│ │ │ │ └── theme/ # Theme components
│ │ │ ├── pages/ # Page components
│ │ │ ├── hooks/ # Custom React hooks
│ │ │ ├── services/ # API services
│ │ │ ├── contexts/ # React contexts
│ │ │ ├── store/ # Zustand stores
│ │ │ ├── lib/ # Utilities
│ │ │ ├── styles/ # Global styles
│ │ │ └── types/ # TypeScript types
│ │ └── package.json
│ │
│ └── docs/ # Documentation
│ ├── project-specification.md
│ ├── ui-revamp-*.md
│ └── phase-*-completion.md
│
├── packages/ # Shared packages
│ ├── eslint-config/ # Shared ESLint configs
│ ├── typescript-config/ # Shared TypeScript configs
│ ├── ui/ # Shared UI components
│ └── types/ # Shared TypeScript types
│
├── turbo.json # Turborepo configuration
├── package.json # Root package.json
├── pnpm-workspace.yaml # pnpm workspace config
└── README.md # This file

📚 Documentation

Quick Links

Getting Started Guide - Fast setup for portfolio screenshots
Screenshot Guide - How to capture the best screenshots
Seed Data - Populate database with sample data
API Documentation - Full project specification
UI Revamp Docs - UI design system and guidelines
Troubleshooting - Common issues and solutions

Available Scripts

Root Level

# Development
pnpm dev # Start all apps in development mode
pnpm build # Build all apps for production
pnpm lint # Lint all packages
pnpm format # Format code with Prettier
pnpm check-types # Type check all packages# Turborepo commands
turbo run dev # Run dev with Turborepo
turbo run build # Build with Turborepo

API (apps/api)

cd apps/api
pnpm dev # Start API server with nodemon
pnpm build # Compile TypeScript
pnpm start # Start production server
pnpm seed # Seed database with sample data

Web (apps/web)

cd apps/web
pnpm dev # Start Vite dev server
pnpm build # Build for production
pnpm preview # Preview production build
pnpm lint # Lint frontend code

🌱 Seed Data

To populate your database with sample data for testing or portfolio screenshots:

cd apps/api
pnpm seed

This will create:

3 sample boards (Product Development, Marketing Campaign, Design System)
23 realistic tasks with various statuses, priorities, and subtasks
Data assigned to your user account

For detailed instructions, see:

🔐 Authentication

TaskOrbit uses JWT-based authentication with the following features:

Registration: Create new user accounts with email verification
Login: Secure login with JWT token generation
Password Reset: Email-based password recovery
Role-Based Access: Admin, Manager, and Member roles
Protected Routes: Middleware-based route protection

API Endpoints

POST /api/auth/register # Register new user
POST /api/auth/login # Login user
POST /api/auth/forgot-password # Request password reset
POST /api/auth/reset-password # Reset password
GET /api/auth/me # Get current user
PUT /api/auth/profile # Update profile

🔄 Real-Time Features

TaskOrbit uses Pusher for real-time collaboration:

Implemented Features

✅ Live task updates across all connected clients
✅ Real-time notifications
✅ User presence indicators
✅ Board-specific channels
✅ Private user channels

Pusher Setup

Create a free account at pusher.com
Create a new Channels app
Copy credentials to .env files
Restart servers

🎨 UI/UX Design

TaskOrbit features a modern, carefully crafted design system:

Design Tokens: Consistent colors, spacing, and typography
Component Library: Built with Shadcn UI and Radix UI
Animations: Smooth transitions with Framer Motion
Responsive: Mobile-first design approach
Accessibility: ARIA labels and keyboard navigation
Dark Mode: System-aware theme switching

For detailed design specifications, see UI Revamp Documentation.

🧪 Testing

# Run tests (when implemented)
pnpm test# Type checking
pnpm check-types
# Linting
pnpm lint

🚢 Deployment

Frontend (Vercel)

cd apps/web
pnpm build
# Deploy to Vercel
vercel --prod

Backend (Railway/Render/Heroku)

cd apps/api
pnpm build
# Set environment variables on your platform# Deploy using platform CLI or Git integration

Environment Variables

Remember to set all environment variables in your deployment platform:

MongoDB connection string
JWT secret
Pusher credentials
Email service credentials
Frontend URL

🤝 Contributing

Contributions are welcome! Please follow these steps:

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

Code Style

Follow the existing code style
Run pnpm lint before committing
Run pnpm format to format code
Ensure TypeScript types are properly defined
Write meaningful commit messages

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

👨‍💻 Author

Pasindu Lanka

Email: pasindulankaa@gmail.com
Portfolio: [Your Portfolio URL]
GitHub: @yourusername
LinkedIn: Your LinkedIn

🙏 Acknowledgments

Shadcn UI - Beautiful UI components
Turborepo - Monorepo build system
Pusher - Real-time infrastructure
Vercel - Deployment platform
MongoDB - Database

📞 Support

If you have any questions or need help, please:

Check the Documentation
Review Troubleshooting Guide
Open an issue on GitHub
Contact via email

⭐ Star this repo if you find it helpful! ⭐

Made with ❤️ by Pasindu Lanka

Name		Name	Last commit message	Last commit date
.husky		.husky
apps		apps
packages		packages
.gitignore		.gitignore
.npmrc		.npmrc
.prettierrc		.prettierrc
CHANGELOG.md		CHANGELOG.md
CONTRIBUTING.md		CONTRIBUTING.md
LICENSE		LICENSE
QUICK-START.md		QUICK-START.md
README.md		README.md
SCREENSHOT-GUIDE.md		SCREENSHOT-GUIDE.md
SETUP.md		SETUP.md
UI-REVAMP-SUMMARY.md		UI-REVAMP-SUMMARY.md
package.json		package.json
pnpm-lock.yaml		pnpm-lock.yaml
pnpm-workspace.yaml		pnpm-workspace.yaml
turbo.json		turbo.json

Latest commit

History

Folders and files

Repository files navigation