TaskFlow

A modern task management application built with Next.js 16, React 19, and TypeScript.

Features

• Task management with priority levels and status tracking
• Project organization with custom colors
• Real-time dashboard with statistics
• Dark mode support
• Responsive design
• Server-side rendering with React Server Components
• Client-side state management with Zustand

Tech Stack

• Next.js 16 - React framework with App Router
• React 19 - UI library with Server Components
• TypeScript - Type-safe development
• Tailwind CSS - Utility-first styling
• Zustand - Lightweight state management
• Zod - Schema validation
• Lucide React - Icon library

Getting Started

Prerequisites

• Node.js 18.17 or higher
• npm, yarn, or pnpm

Installation

npm install

Development

npm run dev

Open http://localhost:3000 in your browser.

Build

npm run build
npm start

Project Structure

├── app/                    # Next.js app directory
│   ├── actions/           # Server actions
│   ├── api/              # API routes
│   ├── dashboard/        # Dashboard pages
│   ├── login/            # Login page
│   └── projects/         # Projects page
├── components/            # React components
│   ├── dashboard/        # Dashboard components
│   └── projects/         # Project components
├── store/                # Zustand stores
│   ├── taskStore.ts      # Task management
│   ├── projectStore.ts   # Project management
│   └── uiStore.ts        # UI state
└── lib/                  # Utility functions

Scripts

• npm run dev - Start development server with Turbopack
• npm run build - Build for production
• npm start - Start production server
• npm run lint - Run ESLint
• npm run lint:fix - Fix linting issues
• npm run format - Format code with Prettier
• npm run type-check - Run TypeScript compiler checks

Code Quality

This project uses:

• ESLint - Code linting
• Prettier - Code formatting
• Husky - Git hooks
• lint-staged - Pre-commit checks

Git hooks automatically run linting and formatting on commit.

Key Features

Server Components

Most pages use React Server Components for optimal performance and SEO.

Client Components

Interactive components use the 'use client' directive and Zustand for state management.

Server Actions

Form submissions and mutations use Next.js Server Actions for type-safe API calls without explicit API routes.

Proxy

Authentication and security headers are handled at the edge with Next.js proxy (proxy.ts).

Advanced Routing

The app uses Next.js 16's advanced routing features including parallel routes and intercepting routes for modals.

License

MIT

Author

TaskFlow Team