Lab68 - Brutalist Pomodoro Timer

A minimalist Pomodoro timer app with a bold brutalist design aesthetic. Built with React Native, Expo, and TypeScript.

Features

• Pomodoro Timer - Focus sessions with customizable durations
• Break Management - Automatic short and long break transitions
• Session Logging - Track your completed focus sessions
• Brutalist Design - Bold typography, high contrast, stark geometric shapes
• Customizable Settings - Adjust timer durations and auto-start behavior
• Background Support - Timer continues accurately when app is backgrounded
• Cross-Platform - Works on iOS, Android, and Web

Design Philosophy

Lab68 embraces brutalist design principles:

• Raw, unpolished aesthetics
• High contrast color palette (#232323, #fde5e5, #ffffff)
• Bold borders and geometric shapes
• Sixtyfour pixel font for timer display
• Monospaced typography throughout
• Minimal animations, maximum clarity

Tech Stack

• React Native - Cross-platform mobile framework
• Expo - Development and build tooling
• TypeScript - Type-safe development
• Zustand - Lightweight state management
• AsyncStorage - Local data persistence
• Expo Router - File-based navigation
• NativeWind - Tailwind CSS for React Native
• Heroicons - Beautiful hand-crafted SVG icons
• Fast-check - Property-based testing

Installation

Prerequisites

• Node.js 18+
• npm or yarn
• Expo Go app (for mobile testing)

Setup

# Clone the repository
git clone <repository-url>
cd lab68

# Install dependencies
npm install

# Start the development server
npx expo start

Running the App

Web:

npx expo start --web

Mobile (Expo Go):

1. Run npx expo start
2. Scan the QR code with Expo Go (Android) or Camera app (iOS)

iOS Simulator:

npx expo start --ios

Android Emulator:

npx expo start --android

Project Structure

lab68/
├── app/                    # Screens (Expo Router)
│   ├── index.tsx          # Timer screen
│   ├── log.tsx            # Session history
│   ├── settings.tsx       # Configuration
│   └── _layout.tsx        # Navigation layout
├── components/            # Reusable UI components
│   ├── CircularProgress.tsx
│   ├── DigitalDisplay.tsx
│   ├── ScientificButton.tsx
│   ├── ModeSelector.tsx
│   ├── ExperimentInput.tsx
│   └── LabCard.tsx
├── stores/                # Zustand state management
│   ├── timerStore.ts
│   ├── settingsStore.ts
│   └── logStore.ts
├── utils/                 # Helper functions
│   ├── formatTime.ts
│   ├── validation.ts
│   ├── progress.ts
│   └── storage.ts
├── services/              # External integrations
│   ├── haptics.ts
│   └── sound.ts
├── constants/             # App constants
│   ├── colors.ts
│   └── defaults.ts
└── __tests__/            # Test suites
    ├── stores/
    └── utils/

Usage

Timer Screen

1. Select your mode: Focus, Short Break, or Long Break
2. Enter your current task in the "Experiment" field
3. Press START to begin the timer
4. Press PAUSE to pause, RESET to restart

Settings

• Focus Duration - Default: 25 minutes
• Short Break Duration - Default: 5 minutes
• Long Break Duration - Default: 15 minutes
• Auto-start Breaks - Automatically start break timer after focus session

Session Log

View your completed sessions with:

• Session type (Focus/Break)
• Duration
• Completion timestamp
• Task description

Testing

# Run all tests
npm test

# Run tests in watch mode
npm run test:watch

The app includes comprehensive property-based tests using fast-check to verify:

• Timer tick behavior
• Mode transitions
• Background time reconciliation
• Settings persistence
• Progress calculations

Configuration

Colors

Edit constants/colors.ts to customize the color palette:

export const Colors = {
  background: '#232323',  // Dark charcoal
  card: '#fde5e5',       // Soft pink
  border: '#ffffff',      // White
  // ...
}

Default Durations

Edit constants/defaults.ts:

export const DefaultDurations = {
  focus: 25,        // minutes
  shortBreak: 5,
  longBreak: 15,
}

Building for Production

Web

npx expo export --platform web

iOS

eas build --platform ios

Android

eas build --platform android

Contributing

Contributions are welcome! Please follow these guidelines:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

MIT License - feel free to use this project for personal or commercial purposes.

Acknowledgments

• Design inspired by brutalist architecture and Swiss design
• Sixtyfour font by Google Fonts
• Heroicons by Tailwind Labs
• Built with Expo and React Native

Support

For issues, questions, or suggestions:

• Open an issue on GitHub
• Contact: lab68dev@gmail.com

---

Lab68dev - Think. Code. Test. Ship.