Projects

Simple Time Logger

2023·1 min read

React
TypeScript
Tailwind CSS
Vite
LinkGitHub

A tiny single-screen tool for tallying chunks of focused work across the day. Punch in hours and minutes for each session, keep adding rows as you go, and the running total (and how much is left of an 8-hour day) updates live. No accounts, no backend — just open the page and start logging.

Log focused work time toward an 8-hour daily goal — runs entirely in your browser.

🚀 Try it live →

A tiny single-screen tool for tallying chunks of focused work across the day. Punch in hours and minutes for each session, keep adding rows as you go, and the running total (and how much is left of an 8-hour day) updates live. No accounts, no backend — just open the page and start logging.

✨ Features

  • ➕ Add as many hour/minute entries as you need on the fly
  • 🔢 Live running total — sums everything as you type
  • 🎯 Tracks remaining time against an 8-hour daily goal
  • 🧮 Minutes are auto-converted to fractional hours (e.g. 30 min → 0.50 hrs)
  • 📋 Powered by react-hook-form for snappy, uncontrolled inputs
  • 🎨 daisyUI + Tailwind styling, fully responsive

🛠️ Tech Stack

Layer Technology
Framework React 18
Language TypeScript
Build Tool Vite 4 (SWC)
Styling Tailwind CSS 3 + daisyUI
Forms react-hook-form
UI Bits Headless UI + Heroicons

🙌 Credits

Built by Mohamed Gado.

More projects

  • Real time chat app2023 · React
  • NextJS Authentication Using Clerk2023 · React
  • Ecommerce App2022 · React
All projects