uTasks - Task Management Application

A full-stack task management application built with Vue 3, Express, and MongoDB, featuring real-time chat capabilities.

Quick Start

Prerequisites

• Node.js (v14 or higher)
• npm
• MongoDB (Community Edition or Docker)

One-Command Startup

Windows (PowerShell):

.\start.ps1

Linux/macOS:

chmod +x start.sh
./start.sh

This will automatically:

1. Check and start MongoDB (service or Docker)
2. Start the backend server on http://localhost:3000
3. Start the frontend server on http://localhost:5173

Access Points

• Frontend: http://localhost:5173
• Backend API: http://localhost:3000
• API Documentation: http://localhost:3000/api-docs

Manual Setup

1. Install MongoDB

Option A: MongoDB Community Edition (Recommended)

1. Download from MongoDB Download Center
2. Run the installer and choose "Complete" installation
3. Install MongoDB as a Service
4. Verify: Get-Service -Name MongoDB (Windows) or systemctl status mongod (Linux)

Option B: Docker

docker pull mongo:latest
docker run -d -p 27017:27017 --name mongodb mongo:latest

2. Install Dependencies

Frontend:

cd frontend
npm install

Backend:

cd backend
npm install

3. Configure Environment

Create backend/.env:

PORT=3000
MONGODB_URI=mongodb://localhost:27017/utasks
# For local mode (no MongoDB): DB_TYPE=local

4. Start Services Manually

Backend:

cd backend
npm start

Frontend:

cd frontend
npm run dev

Features

Task Management

• Create, edit, and delete boards
• Organize tasks with lists and cards
• Drag-and-drop functionality
• Priority levels and due dates
• Persistent storage with MongoDB

Real-time Chat

• Private messaging between users
• Real-time message delivery with Socket.IO
• Notification badges for unread messages
• Auto-scroll to latest messages
• Responsive design

Authentication

• User registration and login
• JWT-based authentication
• Secure password hashing with bcrypt

Development

Project Structure

utasks/
├── frontend/          # Vue 3 + Vite application
├── backend/           # Express + MongoDB API
├── start.ps1          # Windows startup script
└── start.sh           # Linux/macOS startup script

Build for Production

cd frontend
npm run build

Linting

npm run lint

Running Tests

cd backend
npm test

Database Modes

MongoDB Mode (Production)

• Persistent data storage
• Requires MongoDB connection
• Set MONGODB_URI in .env

Local Mode (Development)

• In-memory storage
• No MongoDB required
• Set DB_TYPE=local in .env
• Data resets on server restart

API Documentation

Interactive API documentation available at:

http://localhost:3000/api-docs

Recommended IDE Setup

VS Code + Vue (Official) (disable Vetur)

Browser Extensions

• Chrome/Edge/Brave: Vue.js devtools
• Firefox: Vue.js devtools

Using the Chat Feature

1. Sign in with a username
2. Click "Chat" in the navigation bar
3. Select a user from the connected users list
4. Start chatting!

Tip: Open multiple browser windows with different usernames to test real-time messaging.

Troubleshooting

MongoDB Connection Issues

# Check if MongoDB is running
Get-Service -Name MongoDB  # Windows
systemctl status mongod    # Linux

# Start MongoDB
Start-Service MongoDB      # Windows
sudo systemctl start mongod # Linux

Port Already in Use

• Backend (3000): Check for other processes using port 3000
• Frontend (5173): Check for other Vite dev servers

Dependencies Issues

# Clean install
rm -rf node_modules package-lock.json
npm install

License

ISC

Team

GLO-3102 - Team 19