Task Management System - Frontend

Enterprise-level task management system built with Next.js 14, featuring real-time notifications, role-based authentication, and comprehensive project management capabilities.

🚀 Live Demo

Deploy Link: Coming Soon - Will be deployed on Vercel

🛠️ Technologies Used

Core Technologies

• Next.js 14 - React framework with App Router
• TypeScript - Type-safe development
• React 18 - UI library with latest features
• Tailwind CSS - Utility-first CSS framework

State Management & Data Fetching

• Redux Toolkit - State management
• React Query - Server state management and caching
• React Hook Form - Form handling with validation
• Yup - Schema validation

UI/UX Libraries

• Lucide React - Modern icon library
• React Hot Toast - Notification system
• clsx - Conditional CSS classes
• date-fns - Date manipulation

Real-time & API

• Microsoft SignalR - Real-time communication
• Axios - HTTP client
• js-cookie - Cookie management

Development & Testing

• Jest - Testing framework
• React Testing Library - Component testing
• ESLint - Code linting
• TypeScript - Static type checking

🏗️ Architecture & Project Structure

Layered Architecture

src/
├── app/                    # Next.js App Router pages
│   ├── auth/              # Authentication pages
│   ├── dashboard/         # Dashboard page
│   ├── projects/          # Project management pages
│   ├── tasks/             # Task management pages
│   ├── profile/           # User profile pages
│   └── layout.tsx         # Root layout
├── components/            # Reusable UI components
│   ├── auth/              # Authentication components
│   ├── common/            # Shared components (Header, Sidebar, etc.)
│   ├── projects/          # Project-specific components
│   ├── tasks/             # Task-specific components
│   └── ui/                # Base UI components
├── lib/                   # Utility libraries
│   ├── api.ts             # API configuration and endpoints
│   ├── auth.ts            # Authentication utilities
│   └── utils.ts           # General utilities
├── store/                 # Redux store configuration
│   ├── slices/            # Redux slices
│   │   ├── authSlice.ts   # Authentication state
│   │   ├── tasksSlice.ts  # Tasks state
│   │   ├── projectsSlice.ts # Projects state
│   │   └── notificationsSlice.ts # Notifications state
│   └── store.ts           # Store configuration
└── types/                 # TypeScript type definitions
    └── index.ts           # Shared types and interfaces

Component Architecture

• Pages: Route-level components using Next.js App Router
• Components: Reusable UI components with TypeScript props
• Hooks: Custom React hooks for business logic
• Services: API service layer with error handling
• Store: Centralized state management with Redux Toolkit

✨ Extra Features

🔐 Authentication & Authorization

• JWT Token Management - Secure authentication with refresh tokens
• Role-based Access Control - Admin, Manager, Developer roles
• Protected Routes - Route guards based on authentication status
• Password Security - Bcrypt hashing integration

🔄 Real-time Features

• SignalR Integration - Real-time notifications and updates
• Live Task Updates - Instant task status changes
• Real-time Notifications - Push notifications for task assignments
• Live Project Updates - Real-time project member activities

📊 Advanced Task Management

• Task Logging System - Comprehensive activity tracking
• Priority Management - Low, Medium, High, Critical priorities
• Status Tracking - ToDo, InProgress, Done, Cancelled states
• Due Date Management - Task deadline tracking
• Assignment System - Multi-user task assignment

🧪 Testing & Quality

• Unit Testing - Jest and React Testing Library
• Component Testing - Isolated component tests
• Type Safety - Full TypeScript coverage
• Code Quality - ESLint configuration

🎨 UI/UX Features

• Responsive Design - Mobile-first approach
• Dark/Light Mode - Theme switching capability
• Toast Notifications - User-friendly feedback system
• Loading States - Skeleton loaders and spinners
• Form Validation - Real-time form validation with Yup

📱 Performance Optimizations

• Code Splitting - Automatic route-based splitting
• Image Optimization - Next.js Image component
• Caching Strategy - React Query for server state caching
• Bundle Optimization - Tree shaking and minification

🏛️ System Architecture

graph TB
    A[Next.js Frontend] --> B[API Layer]
    B --> C[.NET Backend API]
    C --> D[MongoDB Database]
    
    A --> E[SignalR Hub]
    E --> C
    
    A --> F[Redux Store]
    F --> G[Auth Slice]
    F --> H[Tasks Slice]
    F --> I[Projects Slice]
    F --> J[Notifications Slice]
    
    K[JWT Tokens] --> A
    L[Role-based Auth] --> A

Loading

🚦 Getting Started

Prerequisites

• Node.js 18+
• npm or yarn
• Git

Installation

1. Clone the repository

   git clone https://github.com/ahmetcdevelopment/task-management-frontend.git
   cd task-management-frontend

2. Install dependencies

   npm install

3. Environment Setup

   cp .env.example .env.local
   # Configure your environment variables

4. Run development server

   npm run dev

5. Open browser

   http://localhost:3000
   

Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run start - Start production server
• npm run lint - Run ESLint
• npm run test - Run tests
• npm run test:watch - Run tests in watch mode

🔧 Configuration

Environment Variables

NEXT_PUBLIC_API_URL=http://localhost:5000/api
NEXT_PUBLIC_SIGNALR_URL=http://localhost:5000/taskHub

API Integration

The frontend integrates with a .NET 8 Web API backend featuring:

• RESTful API endpoints
• JWT authentication
• SignalR real-time communication
• MongoDB data persistence

🤝 Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📝 License

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

👨‍💻 Author

Ahmet C Development

• GitHub: @ahmetcdevelopment

---

⭐ Star this repository if you find it helpful!