⏳ Task+ – Pomodoro Timer Productivity App

Task+ is a sleek and minimal Pomodoro Timer web app designed to boost productivity using the Pomodoro Technique. Built with React and LocalStorage, it lets users manage tasks, focus time, short breaks, and long breaks, all while keeping session data persistent.

---

🚀 Features

⏱️ Pomodoro Session Management

• Start, pause, and reset Pomodoro timers
• Switch between Work, Short Break, and Long Break
• Auto-cycle between focus and break modes (optional)

📝 Task Tracker

• Add and delete tasks
• Mark tasks as completed
• See which Pomodoro cycle each task belongs to

🎨 UI & Customization

• Minimal, distraction-free design
• Sound alerts and vibration feedback (if enabled)
• Responsive layout for desktop and mobile

💾 Persistent Data

• Tasks and settings saved in LocalStorage
• Retains session state across refresh

---

🛠️ Tech Stack

• Frontend: React, Tailwind CSS
• State Management: React Hooks (useState, useEffect, useContext)
• Storage: LocalStorage
• Optional Libraries: Framer Motion, React Toastify

---

📂 Project Structure

task-plus/
├── public/
│ └── index.html
├── src/
│ ├── components/ # Timer, TaskList, Settings, Controls
│ ├── context/ # Timer and Task context providers
│ ├── hooks/ # Custom React hooks
│ ├── App.js # Main App component
│ ├── index.js # Entry point
│ └── styles.css # Tailwind / custom styles
├── package.json
└── README.md

🧪 Installation & Setup

📋 Prerequisites

• Node.js (v14 or higher)
• npm or yarn
• MongoDB (local installation or MongoDB Atlas)

🧑‍💻 Steps to run

1. Clone the repository

   git clone https://github.com/Ragul-05/Task_Pulse.git
   cd Pocket-Plan

2. Set up the backend

   • Navigate to the backend directory:

     cd backend

   • Install backend dependencies:

     npm install

   • Create a .env file in the backend directory and add your MongoDB connection string:

     MONGODB_URI=your_mongodb_connection_string
     

   • Start the backend server locally (optional, if not using Render):

     npm start

     The backend server will run on http://localhost:5000.

3. Set up the frontend

   • Open a new terminal and navigate to the frontend directory:

     cd frontend

   • Install frontend dependencies:

     npm install

4. Connect Frontend to Backend

   • In the frontend directory, open the package.json file and add the following proxy setting to connect to your backend server:

     "proxy": "https://your-backend-url"

   • Replace https://your-backend-url with the actual URL of your deployed backend (e.g., on Render or another hosting platform). This ensures that API requests from the frontend are proxied to the backend server.

5. Start the frontend development server

   • In the frontend directory, start the development server:

     npm start

     🌐 Open your browser and navigate to http://localhost:3000.

6. Backend Deployment on Render

   • The backend is deployed on the Render platform for scalable hosting.
   • To deploy your own instance on Render:
     • Push the backend directory to a GitHub repository.
     • Create a new Web Service on Render and connect your repository.
     • Set the environment variable MONGODB_URI in Render's dashboard.
     • Deploy the service, and Render will provide a live URL for the backend API.

7. Build for Production (Optional)

   • In the frontend directory, build the React app:

     npm run build

     The built files will be in the frontend/build directory.

---

🤝 Contributing

Pull requests are welcome! Feel free to fork the repository and suggest improvements.

Steps to contribute:

# 1. Fork the repository
# 2. Create a feature branch
git checkout -b feature-name

# 3. Commit your changes
git commit -m "Add feature description"

# 4. Push to GitHub
git push origin feature-name

# 5. Open a Pull Request

---

📧 Contact

For queries or suggestions:

• 📩 Email: ragulgopinath2005@gmail.com
• 🌐 LinkedIn: https://www.linkedin.com/in/ragul-m-k-g-0322b825a/

---

🌟 Show Your Support

If you like this project, please consider giving it a ⭐ on GitHub!