TaskIt 📝

A clean, modern, and secure task management dashboard built with Vanilla JavaScript and Firebase Realtime Database.

✨ Features

• Real-time Sync: Tasks update instantly across all devices.
• User Isolation: Secure authentication ensures users only access their own data.
• Smart Filtering: Filter by Priority (High/Med/Low), Status, or Date.
• Sub-tasks: Break complex tasks into manageable checklist items.
• Glassmorphism UI: A modern, responsive interface with visual polish.

🚀 Live Demo

https://taskmanagement-12tm.web.app

🛠️ Tech Stack

• Frontend: HTML5, CSS3 (Glassmorphism), Vanilla JavaScript (ES6 Modules)
• Backend: Firebase Realtime Database
• Auth: Firebase Authentication
• Icons: FontAwesome

⚙️ Installation & Setup

1. Clone the repo

   git clone https://github.com/YOUR_USERNAME/TaskIt.git
   cd TaskIt

2. Configure Firebase

   • Create a project at Firebase Console.
   • Enable Authentication (Email/Password).
   • Enable Realtime Database.
   • Create a file named config.js in the assets/js/ folder (this file is git-ignored).
   • Add your config object:

   export const config = {
       apiKey: "YOUR_API_KEY",
       authDomain: "YOUR_PROJECT.firebaseapp.com",
       databaseURL: "YOUR_DB_URL",
       projectId: "YOUR_PROJECT_ID",
       storageBucket: "YOUR_PROJECT.appspot.com",
       messagingSenderId: "YOUR_ID",
       appId: "YOUR_APP_ID"
   };

3. Run Locally

   • Since this project uses ES6 modules, you must run it on a local server (opening index.html directly won't work).
   • Using Python: python -m http.server
   • Using VS Code: Click "Go Live" (Live Server extension).

🔒 Security Rules

This project uses strict Realtime Database rules to ensure data privacy. Users can only read/write to their own users/{uid} node.

{
  "rules": {
    "users": {
      "$userId": {
        ".read": "auth != null && auth.uid === $userId",
        ".write": "auth != null && auth.uid === $userId"
      }
    }
  }
}

📁 Project Structure

TaskIt/
├── assets/
│   ├── css/
│   │   ├── style.css
│   │   ├── glass-navbar.css
│   │   └── dashboard-interactive.css
│   ├── js/
│   │   ├── app.js          # Main application logic
│   │   ├── auth.js         # Firebase authentication
│   │   ├── database.js     # Realtime Database CRUD
│   │   ├── firebase.js     # Firebase initialization
│   │   └── config.js       # Your credentials (git-ignored)
│   └── images/
├── index.html
├── login.html
├── register.html
├── dashboard.html
├── database.rules.json
└── README.md

📄 License

MIT License - feel free to use this project for your own purposes.