Pomo is a pomodoro app that helps you focus by setting aside time blocks on important tasks - the goal is to work on a given task with zero interuptions. After you've successfully completed a focus session, you reward yourself with a short break. Repeat this process to break up large, complex tasks into smaller, manageable chunks.
Link to project: https://focuspomotimer.netlify.app/
Tech used: HTML, CSS, JavaScript, React, Tailwind CSS
This app was built with React for reactivity and Tailwind CSS for styling. React hooks like useState and useEffect were used to manage state and side effects. A fair amount of conditional rendering was used to display text, insert class names to html elements, and deactivate buttons based on state. Tailwind CSS made styling a breeze because of it's excellent design system and documentation.
Building this app taught me how to work with multiple pieces of state that interact with each other. Things can easily become complex as an application grows in size, but luckily I was able to solve my app's problems without reaching for an external state management library. I also had the opportunity to familiarize myself with Tailwind's CSS syntax and related tooling.