A modern, full-stack project management application with Kanban boards, team collaboration, and secure authentication. Built with React, Node.js, GraphQL, and MongoDB.
Production: https://taskpilot.up.railway.app
- Frontend: Railway (Docker)
- Backend API: Railway (Docker)
- Database: MongoDB Atlas
- 🔐 Secure Authentication - JWT-based auth with bcrypt password hashing
- 📊 Project Management - Create, organize, and archive projects
- ✅ Kanban Board - Drag-and-drop task management (TODO → DOING → DONE)
- 🎯 Task Management - Full CRUD with priority, due dates, and tags
- 🏷️ Custom Tags - Color-coded tags for task organization
- 👥 Team Collaboration - Multi-user project access with proper authorization
- 📦 Archive System - Archive projects with read-only mode
- 🌙 Dark Mode - Beautiful dark theme with smooth transitions
- 📱 Fully Responsive - Mobile-first design with hamburger menu
- � Security Hardened - Helmet.js, rate limiting, input validation
- � Performance - Apollo Client caching, optimized queries
- 🧪 Well Tested - Comprehensive test coverage with Jest & Vitest
- � Structured Logging - Winston logging with monitoring dashboard
- 🐳 Production Ready - Docker deployment with health checks
- ⚡ Modern Stack - React 19, Vite, TypeScript, GraphQL
- React 19 - Latest UI library
- TypeScript - Type safety
- Apollo Client - GraphQL state management
- TailwindCSS 4 - Modern styling
- React Router - Navigation
- React DnD - Drag and drop functionality
- Vite 7 - Lightning-fast build tool
- Node.js 20 - Runtime
- Express - Web framework
- Apollo Server - GraphQL API
- MongoDB + Mongoose - Database
- TypeScript - Type safety
- JWT - Authentication
- Winston - Structured logging
- Helmet - Security headers
- Express Rate Limit - DDoS protection
- Docker - Containerization
- Railway - Cloud deployment platform
- MongoDB Atlas - Managed database
- GitHub - Version control
- Node.js 20+
- Docker & Docker Compose
- MongoDB (or use Docker)
- Clone the repository
git clone https://github.com/davidjosipovic/task-pilot.git
cd task-pilot- Backend Setup
cd backend
npm install
# Create .env file
cat > .env << EOF
MONGO_URI=mongodb://localhost:27017/taskpilot
JWT_SECRET=dev_secret_key_for_local_development
PORT=4000
NODE_ENV=development
EOF
# Start backend
npm run devBackend runs on http://localhost:4000/graphql
- Frontend Setup
cd frontend
npm install
# Create .env file
cat > .env << EOF
VITE_API_URL=http://localhost:4000/graphql
EOF
# Start frontend
npm run devFrontend runs on http://localhost:5173
# Start MongoDB
docker run -d -p 27017:27017 --name mongodb mongo:latest
# Or use full Docker Compose setup (if available)
docker compose up# Backend tests
cd backend
npm test # Run all tests
npm run test:watch # Watch mode
npm run test:coverage # Coverage report
# Frontend tests
cd frontend
npm test # Run all tests
npm run test:ui # Interactive UItask-pilot/
├── backend/
│ ├── src/
│ │ ├── models/ # Mongoose models (User, Project, Task, Tag)
│ │ ├── resolvers/ # GraphQL resolvers
│ │ ├── schemas/ # GraphQL type definitions
│ │ ├── middleware/ # Auth, logging, CORS
│ │ ├── utils/ # Logger, dashboard handler
│ │ ├── plugins/ # Apollo plugins
│ │ └── __tests__/ # Backend tests
│ ├── Dockerfile # Production Docker build
│ └── package.json
│
├── frontend/
│ ├── src/
│ │ ├── components/ # React components
│ │ ├── pages/ # Page components
│ │ ├── context/ # Auth & Theme context
│ │ └── __tests__/ # Frontend tests
│ ├── Dockerfile # Production Docker build
│ ├── server.cjs # Production server
│ └── package.json
│
└── README.md
- ✅ JWT Authentication - Secure token-based auth
- ✅ Password Hashing - bcrypt with salt rounds
- ✅ HTTP Security Headers - Helmet.js protection
- ✅ Rate Limiting - 100 req/15min general, 5 req/15min auth
- ✅ Input Validation - Email regex, password strength (8+ chars)
- ✅ CORS Protection - Whitelist only Railway domains
- ✅ Authorization Checks - Project membership validation
- ✅ Session Management - Token refresh on login/logout
- ✅ Environment Secrets - Required JWT_SECRET in production
- ✅ SQL Injection Prevention - MongoDB parameterized queries
- Passwords never logged or exposed
- Sensitive data filtered from logs
- HTTPS enforced in production
- Health checks don't expose sensitive info
- Docker runs as non-root user
# User
getCurrentUser: User
# Projects
getProjects: [Project!]! # Active projects
getArchivedProjects: [Project!]! # Archived projects
getProject(id: ID!): Project
# Tasks & Tags
getTasksByProject(projectId: ID!): [Task!]!
getTagsByProject(projectId: ID!): [Tag!]!# Authentication
registerUser(name: String!, email: String!, password: String!): AuthPayload!
loginUser(email: String!, password: String!): AuthPayload!
# Projects
createProject(title: String!, description: String): Project!
deleteProject(id: ID!): Boolean!
archiveProject(id: ID!): Project!
unarchiveProject(id: ID!): Project!
# Tasks
createTask(projectId: ID!, title: String!, description: String,
priority: String, dueDate: String, tagIds: [ID!]): Task!
updateTask(id: ID!, title: String, description: String,
status: String, priority: String, dueDate: String,
tagIds: [ID!]): Task!
deleteTask(id: ID!): Boolean!
# Tags
createTag(projectId: ID!, name: String!, color: String): Tag!
updateTag(id: ID!, name: String, color: String): Tag!
deleteTag(id: ID!): Boolean!- Modern Design - Gradient backgrounds, smooth animations
- Dark Mode - Full dark theme support with context persistence
- Responsive Layout - Mobile hamburger menu, flexible grids
- Drag & Drop - Intuitive Kanban board interaction
- Loading States - Spinners, skeletons, optimistic updates
- Empty States - Helpful messages and icons
- Toast Notifications - Success/error feedback
- Accessibility - ARIA labels, keyboard navigation
error- Critical errorswarn- Warnings and recoverable issuesinfo- Important events (login, CRUD operations)debug- Detailed debugging info
backend/logs/
├── combined.log # All logs
└── error.log # Errors only
Access real-time logs and metrics:
Development: http://localhost:4000/monitoring
Production: https://your-backend.railway.app/monitoring
This project is deployed on Railway using Docker.
Backend (Railway)
MONGO_URI=mongodb+srv://user:pass@cluster.mongodb.net/dbname
JWT_SECRET=<generate-strong-random-32+-char-string>
NODE_ENV=production
PORT=<auto-provided-by-railway>Frontend (Railway)
VITE_API_URL=https://your-backend.railway.app/graphql
PORT=<auto-provided-by-railway>- Push to GitHub
mainbranch - Railway auto-detects Dockerfile
- Builds Docker image with build args (VITE_API_URL for frontend)
- Deploys to production
- Health checks ensure service is running
npm run dev # Development with hot reload (ts-node-dev)
npm start # Production (node dist/index.js)
npm run build # Compile TypeScript to JavaScript
npm test # Run tests
npm run test:watch # Tests in watch mode
npm run test:coverage # Coverage reportnpm run dev # Vite dev server
npm run build # Production build
npm run preview # Preview production build
npm test # Run tests
npm run test:ui # Vitest UI# Start MongoDB
docker run -d -p 27017:27017 mongo:latest# Multi-stage build with node:20-alpine
# Frontend: Build React → Serve with 'serve' package
# Backend: Build TypeScript → Run with Node.js- Fork the repository
- Create your 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
This project is open source and available under the MIT License.
David Josipović
- GitHub: @davidjosipovic
- React DnD for drag-and-drop functionality
- TailwindCSS for modern styling
- Apollo GraphQL for powerful API layer
- Railway for seamless deployment
⭐ If you find this project useful, please give it a star!