Task Management App - Frontend

React + TypeScript frontend for the Task Management Application.

Quick Start

1. Install dependencies:

   npm install

2. Start development server:

   npm run dev

3. Open browser:

   • http://localhost:5173

Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run preview - Preview production build
• npm run lint - Lint code

Project Structure

frontend/src/
├── components/
│   ├── ui/                    # Reusable UI components
│   │   ├── Button.tsx
│   │   ├── Input.tsx
│   │   ├── Card.tsx
│   │   ├── Modal.tsx
│   │   └── Select.tsx
│   ├── layout/                # Layout components
│   │   └── Header.tsx
│   └── tasks/                 # Task-specific components
│       ├── TaskCard.tsx
│       ├── TaskForm.tsx
│       └── TaskFilters.tsx
├── pages/                     # Page components
│   ├── LoginPage.tsx
│   ├── RegisterPage.tsx
│   └── DashboardPage.tsx
├── stores/                    # Zustand state stores
│   ├── authStore.ts
│   └── taskStore.ts
├── services/                  # API services
│   └── api.ts
├── types/                     # TypeScript types
│   └── index.ts
├── App.tsx                    # Main app component
├── main.tsx                   # Entry point
└── index.css                  # Global styles

Key Features

• Authentication: Login and registration with JWT
• Task Management: Create, read, update, delete tasks
• Filtering: Filter tasks by status and priority
• Responsive: Mobile, tablet, and desktop layouts
• Modern UI: Tailwind CSS with custom components
• Type Safety: Full TypeScript support

State Management

Uses Zustand for lightweight, efficient state management:

• authStore: Authentication state and actions
• taskStore: Task state, CRUD operations, and filters

Styling

Built with Tailwind CSS using a custom color scheme:

• Primary colors: Blue palette (primary-50 to primary-900)
• Status colors: Yellow (pending), Blue (in-progress), Green (completed)
• Priority colors: Gray (low), Orange (medium), Red (high)

API Integration

The app connects to the FastAPI backend at http://localhost:8000/api/v1

API client includes:

• Automatic JWT token injection
• Error handling
• Request/response interceptors