task-manager/replit.md

# Personal Task Management App - TaskFlow

## Overview

TaskFlow is a modern, mobile-first personal task management application designed to help users organize and track their tasks efficiently. The app features a clean, intuitive interface inspired by iOS Reminders, Linear, and Notion, focusing on utility and ease of use. Built with React and TypeScript, it offers multiple views for task organization including calendar scheduling, kanban boards, project templates, and time tracking capabilities.

## User Preferences

Preferred communication style: Simple, everyday language.

## Recent Changes

### Project Template Navigation and Translations (October 2025)
- Added back button navigation from Project Templates page to Settings page
- Implemented comprehensive translations for Project Templates page (40+ translation keys)
- Both English and German languages fully supported on Project Templates page
- Bidirectional navigation between Settings and Project Templates working correctly
- Translation keys added for all UI elements: tabs, buttons, labels, placeholders, project status names

### Application Logo and Branding (October 2025)
- Created custom TaskFlow logo featuring checkmark and flow design elements
- Integrated logo into application header
- Added favicon and apple-touch-icon support for better branding
- Logo assets: `attached_assets/generated_images/TaskFlow_app_logo_icon_3a0e77e9.png`

### Multilingual Support (October 2025)
- Added full internationalization (i18n) support using react-i18next
- Implemented English and German language translations
- Created Settings page with language selector
- Language preference persists in localStorage
- All UI components translated: TaskList, Calendar, Kanban, Task Creation, Navigation, Settings, Project Templates

## System Architecture

### Frontend Architecture

**React + TypeScript Foundation**: The application is built using React 18 with TypeScript for type safety and better development experience. The codebase follows a component-based architecture with clear separation of concerns.

**UI Component System**: Utilizes shadcn/ui components built on top of Radix UI primitives, providing accessible and customizable components. The design system implements a consistent color palette supporting both light and dark modes, with Inter font for typography.

**State Management**: Uses React's built-in state management with useState and context for local component state. TanStack Query is integrated for server state management and API data fetching with caching capabilities.

**Styling Approach**: Implements Tailwind CSS for utility-first styling with custom CSS variables for theming. The design system supports automatic dark/light mode switching and maintains consistent spacing using Tailwind's spacing units.

**Internationalization**: Implements i18next and react-i18next for multilingual support. Currently supports English (default) and German translations. Language preference is stored in localStorage and persists across sessions. Translation files are organized in JSON format at `client/src/i18n/locales/`.

**Mobile-First Responsive Design**: The interface is fully optimized for mobile devices with adaptive layouts that efficiently use screen space across all viewport sizes:
- **Responsive Container**: Main layout uses responsive padding (px-3/py-4 on mobile, px-4/py-6 on desktop) with max-w-screen-2xl constraint to prevent excessive horizontal spread on large screens
- **Calendar Grid Breakpoints**: Adapts from 2 columns on mobile (375px), to 3 columns on small tablets (640px), 5 columns on tablets (768px), and full 7-column week view on desktop (1024px+)
- **Kanban Board Layout**: Stacks vertically (single column) on mobile for easy scrolling, expands to 3 columns side-by-side on tablets and desktop
- **Touch Accessibility**: All interactive buttons meet 44px minimum touch target size for mobile accessibility, with navigation controls sized at 44×44px
- **Project Templates**: Responsive column layout that adapts from single column on mobile to 3 columns on desktop
- **Optimized Spacing**: Reduced unnecessary white space while maintaining visual hierarchy and usability across all screen sizes

### Backend Architecture

**Express.js Server**: Simple Node.js server using Express for API routing and middleware handling. The server structure separates route definitions from business logic and includes error handling middleware.

**Storage Layer Interface**: Implements an abstraction layer (IStorage interface) that currently uses in-memory storage but can be easily swapped for database implementations. This design allows for flexible data persistence strategies.

**Development Setup**: Uses Vite for development server with hot module replacement and build optimization. ESBuild handles server-side TypeScript compilation for production builds.

