Projects

Simple Time Logger

2023·1 min read

React
TypeScript
Tailwind CSS
Vite
Link (opens in a new tab)GitHub (opens in a new tab)

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
  • Next.js Authentication Using Clerk2023 · React
  • Ecommerce App2022 · React
All projects