FocusFlow: Pomodoro & To-Do List Application

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

Overview

FocusFlow is a productivity application developed using React and Tailwind CSS during a pair programming session with my college. The application combines a Pomodoro timer and a To-Do list to help users manage their time efficiently and keep track of their tasks.

Live Demo

Check out the live demo of the application here.

Features

To-Do List:

• Add, edit, and delete tasks.
• Mark tasks as completed.
• Filter tasks by status (All, Completed, Incomplete).

Pomodoro Timer:

• Simple and intuitive Pomodoro timer.
• Customizable session and break lengths.
• Visual and audio cues to start and stop sessions.

Beautiful Design:

• Modern and clean user interface.
• Cozy and calming background theme to enhance focus.
• Lo-Fi Music: Built-in lo-fi music player to create a soothing environment for productivity.
• Scenic Backgrounds: Stunning background visuals that change dynamically to match the mood and enhance the overall user experience.

Setup and Installation

Follow these steps to set up the project on your local machine.

Prerequisites

• Node.js (v14.x or higher)
• npm (or yarn)

Installation

1. Clone the Repository:

   git clone https://github.com/dedakup/focusflow.git
   cd focusflow

2. Install Dependencies:

   npm install

3. Start the Development Server:

   npm run dev

4. Open the Application:

   Visit http://localhost:5173 in your browser to view the application.

Usage

• Add Tasks: Click the "+" button to add new tasks to your To-Do list.
• Start Pomodoro: Navigate to the Pomodoro section and click the start button to begin your focused work session.
• Manage Tasks: Mark tasks as complete or delete them as needed to keep your list organized.

Technologies Used

• React: A JavaScript library for building user interfaces.
• Tailwind CSS: A utility-first CSS framework for designing responsive and modern UIs.
• Vite: A fast build tool and development server.
• ESLint: For maintaining code quality and consistency.

Contributing

We welcome contributions! If you'd like to contribute to the project, please fork the repository and use a feature branch. Pull requests are warmly welcome.

Branch Naming Conventions

• main: Production-ready code.
• develop: Latest integrated development work.
• feature/<feature-name>: For new features.
• bugfix/<issue-id>: For fixing bugs during development.
• release/<version>: For preparing production releases.
• hotfix/<issue-id>: For urgent fixes to production code.

Steps to Contribute:

1. Fork the repository.
2. Create a new feature branch.
3. Make your changes.
4. Commit your changes.
5. Push your changes to your fork.
6. Create a pull request.

License

This project is licensed under the MIT License.

Acknowledgments

• Thanks to my college partner for their collaboration and support during the development of this project.
• Inspiration for the cozy theme and design was drawn from various productivity apps.

Happy coding and stay productive! 🚀