🚀 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

# Server
PORT=5000
NODE_ENV=development

# Database
MONGODB_URI=mongodb://localhost:27017/task-orbit

# JWT
JWT_SECRET=your-super-secret-jwt-key-change-this-in-production
JWT_EXPIRES_IN=7d

# Pusher (Real-time)
PUSHER_APP_ID=your-pusher-app-id
PUSHER_KEY=your-pusher-key
PUSHER_SECRET=your-pusher-secret
PUSHER_CLUSTER=your-pusher-cluster

# Email (Nodemailer)
EMAIL_HOST=smtp.gmail.com
EMAIL_PORT=587
EMAIL_USER=your-email@gmail.com
EMAIL_PASSWORD=your-app-password
EMAIL_FROM=TaskOrbit <noreply@taskorbit.com>

# Frontend URL
FRONTEND_URL=http://localhost:5173

apps/web/.env

VITE_API_URL=http://localhost:5000/api
VITE_PUSHER_KEY=your-pusher-key
VITE_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
Latest commit History 33 Commits
.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

License

apLanka/task-orbit

Folders and files

Latest commit

History

Repository files navigation