Skip to content

README.md

Latest commit

 

History

History
384 lines (306 loc) · 11.2 KB

README.md

File metadata and controls

384 lines (306 loc) · 11.2 KB

Task Manager - Full-Stack Collaborative Application

A production-ready, full-stack Task Management application with real-time collaboration features built with modern JavaScript/TypeScript technologies.

🚀 Features

  • User Authentication: Secure registration and login with JWT tokens and HTTP-only cookies
  • Task Management: Full CRUD operations for tasks with title, description, due date, priority, and status
  • Real-Time Collaboration: Live updates using Socket.io when tasks are created, updated, or deleted
  • Task Assignment: Assign tasks to registered users with instant notifications
  • Dashboard: Personal dashboard showing assigned tasks, created tasks, and overdue tasks
  • Filtering & Sorting: Filter by status and priority, sort by due date
  • Responsive Design: Mobile-first design with Tailwind CSS
  • Type Safety: Full TypeScript coverage across frontend and backend

🛠️ Technology Stack

Backend

  • Runtime: Node.js with Express
  • Language: TypeScript
  • Database: PostgreSQL
  • ORM: Prisma
  • Real-Time: Socket.io
  • Authentication: JWT with bcrypt password hashing
  • Validation: Zod for DTO validation
  • Testing: Jest

Frontend

  • Framework: React 18 with Vite
  • Language: TypeScript
  • Styling: Tailwind CSS
  • Data Fetching: SWR
  • Real-Time: Socket.io Client
  • Routing: React Router v6
  • Forms: React Hook Form with Zod validation
  • HTTP Client: Axios

📁 Project Structure

task-manager/
├── backend/
│   ├── src/
│   │   ├── controllers/      # Request handlers
│   │   ├── services/         # Business logic
│   │   ├── repositories/     # Data access layer
│   │   ├── dtos/             # Validation schemas
│   │   ├── middleware/       # Auth, validation, error handling
│   │   ├── socket/           # Socket.io handlers
│   │   ├── routes/           # API routes
│   │   ├── types/            # TypeScript types
│   │   └── server.ts         # Entry point
│   ├── prisma/
│   │   └── schema.prisma     # Database schema
│   ├── tests/                # Unit tests
│   └── package.json
├── frontend/
│   ├── src/
│   │   ├── components/       # Reusable components
│   │   ├── pages/            # Page components
│   │   ├── hooks/            # Custom React hooks
│   │   ├── services/         # API client & Socket.io
│   │   ├── types/            # TypeScript types
│   │   └── App.tsx
│   └── package.json
└── README.md

🏗️ Architecture

Backend Architecture

The backend follows a clean, layered architecture:

┌─────────────┐
│   Routes    │ ← HTTP endpoints
└──────┬──────┘
       │
┌──────▼──────┐
│ Controllers │ ← Request/Response handling
└──────┬──────┘
       │
┌──────▼──────┐
│  Services   │ ← Business logic
└──────┬──────┘
       │
┌──────▼──────┐
│Repositories │ ← Data access (Prisma)
└──────┬──────┘
       │
┌──────▼──────┐
│  Database   │ ← PostgreSQL
└─────────────┘

Key Components:

  • DTOs (Data Transfer Objects): Zod schemas for input validation
  • Middleware: Authentication (JWT), validation, error handling
  • Socket.io: Real-time event broadcasting
  • Prisma: Type-safe database access with migrations

Frontend Architecture

The frontend uses a component-based architecture with custom hooks:

┌─────────────┐
│    Pages    │ ← Route components
└──────┬──────┘
       │
┌──────▼──────┐
│ Components  │ ← Reusable UI components
└──────┬──────┘
       │
┌──────▼──────┐
│    Hooks    │ ← State management (SWR + Socket.io)
└──────┬──────┘
       │
┌──────▼──────┐
│  Services   │ ← API calls & Socket.io
└─────────────┘

Key Features:

  • SWR: Automatic caching and revalidation
  • Socket.io: Real-time updates with optimistic UI
  • React Hook Form: Performant form handling
  • Tailwind CSS: Utility-first styling with custom design system

🚦 Getting Started

Prerequisites

  • Node.js 18+ and npm
  • PostgreSQL database (local or cloud)
  • Git

Backend Setup

  1. Navigate to backend directory:

    cd backend

  2. Install dependencies:

    npm install

  3. Configure environment variables:

    cp .env.example .env

    Edit .env and update:

    DATABASE_URL="postgresql://username:password@localhost:5432/taskmanager?schema=public"
JWT_SECRET="your-super-secret-jwt-key-change-this-in-production"
JWT_EXPIRES_IN="7d"
PORT=5000
NODE_ENV="development"
FRONTEND_URL="http://localhost:5173"

  4. Run Prisma migrations:

    npm run prisma:migrate

  5. Generate Prisma client:

    npm run prisma:generate

  6. Start development server:

    npm run dev

    Backend will run on http://localhost:5000

