🚀 Task Management Application

A modern task management web app with dark mode, real-time sync, and an intuitive drag & drop interface. Built with React, Firebase, and Tailwind CSS.

---

✨ Features

✅ Dark Mode Toggle - Eye-friendly interface with dark/light theme support
✅ Drag & Drop Tasks - Effortlessly organize tasks using react-beautiful-dnd
✅ Real-Time Updates - Firebase-powered instant sync across devices
✅ Task Timers - Track time spent on each task
✅ User Authentication - Secure login/logout functionality
✅ Three-Column Workflow - To-Do → In Progress → Done
✅ Responsive Design - Mobile-first approach with Tailwind CSS

---

💻 Technologies Used

• Frontend: React 19, React Router
• Styling: Tailwind CSS, Framer Motion animations
• Backend: Firebase (Authentication, Firestore)
• Utilities: React Beautiful DnD, Framer Motion, SweetAlert2, LocalForage

---

🛠️ Installation

1️⃣ Clone the repository

 git clone https://github.com/sndpbag/Task-Management-Client-Apps.git
 cd Task-Management-Client-Apps

2️⃣ Install dependencies

 npm install

3️⃣ Set up Firebase

• Create a Firebase project at Firebase Console
• Enable Authentication (Email/Password method)
• Create Firestore Database
• Retrieve your Firebase configuration values

4️⃣ Configure environment variables

Create a .env file in the project root and add:

VITE_FIREBASE_API_KEY=your-api-key
VITE_FIREBASE_AUTH_DOMAIN=your-auth-domain
VITE_FIREBASE_PROJECT_ID=your-project-id
VITE_FIREBASE_STORAGE_BUCKET=your-bucket
VITE_FIREBASE_MESSAGING_SENDER_ID=your-sender-id
VITE_FIREBASE_APP_ID=your-app-id

VITE_API_URL=https://task-management-server-three-ivory.vercel.app

5️⃣ Start the development server

 npm run dev

---

⚙️ Configuration

🔥 Firebase Setup

• Enable Firestore Database (Production Mode Recommended)
• Set up security rules according to your needs
• Configure authentication providers in Firebase Console

📌 Task Persistence

• Tasks are stored locally using LocalForage for offline access
• Synced with Firestore when online

---

🤝 Contributing

Want to contribute? Follow these steps:

1. Fork the project
2. Create a feature branch

   git checkout -b feature/AmazingFeature

3. Commit your changes

   git commit -m 'Add some AmazingFeature'

4. Push to the branch

   git push origin feature/AmazingFeature

5. Open a Pull Request

---

📄 License

Distributed under the MIT License. See LICENSE for more details.

---

🔥 Additional Notes

• Update Firebase configuration steps as needed
• Add actual screenshots for better visualization
• Replace the repository URL before publishing

Happy Coding! 🚀