Skip to content

YashMishra0101/Your-Personal-Task-Manager

BranchesTags

Repository files navigation

🎯 Your Personal Task Manager

A beautifully crafted, production-ready task management application that combines modern web technologies with an intuitive user experience.

🔒 Privacy & Security First

🚫
No Ads
Zero advertisements, ever		 🔒
100% Private
Your data stays yours		 ⚙️
Full Control
Complete security control		 🛡️
No Tracking
No analytics or spying		 📱
Install Anywhere
PC, Laptop, Mobile, Use Everywhere

⭐ Why This Project Stands Out

This isn't just another to-do app—it's a showcase of modern web development best practices:

  • ⚡ Blazing Fast - Built with Vite 7 for instant updates and optimal performance
  • 📱 True PWA - Install on any device, works offline like a native app
  • 🎨 Premium UI/UX - Thoughtfully designed with smooth animations and delightful interactions
  • 🔒 Enterprise-Grade Security - Multi-layer authentication with Firestore security rules
  • 🌐 Offline-First Architecture - Full CRUD operations without internet connection
  • 🎭 Adaptive Theming - Sophisticated light and dark modes that match your style
  • ♿ Accessibility First - WCAG compliant with keyboard navigation and screen reader support

📸 Application Preview

Screenshot 1 Screenshot 2
Screenshot 3 Screenshot 4
Screenshot 5 Screenshot 6
Screenshot 7 Screenshot 8

✨ Key Features

📋 Task Management

  • Professional Filtering System - Toggle between "All Tasks" and "By Date" views
    • All Tasks (Default): Clean grid view without grouping
    • By Date: Smart grouping with "Today", "Yesterday", and full date labels
  • Subtasks / Checklist - Break down tasks into smaller actionable items with checkboxes
  • Deadline Tracking - Visual indicators for overdue, urgent, and upcoming tasks
  • Quick Statistics - Real-time overview of pending and completed tasks
  • One-Click Actions - Mark complete, edit, or delete with smooth animations
  • Detailed Task View - Rich descriptions with formatted dates and times

🔐 Security & Privacy

  • Firebase Authentication - Industry-standard email/password login
  • Security Key Protection - Extra layer with Firestore-based access control
  • Protected Routes - Automatic redirect for unauthorized access
  • Environment Variables - Secure credential management
  • Input Validation - Client-side and server-side data verification

🌐 Offline Functionality

Experience seamless productivity, anywhere, anytime!

  • 📱 Full Offline Mode - Create, edit, and delete tasks without internet
  • 💾 Dual-Layer Caching - Firestore IndexedDB + localStorage for reliability
  • 🔄 Auto-Sync - Changes sync automatically when connection restores
  • 🎨 Status Indicators - Clear visual feedback for online/offline state
  • ⚡ Instant Updates - Optimistic UI for immediate feedback
  • 🛡️ Zero Data Loss - Robust error handling ensures your data is safe

🎨 User Experience

  • Modern UI Design - Clean, minimalist interface with thoughtful spacing
  • Smooth Animations - Powered by Framer Motion for buttery transitions
  • Theme System:
    • Light Mode: Fresh green palette for energetic daytime work
    • Dark Mode: Professional black theme for comfortable night use
    • System Auto-detect: Matches your OS preference automatically
  • Responsive Layout - Adapts beautifully from phone to ultrawide displays
  • Toast Notifications - Instant feedback for every action
  • Confirmation Dialogs - Prevents accidental deletions

📱 Progressive Web App (PWA)

  • One-Click Install - Add to home screen on any device
  • Standalone Mode - Runs in its own window without browser chrome
  • Offline-First - All features work without internet
  • Fast Loading - Service worker caches key assets
  • Auto Updates - Always get the latest features seamlessly
  • Mobile Optimized - Bottom navigation for easy thumb access

🛠️ Technology Stack

Core Technologies

Technology Purpose
React UI framework with latest features
Vite Lightning-fast build tool
Firebase Authentication & Firestore database
Tailwind CSS Utility-first styling
Framer Motion Smooth animations
React Router Client-side routing

