Skip to content

Co-Watch is your new digital accountability buddy. Whether you’re grinding on design projects, studying, or “just checking your phone real quick” for the 37th time — this little app keeps your focus in check.

Notifications You must be signed in to change notification settings

itshassco/Co-Watch

Repository files navigation

⏰ Co-Watch (aka Focus Timer

Live Demo Made by itshassco License: MIT

Demo.mp4

✨ A clean, aesthetic clock + focus timer for people who say they’re gonna be productive (and sometimes actually are).


💭 What is this?

Co-Watch is your new digital accountability buddy.
Whether you’re grinding on design projects, studying, or “just checking your phone real quick” for the 37th time — this little app keeps your focus in check.

🕹️ Built with modern web tech.
💅 Styled smoother than your morning latte.
💡 Free forever because focus should not cost money.


⚡ Features You’ll Actually Use

  • 🕰️ Clock / Timer Toggle – Switch between chill time view and focus mode
  • 🌗 Dark Mode – Because staring at a bright screen at 2 AM is a crime
  • 💫 Smooth Sliding Number Animation – Watch the digits flow like butter when time changes
  • 🖥️ Fullscreen Support – Go distraction-free with one tap, fully immersive mode
  • 🎨 Minimal UI – No fluff, just vibes
  • 📱 Fully Responsive – Works on your phone, tablet, toaster, etc.
  • ⚙️ Modern Stack – Next.js, Tailwind, TypeScript, all the good stuff

🚀 Live Demo

👉 focus.itshassco.com
No sign-up. No ads. No fake “premium” button. Just click and focus.


🧠 Tech Stack

Tech Why
Next.js (App Router) Fast, structured, and modern
TypeScript Because JavaScript with confidence hits different
Tailwind CSS Styling that doesn’t make you cry
ESLint Keeps code cleaner than your desk after a Sunday reset

🧩 Folder Vibes

Co-Watch/
├── public/         # images, icons, vibes
├── src/
│   ├── app/        # Next.js app router setup
│   ├── components/ # Reusable pieces of UI magic
│   ├── hooks/      # Custom React hooks, aka “brain extensions”
│   └── styles/     # Tailwind configs & global fits
├── next.config.ts
├── tailwind.config.ts
└── package.json

🪄 How To Run It (for devs who vibe)

  1. Clone it:

    git clone https://github.com/itshassco/Co-Watch.git
    cd Co-Watch
  2. Install the goods:

    npm install
    # or yarn install
  3. Launch the app:

    npm run dev
  4. Open localhost:3000
    Boom. You’re now running Co-Watch locally 🎉


🧃 Future Upgrades (aka “Wouldn’t It Be Cool If…”)

  • ⏳ Custom timer durations
  • 🔔 Sound / notification alerts
  • 📊 Focus stats & streaks
  • 🎨 Custom themes (because we all have that color palette)
  • 📱 Offline mode / PWA

Drop your ideas in Issues — I read them while “focusing.”


🤝 Contribute

Fork it, break it, fix it, make it cooler.
PRs welcome. Just keep it clean, readable, and fun.


💬 Why “Co-Watch”?

Because it’s like having a co-pilot for your time.
You watch the clock. The clock watches your focus. 🫱🫲


📄 License

MIT License — use it, remix it, just don’t sell it to aliens 👽


🧍‍♂️ About the Creator

Made by itshassco
focus.itshassco.com

If this helped you focus even a little,
consider giving it a ⭐ on GitHub. It’s the virtual equivalent of buying me coffee ☕

Stay focused, not fried ✌️

About

Co-Watch is your new digital accountability buddy. Whether you’re grinding on design projects, studying, or “just checking your phone real quick” for the 37th time — this little app keeps your focus in check.

Topics

Resources

Stars

Watchers

Forks