Simple Clock

A beautiful, customizable clock display with weather, ambient sounds, and pomodoro timer. The project was initially created for my spare laptop.

Live Demo: clock.zyhe.me

Running Locally

1. Clone the repository:

   git clone https://github.com/Ate329/simple-clock.git
   cd simple-clock

2. Install dependencies:

   npm install

3. Start development server:

   npm run dev

4. Open in Browser: Visit http://localhost:5173

Pictures

Usage

Click the gear icon in the top-left to open settings and customize your display. Click the music icon below it to open the Soundscapes panel, where you can mix ambient sounds.

Use the navigation tabs at the top to switch between Clock and Pomodoro views.

Press F11 for fullscreen mode.

Tech Stack

• Framework: React 19 with Vite
• Styling: Tailwind CSS 3.4
• Icons: Lucide React
• Build Tool: Vite 7
• Linting: ESLint 9

API Information

Weather Data

• Provider: Open-Meteo
• Cost: Free (no API key required)
• Privacy: No personal data collection
• Rate Limits: Generous free tier

Quotes

• Provider: DummyJSON
• Cost: Free
• Caching: Local storage (refreshes every 4 hours)

Project Structure

src/
├── components/
│   ├── Clock.jsx           # Main clock display
│   ├── DateDisplay.jsx     # Date component
│   ├── ForecastWidget.jsx  # 3-day weather forecast
│   ├── Greeting.jsx        # Time-based greeting
│   ├── HomePage.jsx        # Main clock page layout
│   ├── Navbar.jsx          # Navigation between views
│   ├── PomodoroPage.jsx    # Pomodoro page container
│   ├── PomodoroWidget.jsx  # Pomodoro timer with progress tracking
│   ├── QuoteWidget.jsx     # Inspirational quotes
│   ├── SettingsModal.jsx   # Settings panel
│   ├── SoundscapesModal.jsx # Ambient sound mixer
│   ├── WeatherIcon.jsx     # Weather condition icons
│   └── WeatherWidget.jsx   # Current weather display
├── hooks/
│   └── useSoundscapes.js   # Audio management hook
├── data/
│   └── sounds.json         # Sound asset registry
├── App.jsx                 # Main app component with theme management
├── main.jsx               # React entry point
└── index.css              # Global styles and animations

Credits

• Weather data by Open-Meteo
• Quotes from DummyJSON
• Icons by Lucide
• Fonts from Google Fonts
• Ambient sounds from Moodist
  • Assets are licensed under the Pixabay Content License and CC0.

License

MIT License - feel free to use and modify!

---

Star this repo if you like it :)