### Data Storage Solutions

**Current Implementation**: Uses in-memory storage via MemStorage class for rapid prototyping and development. All data is stored in JavaScript Maps and includes basic CRUD operations for users.

**Database Schema**: Configured for PostgreSQL using Drizzle ORM with type-safe schema definitions. The schema currently defines a users table with ID, username, and password fields, with room for task-related tables.

**Migration Strategy**: Drizzle Kit is configured for database migrations and schema management, supporting both development and production deployments.

### Authentication and Authorization

**Session-Based Approach**: The application is structured to support session-based authentication using connect-pg-simple for PostgreSQL session storage, though the current implementation focuses on task management features.

**User Management**: Basic user entity structure is defined with support for usernames and encrypted passwords, providing foundation for multi-user task management.

### Task Management Features

**Multiple View Modes**: Supports traditional task lists, calendar view for date-based organization, and kanban boards for workflow management. Each view offers drag-and-drop functionality for task manipulation.

**Time Tracking**: Integrated time tracking system allows users to start/stop timers on tasks and manually log time. Includes completion modal for time entry when marking tasks as done.

**Project Templates**: Reusable project templates allow users to quickly create structured task sets with predefined workflows and timelines.

**Priority and Status Management**: Tasks support priority levels (low, medium, high) and status tracking (todo, in progress, done) with visual indicators.

## Production Deployment

**Docker Stack Support**: The application is production-ready with full Docker support for containerized deployment:
- **Multi-stage Docker Build**: Optimized production image with separate build and runtime stages
- **PostgreSQL Database**: Separate database container with persistent volume storage
- **Health Monitoring**: Built-in health checks for both application and database services
- **Environment Configuration**: Flexible configuration via environment variables
- **Graceful Shutdown**: Proper cleanup and connection pool management
- **Database Migrations**: Automatic schema creation and seeding on first startup

**Storage Flexibility**: 
- **Development**: Uses in-memory storage (MemStorage) for rapid prototyping
- **Production**: Switches to PostgreSQL-backed storage (DbStorage) using Drizzle ORM
- **Environment-driven**: Automatically selects storage based on NODE_ENV or USE_DB flag

**Database Management**:
- **Connection Pooling**: Uses node-postgres (pg) for efficient connection management
- **Auto-migrations**: Enables pgcrypto extension and creates tables on startup
- **Default Data**: Seeds default labels automatically on fresh database
- **Graceful Cleanup**: Properly closes connections on shutdown signals

## External Dependencies

### UI and Styling
- **Radix UI**: Provides accessible, unstyled component primitives for building the user interface
- **Tailwind CSS**: Utility-first CSS framework for responsive design and theming
- **Lucide React**: Icon library for consistent iconography throughout the application
- **Google Fonts (Inter)**: Typography system for clean, readable text

### State Management and Data Fetching
- **TanStack Query**: Server state management with caching, background refetching, and optimistic updates
- **React Hook Form**: Form handling with validation support
- **Zod**: Runtime type validation for form data and API responses

### Database and ORM
- **Drizzle ORM**: Type-safe ORM for PostgreSQL database interactions
- **Neon Database**: PostgreSQL-compatible serverless database platform
- **Drizzle Kit**: Database migration and schema management tools

### Development and Build Tools
- **Vite**: Fast development server and build tool with hot module replacement
- **ESBuild**: Fast JavaScript/TypeScript bundler for production builds
- **TSX**: TypeScript execution engine for development server

### Date and Time Management
- **date-fns**: Comprehensive date utility library for calendar functionality and date manipulation

### Session Management
- **connect-pg-simple**: PostgreSQL session store for Express.js applications
- **Express Session**: Server-side session management middleware

### Internationalization
- **i18next**: Internationalization framework for managing translations
- **react-i18next**: React bindings for i18next, providing hooks and components for translation

The application architecture prioritizes developer experience, type safety, and scalability while maintaining a clean separation between frontend components, server logic, and data persistence layers.