Focus Flow

FocusFlow is a real-time productivity dashboard designed to enhance focus and efficiency. It features a Pomodoro timer, to-do list, mood tracker, productivity tips. With gamified progress tracking and responsive animations, FocusFlow provides a clean, intuitive user experience to boost productivity and maintain focus throughout the day.

Demo

https://focusflow-krit.vercel.app/

FAQ

What is FocusFlow?

FocusFlow is a real-time productivity dashboard designed to enhance focus and efficiency. It features a Pomodoro timer, to-do list, mood tracker, and productivity tips, all in a clean and intuitive UI.

Why FocusFlow?

FocusFlow combines essential productivity tools into one seamless interface, helping users stay focused, organized, and motivated. It offers a gamified experience and progress tracking to boost productivity throughout the day.

Screenshots

Tech Stack

Client: React, Tailwind CSS, Daisy UI

Libraries: React Recharts, React Router DOM

Lessons Learned

While building FocusFlow, I gained valuable experience with various React libraries such as React Recharts, React Rewards, and UI component libraries like Daisy UI. One of the major challenges I encountered was deploying the app on Vercel. I discovered that the issue stemmed from routing problems in my app. To resolve this, I added a vercel.json file in the src folder and configured the routing settings within it, which successfully solved the problem.

Installation

Install my-project with npm

  npm install my-project
  cd my-project

Run Locally

Clone the project

  git clone https://github.com/kritgarg/Focus-flow.git

Go to the project directory

  cd my-project

Install dependencies

  npm install

Start the server

  npm run start

License

MIT