FocusFlow

• 

  TaskDetails section

• 

  Home page

• 

  Add Tasks section

Inspiration

The idea of FocusFlow came to me because I was struggling to stay focused while learning React. I wanted to build something simple yet challenging that would help me stay on task while also exercising basic React concepts in a real-world project.

What it does

FocusFlow is a clean, Pomodoro-style productivity tool that helps users manage their time and tasks using the Pomodoro technique. It also uses a calming color palette that promotes focus and productivity. These color choices are backed by research suggesting that certain tones can improve concentration and reduce stress during work sessions.

How we built it

I built FocusFlow using React for its component-based architecture, which allowed me to break the interface into reusable parts like the timer, task input form, and task list. I used JavaScript (ES6+) to implement the Pomodoro timer logic, handle user interactions, and manage state across components. To keep the user interface responsive and clean, I styled the application using CSS3, applying gradients, hover effects, and flexible layouts. I also used React hooks like useState to manage state, and useEffect to handle side effects like countdown timers and localStorage sync. For persistent data, I used localStorage to store tasks and session history so users don’t lose their progress when refreshing the page. I also integrated the ZenQuotes API to display motivational quotes between work sessions, my first time working with an API.

Challenges we ran into

One of the biggest challenges I faced as a React learner was passing props between different components and displaying the correct data. I also struggled with designing a good layout and deciding how to separate concerns between components. Another technical challenge was giving each task a unique identifier. Initially, I used the array index, which caused problems when editing or deleting tasks. After researching and consulting ChatGPT, I solved this by generating a unique ID using the current date and time, a simple but effective solution.

Accomplishments that we're proud of

I'm especially proud of integrating an external API into the project for the first time. I also learned the value of good file structure. Organizing components and styles clearly made it much easier to debug and scale the app as it grew. I gained a much deeper understanding of state management in React, the power of hooks like useEffect, and how to structure reusable components efficiently.

What we learned

This project helped me improve my confidence with React fundamentals, especially component composition, state management, props, and hooks. I also learned how to work with browser storage and external APIs, and how to think through user experience and layout when designing a full application. I also learned how to apply memoization so that components only re-render when necessary.

What's next for FocusFlow

In the future, I hope to add a history section where users can revisit completed tasks and track productivity. I also want to add a streak system to encourage consistency and daily task completion. My two biggest goals for FocusFlow are: -Syncing tasks and data across devices, and -Creating shared task groups for use in homes, classrooms, or work teams — so everyone can stay on the same page and manage responsibilities together.

Built With

• css3
• github
• javascript
• localstorage
• react
• vercel
• zenquotes