Frontend Setup

  1. Navigate to frontend directory:

    cd frontend

  2. Install dependencies:

    npm install

  3. Configure environment variables:

    cp .env.example .env

    The default values should work for local development:

    VITE_API_URL=http://localhost:5000/api
VITE_SOCKET_URL=http://localhost:5000

  4. Start development server:

    npm run dev

    Frontend will run on http://localhost:5173

📡 API Documentation

Authentication Endpoints

Method Endpoint Description Auth Required
POST /api/auth/register Register new user No
POST /api/auth/login Login user No
POST /api/auth/logout Logout user No
GET /api/auth/me Get current user Yes
PUT /api/auth/profile Update profile Yes
GET /api/auth/users Get all users Yes

Task Endpoints

Method Endpoint Description Auth Required
POST /api/tasks Create task Yes
GET /api/tasks Get all tasks (with filters) Yes
GET /api/tasks/:id Get task by ID Yes
PUT /api/tasks/:id Update task Yes
DELETE /api/tasks/:id Delete task Yes
GET /api/tasks/stats/dashboard Get task statistics Yes

Notification Endpoints

Method Endpoint Description Auth Required
GET /api/notifications Get all notifications Yes
GET /api/notifications/unread-count Get unread count Yes
PUT /api/notifications/:id/read Mark as read Yes
PUT /api/notifications/read-all Mark all as read Yes

Query Parameters for GET /api/tasks

  • status: Filter by status (TODO, IN_PROGRESS, REVIEW, COMPLETED)
  • priority: Filter by priority (LOW, MEDIUM, HIGH, URGENT)
  • assignedToMe: Show only assigned tasks (true/false)
  • createdByMe: Show only created tasks (true/false)
  • overdue: Show only overdue tasks (true/false)
  • sortBy: Sort field (dueDate, createdAt, priority, status)
  • sortOrder: Sort order (asc, desc)

🔌 Socket.io Events

Client → Server

  • join: Join user's personal room
  • task:created: Broadcast task creation
  • task:updated: Broadcast task update
  • task:deleted: Broadcast task deletion
  • task:status-changed: Broadcast status change

Server → Client

  • task:created: New task created
  • task:updated: Task updated
  • task:deleted: Task deleted
  • task:status-changed: Task status changed
  • notification:new: New notification

🧪 Testing

Backend Tests

Run unit tests:

cd backend
npm test

The test suite includes:

  • Task creation validation
  • Due date validation
  • Overdue task detection
  • DTO schema validation

Type Checking

# Backend
cd backend && npm run type-check

# Frontend
cd frontend && npm run type-check

🚀 Deployment

Backend Deployment (Railway/Render)

  1. Create a new project on Railway or Render

  2. Connect your GitHub repository

  3. Set environment variables:

    • DATABASE_URL: PostgreSQL connection string
    • JWT_SECRET: Strong secret key
    • FRONTEND_URL: Your frontend URL
    • NODE_ENV: production

  4. Deploy command: npm run build && npm start

Frontend Deployment (Vercel/Netlify)

  1. Create a new project on Vercel or Netlify
  2. Connect your GitHub repository
  3. Set build settings:
    • Build command: npm run build
    • Output directory: dist
  4. Set environment variables:
    • VITE_API_URL: Your backend API URL
    • VITE_SOCKET_URL: Your backend Socket.io URL

🎯 Design Decisions & Trade-offs

Why PostgreSQL?

  • ACID compliance ensures data integrity for task assignments
  • Relational structure fits the user-task relationship model
  • Production-ready with excellent hosting options
  • Prisma support provides type-safe queries

Why SWR over React Query?

  • Simpler API for this use case
  • Smaller bundle size
  • Built-in cache invalidation works well with Socket.io
  • Stale-while-revalidate pattern perfect for real-time apps

Why JWT with HTTP-only Cookies?

  • Security: HTTP-only cookies prevent XSS attacks
  • Convenience: Automatic cookie handling
  • Flexibility: Also supports Bearer token for mobile apps

Architecture Pattern (Controller-Service-Repository)

  • Separation of concerns: Each layer has a single responsibility
  • Testability: Business logic isolated in services
  • Maintainability: Easy to modify data access without affecting business logic
  • Scalability: Can swap repositories (e.g., caching layer) without changing services

📝 Lessons Learned

  1. Real-time Sync Challenges: Coordinating SWR cache updates with Socket.io events required careful mutation handling
  2. Type Safety: Full TypeScript coverage caught many bugs early in development
  3. Validation: Zod schemas on both frontend and backend ensured data consistency
  4. Error Handling: Centralized error middleware simplified debugging

🔒 Security Features

  • Password hashing with bcrypt (10 rounds)
  • JWT tokens with expiration
  • HTTP-only cookies for token storage
  • CORS configuration
  • Input validation on all endpoints
  • SQL injection prevention (Prisma parameterized queries)

📄 License

MIT

👤 Author

Built as a full-stack engineering assessment project.

Note: This is a demonstration project. For production use, consider adding:

  • Rate limiting
  • Email verification
  • Password reset functionality
  • File attachments for tasks
  • Task comments
  • Activity logs
  • Advanced search
  • Export functionality