DayTimeTracker

A TypeScript React application that displays a random number which automatically updates daily at midnight Philippine Time (Asia/Manila).

Features

• ✅ Timezone-Aware: Automatically syncs with Philippine Time (Asia/Manila)
• ✅ Offline-First: No external API dependencies - works completely offline
• ✅ Type-Safe: Built with TypeScript in strict mode
• ✅ Well-Tested: 25 unit tests with 100% pass rate
• ✅ Modern Stack: React 18 + Vite + Vitest
• ✅ Developer Mode: Test mode for rapid development (5-second intervals)

Tech Stack

• Language: TypeScript (Strict Mode)
• Framework: React 18
• Build Tool: Vite 5
• Testing: Vitest + React Testing Library
• Styling: Inline styles (React)

Getting Started

Prerequisites

• Node.js 16+ and npm

Installation

# Clone the repository
git clone https://github.com/YOUR_USERNAME/DayTimeTracker.git
cd DayTimeTracker

# Install dependencies
npm install

# Start development server
npm run dev

Open http://localhost:5173 to view it in your browser.

Available Scripts

npm run dev         # Start development server
npm run build       # Build for production
npm run preview     # Preview production build
npm test            # Run tests in watch mode
npm run type-check  # TypeScript type checking

Project Structure

src/
├── main.tsx                      # Application entry point
├── DayTimeTracker.tsx            # Main container component
├── components/
│   ├── RandomButton.tsx          # Button displaying random number
│   ├── RandomTextField.tsx       # Text field showing random number
│   └── TimeInfo.tsx             # Current time and next update display
├── hooks/
│   └── useDailyRandom.ts        # Custom hook for random number logic
└── test/
    └── setup.js                 # Test configuration

How It Works

1. Random Number Generation: Uses the current Philippine date as a seed to generate a pseudo-random number (1000-9999)
2. Automatic Updates: Calculates milliseconds until midnight Philippine Time and schedules automatic updates
3. Timezone Handling: Leverages browser's built-in Intl API for accurate timezone conversion
4. Persistence: Same number displays all day (based on PH date seed)

Testing

Run the test suite:

npm test

Test Coverage:

• 5 test suites
• 25 tests passing
• Components, hooks, and integration tests

Configuration

Enable Test Mode

In src/hooks/useDailyRandom.ts:

const TEST_MODE = true;  // Updates every 5 seconds

Set to false for production (updates at midnight PHT).

Building for Production

npm run build

The optimized build will be in the dist/ directory.

Browser Support

• Chrome/Edge (latest)
• Firefox (latest)
• Safari (latest)

Requires browser support for:

• ES2020
• Intl API with timezone support
• React 18

Contributing

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

License

This project is licensed under the MIT License.

Author

postnodeal90 Project Link: https://github.com/postnodeal90/DayTimeTracker