cargdev/pomodoro
1
0
Fork 0
mirror of https://github.com/CarGDev/pomodoro.git synced 2025-09-18 17:38:28 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
80595e700223fd2c441969442f905427dd745895
pomodoro/replit.md
ingecarlosgutie 80595e7002 Set up project configuration and base UI components 
Initializes the project with necessary configurations, including Replit settings and a .gitignore file. It also introduces foundational UI components for the application, such as buttons, dialogs, and layout elements, likely for the Pomodoro timer application.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 59a5ae27-3c71-459b-b42f-fe14121bf9c3
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/3007b6f6-d03b-45e1-9ed1-7ce8de18ea24/59a5ae27-3c71-459b-b42f-fe14121bf9c3/Uupe4F4
2025-08-31 20:11:52 +00:00

4.2 KiB
Raw Blame History

Overview

Pomodorian is a full-stack Pomodoro timer application designed to help users focus and manage their work sessions effectively. The app provides timer functionality with customizable durations, smart time suggestions based on usage patterns, and session history tracking. Built without user authentication, it uses anonymous device IDs to provide personalized features while maintaining privacy.

User Preferences

Preferred communication style: Simple, everyday language.

System Architecture

Frontend Architecture

  • Framework: React with TypeScript and Vite for fast development and building
  • UI Components: Shadcn/UI component library with Radix UI primitives and Tailwind CSS for styling
  • State Management: Zustand for global state management with persistence
  • Routing: Wouter for lightweight client-side routing
  • Data Fetching: TanStack Query (React Query) for server state management and caching
  • Component Structure: Atomic Design pattern (atoms/molecules/organisms/templates/pages)

Backend Architecture

  • Framework: Express.js with TypeScript following MVC pattern
  • Development Setup: Vite integration for hot module replacement in development
  • Database: Drizzle ORM with PostgreSQL for data persistence
  • Storage: Neon Database as the PostgreSQL provider
  • Session Management: In-memory storage with planned database persistence

Key Features Implementation

  • Timer System: Real-time Pomodoro timer with focus/break phases, visual progress ring, and audio notifications
  • Smart Suggestions: Algorithm-based duration recommendations using historical session data
  • Anonymous Tracking: Device ID generation for personalized features without user accounts
  • Local Storage: Client-side session history with IndexedDB/localStorage fallback
  • Audio Management: Web Audio API for customizable timer completion sounds
  • Theme Support: Light/dark mode toggle with system preference detection

Data Storage Solutions

  • Client Storage: Local session history stored in browser storage for offline access
  • Server Storage: PostgreSQL database for aggregated analytics and suggestions
  • Database Schema: Sessions table tracking duration, completion rates, and device profiles
  • Device Identification: Anonymous UUID-based device tracking via cookies

Design Patterns

  • Component Architecture: Atomic design with reusable UI components
  • State Management: Zustand stores for timer state, settings, and local sessions
  • API Layer: RESTful endpoints with structured error handling and validation
  • Type Safety: Shared TypeScript schemas between client and server using Drizzle Zod

External Dependencies

Core Framework Dependencies

  • React Ecosystem: React 18 with TypeScript, Vite build tool, and Wouter routing
  • UI Framework: Shadcn/UI components built on Radix UI primitives
  • Styling: Tailwind CSS with CSS custom properties for theming

Database and ORM

  • Database: Neon Database (PostgreSQL-compatible serverless database)
  • ORM: Drizzle ORM with Drizzle Kit for migrations and schema management
  • Validation: Zod for runtime type validation and schema generation

State Management and Data Fetching

  • Global State: Zustand with persistence middleware for settings and local data
  • Server State: TanStack Query for API calls, caching, and synchronization
  • Form Handling: React Hook Form with Hookform Resolvers for validation

Development and Build Tools

  • Build System: Vite with React plugin and runtime error overlay
  • TypeScript: Full TypeScript setup with path aliases and strict configuration
  • Development: ESBuild for server bundling and hot module replacement

Audio and Utilities

  • Audio: Web Audio API for timer completion sounds and volume control
  • Date Handling: date-fns for date manipulation and formatting
  • UUID Generation: UUID library for anonymous device identification
  • Styling Utilities: clsx and class-variance-authority for conditional CSS classes

Replit Integration

  • Development Environment: Replit-specific plugins for cartographer and runtime error handling
  • Deployment: Express server with static file serving for production builds