paul-nothaft
9b31cc5083
Add `onKeyDown` handler to the task title input in `TaskCreationModal.tsx` to allow task creation with the Enter key. Enhance `TasksWithCalendar.tsx` to include `hoveredDate` state and `handleDragEnter`/`handleDragLeave` handlers for visual feedback during drag-and-drop operations on the calendar. Adjust the calendar's positioning to be fixed at the bottom with full width and modify styling for task cards during drag operations. Fix the display of the "today" border on the calendar. Replit-Commit-Author: Agent Replit-Commit-Session-Id: ceced2fc-aa46-458d-ba87-ddd4b7bb1518 Replit-Commit-Checkpoint-Type: intermediate_checkpoint Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/659922a9-0087-461c-90dd-6d9a58b81d4d/ceced2fc-aa46-458d-ba87-ddd4b7bb1518/sqJIbnU
5.7 KiB
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.
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.
Mobile-First Design: The interface is optimized for mobile devices with touch-friendly interactions, bottom navigation, and responsive layouts that adapt to different 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.
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
The application architecture prioritizes developer experience, type safety, and scalability while maintaining a clean separation between frontend components, server logic, and data persistence layers.