Why

This is a minimalist focus timer website. The project was inspired by my personal experience — I always find it hard to start tasks, and even harder to stop once I’ve started. Then I accidentally discovered that after turning on this background music, I was really able to immerse myself and work for two solid hours. The original music was on YouTube, but it would pause every so often and couldn’t be controlled, so I spent a day implementing this idea that was in my head.

What

  • Peaceful forest background
  • Background music designed specifically for ADHD
  • Minimalist timer with no distractions

How

Frontend Architecture

  • Next.js 14: Modern React framework providing excellent performance
  • TypeScript: Type safety, improving development experience
  • Tailwind CSS: Utility-first CSS framework

Core Features

  • Optimized client-side rendering
  • Smooth animation effects
  • Integrated audio controls
  • Consistent cross-device experience

Development Motivation

As someone with ADHD, I deeply understand the limitations of traditional timers for us:

  • Overly complex interfaces easily distract attention
  • Lack of ambient creation makes it difficult to enter a focused state
  • Cumbersome operation steps affect user experience

ADHDFocus was born to solve these pain points.

Project Structure

ADHDFocus/
├── app/              # Next.js app directory
├── components/       # React components
├── lib/             # Utility libraries
├── types/           # TypeScript type definitions
├── public/          # Static assets
└── package.json     # Project configuration

Acknowledgments

Background music is sourced from “Study with Me: Cozy Cabin”, used for personal learning purposes only. If there are any copyright issues, please contact me through GitHub Issues.