Development Tools

  • pnpm - Fast, disk space efficient package manager
  • vite-plugin-pwa - PWA with Workbox integration
  • date-fns - Modern date utility library
  • sonner - Beautiful toast notifications
  • lucide-react - Clean, customizable icons

🧑‍💻 Quick Start

Prerequisites

  • Node.js 18 or higher
  • pnpm (recommended) or npm
  • Firebase account (free tier works great!)

Installation

1️⃣ Clone the Repository

git clone https://github.com/YashMishra0101/Personal-Task-Manager.git
cd Personal-Task-Manager

2️⃣ Install Dependencies

pnpm install
# or
npm install

💡 Tip: This project uses pnpm for faster installs and better disk efficiency. Install it with npm install -g pnpm

3️⃣ Firebase Setup

  1. Go to Firebase Console
  2. Create a new project
  3. Enable Email/Password authentication
  4. Create a Firestore database
  5. Set up Security Key (follow guide below)
  6. Copy your Firebase configuration

4️⃣ Environment Configuration

Create a .env file in the root directory:

VITE_FIREBASE_API_KEY=your_api_key_here
VITE_FIREBASE_AUTH_DOMAIN=your_project_id.firebaseapp.com
VITE_FIREBASE_PROJECT_ID=your_project_id
VITE_FIREBASE_STORAGE_BUCKET=your_project_id.firebasestorage.app
VITE_FIREBASE_MESSAGING_SENDER_ID=your_sender_id
VITE_FIREBASE_APP_ID=your_app_id

5️⃣ Security Key Setup (Important!)

This app implements a dual-layer security system for maximum protection of your personal data.

Why a Security Key?

While Firebase Authentication handles user login, the security key adds an extra verification layer at the database level. This means:

  • 🔐 Even if someone gets your Firebase credentials, they still can't access your tasks without the security key
  • 🛡️ Protects against unauthorized database access
  • 🔑 Acts like a master password for your Firestore database
  • 💼 Enterprise-grade security for personal use

Setup Instructions:

  1. Open Firebase Console → Firestore Database

  2. Create a new collection named security

  3. Add a document with ID 1

  4. Add a field: key = "your-secret-key"

    Example: "5269MYEX#&!?dwtv"

    💡 Tip: Use a strong, unique key with a mix of uppercase, lowercase, numbers, and special characters.

  5. Save the document

How It Works:

When a user logs in, the app:

  1. ✅ Authenticates via Firebase (email + password)
  2. ✅ Prompts for the security key
  3. ✅ Verifies the key against Firestore
  4. ✅ Only grants access if both checks pass

Security Best Practices:

  • ⚠️ Never commit your security key to version control
  • 🔄 Change the key periodically for added security
  • 📝 Keep a backup of your key in a secure location
  • 🚫 Don't share your key with unauthorized users
  • 🔒 Use a strong key (minimum 12 characters recommended)

This dual-authentication system ensures your tasks remain private and secure, even in shared or public deployments.

⚠️ Important: No public signup page is available. For security reasons, users must create their account and set the security key directly in Firebase Console before using the app.

6️⃣ Launch Development Server

pnpm run dev

Open http://localhost:5173 in your browser and start managing tasks! 🎉

📂 Project Architecture

