Dev·Doro

A pomodoro task tracker for developers who forget to blink and move around every so often. Uses Next.js and IndexedDB for a nice PWA experience without logins.

Table of Contents

• Dev·Doro
  • Table of Contents
  • Tech Stack
  • Demo
  • Lessons Learned
  • Roadmap
  • Screenshots
    • App Landing Screen
    • App Settings
    • Adding a task
    • Filtering tasks
    • Waves rise as timer progresses
    • Finishing a cycle prompts a stretch!
  • Run Locally
  • Acknowledgements

Tech Stack

• Uses React/Next.js with TypeScript,
• Styling is done with TailwindCSS, daisyUI and daisy's themechange helper,
• next-pwa to set up PWA,
• dexie.js as a wrapper for IndexedDB,
• react-beautiful-dnd to drag tasks around,
• Jest and testing-library for tests.

Demo

Accessible at: https://devdoro.raissak.com/

Lessons Learned

This project, although not completely finished, was great to practice TypeScript and React Hooks!

• useRef was used for the static overlay behind modals,
• useState shows up when setting up task filters, swapping timers, changing the theme, and to activate stretch challenges,
• useCallback was used to handle the change between a pomodoro cycle and a break cycle, for instance, to dispatch appropriate actions,
• useReducer kept the change of maximum duration, current duration, and cycle mode simpler,
• useMemo is involved in the calculation of the wave height in the background as a cycle progresses,
• useEffect handles modal clicks, focus trapping, initial retrieval of theme, starting a new challenge, and timer ticks,
• useContext wraps things whenever a modal is involved, handles task filters and database actions, and pairs up with useReducer to handle all things timer-related.

Roadmap

• Add option to select sounds/alarms and shut them off
• Add counter of cycles
• Move user settings to indexedDB so they're not reset

Screenshots

App Landing Screen

App Settings

Adding a task

Filtering tasks

Waves rise as timer progresses

Finishing a cycle prompts a stretch!

Run Locally

Clone the project

  git clone https://github.com/raissa-k/devdoro.git

Go to the project directory

  cd devdoro

Install dependencies

  npm install

Start the app in development mode

  npm run dev

Acknowledgements

• The iconic, one-and-only Pomofocus for the inspiration.
• "Pomopond" Figma file