Personal-Task-Manager/
├── 📁 public/              # Static assets & PWA files
│   ├── icon-192.png
│   ├── icon-512.png
│   └── sw-custom.js        # Custom service worker
│
├── 📁 src/
│   ├── 📁 assets/          # Images & icons
│   ├── 📁 components/      # Reusable UI components
│   │   ├── ConfirmDialog.jsx
│   │   ├── Layout.jsx
│   │   ├── Navbar.jsx
│   │   ├── OfflineIndicator.jsx
│   │   ├── ProtectedRoute.jsx
│   │   ├── TaskCard.jsx
│   │   └── ThemeToggle.jsx
│   │
│   ├── 📁 context/         # State management
│   │   ├── AuthContext.jsx
│   │   ├── TaskContext.jsx
│   │   └── UIContext.jsx
│   │
│   ├── 📁 hooks/           # Custom React hooks
│   │   └── useNetworkStatus.js
│   │
│   ├── 📁 lib/             # Utilities & config
│   │   ├── device.js
│   │   ├── fcm.js          # Firebase Cloud Messaging
│   │   ├── firebase.js
│   │   ├── timeUtils.js
│   │   └── utils.js
│   │
│   ├── 📁 pages/           # Route components
│   │   ├── AddTask.jsx
│   │   ├── Completed.jsx
│   │   ├── EditTask.jsx
│   │   ├── Home.jsx
│   │   ├── Login.jsx
│   │   ├── NotFound.jsx
│   │   ├── SecurityKey.jsx
│   │   └── TaskDetails.jsx
│   │
│   ├── App.jsx             # App routing
│   ├── main.jsx            # Entry point
│   └── index.css           # Global styles
│
├── 📄 .env                 # Environment variables (gitignored)
├── 📄 .gitignore
├── 📄 LICENSE              # Custom MIT license
├── 📄 package.json
├── 📄 README.md
├── 📄 tailwind.config.js
└── 📄 vite.config.js       # Vite + PWA configuration

🌍 Deployment

Building for Production

pnpm run build

This generates an optimized production bundle in the dist/ directory.

Deploy to Vercel (Recommended)

Deploy with Vercel

Steps:

  1. Push your code to GitHub
  2. Import project in Vercel Dashboard
  3. Add environment variables
  4. Click Deploy

Alternative Platforms:

  • Netlify
  • Firebase Hosting
  • Cloudflare Pages
  • GitHub Pages (with routing config)

Install as PWA

Desktop (Chrome/Edge):

  1. Visit your deployed URL
  2. Click the install icon (⊕) in address bar
  3. Select "Install Task Manager"
  4. App opens in standalone window

Mobile (Android):

  1. Open URL in Chrome
  2. Tap "Add to Home Screen" prompt
  3. App icon appears on home screen
  4. Launch in full-screen mode

Benefits:

  • ⚡ Instant loading
  • 📴 Works offline
  • 🖥️ Native app feel
  • 🔔 Push notifications

🤝 Contributing

We love contributions! This project is open source and welcomes improvements from developers of all skill levels.

How to Contribute

  1. Fork the repository
  2. Create your 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

Contribution Ideas

  • 🐛 Report bugs
  • 💡 Suggest new features
  • 📝 Improve documentation
  • 🎨 Enhance UI/UX
  • ⚡ Optimize performance
  • ♿ Improve accessibility

📄 License

This project is licensed under a Custom MIT License with attribution requirement.

You are free to:

  • ✅ Use commercially
  • ✅ Modify
  • ✅ Distribute
  • ✅ Private use

With the condition that:

  • 📝 You must link back to this repository in your project's documentation or About section

See the LICENSE file for the full terms.

🗺️ Roadmap

Future enhancements we're considering:

  • 🏷️ Task categories and custom tags
  • 🔍 Advanced search with filters
  • ⚡ Priority levels (Low, Medium, High, Urgent)
  • 🔁 Recurring tasks (daily, weekly, monthly)
  • 👥 Task sharing and collaboration
  • 📧 Email reminders for deadlines
  • 📊 Productivity analytics dashboard
  • 🎯 Goals and milestones tracking
  • 🔗 Integration with Google Calendar
  • 📤 Import/Export data (JSON, CSV)

Vote for features by opening an issue with the "feature request" label!

💬 Support & Contact

Having trouble? We're here to help!

🙏 Acknowledgments

Special thanks to:

Open Source Libraries

Built with ❤️ using React and Firebase

Made by Yash Mishra

⭐ Star this repo • 🐛 Report Bug • 💡 Request Feature

About

your-task-manager.vercel.app

Resources

Readme

License

View license
Activity

Stars

1 star

Watchers

0 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

No packages published

Languages