A modern, study-oriented task management application with a beautiful glassmorphism UI, email reminders, and comprehensive analytics.

📚 Study Project – Built by Babin Bid for learning and personal productivity.

• 🗂️ Task Management - Create, edit, delete, and complete tasks
• 🚦 Priority Levels - Low, Medium, and High priority with visual indicators
• 📅 Date Scheduling - Set start and end dates for tasks
• 🔎 Filtering - View All, Pending, or Completed tasks
• 💾 Persistent Storage - Tasks saved to localStorage per user

• 🎨 Beautiful UI - Modern glassmorphism design with blur effects
• 🖼️ Dynamic Backgrounds - Section-specific blurred background images
• 🌗 Dark/Light Theme - Toggle between themes with smooth transitions
• 📱 Responsive Design - Works seamlessly on desktop and mobile
• ⏳ Todo-List Loader - Beautiful animated loader with checkbox animations
• 🔄 Session Management - Auto-login with optional "Remember Me" feature

• ✅ Completion Rate - Track your task completion percentage
• 🏆 Tasks Completed - Total completed tasks counter
• 📈 Average Tasks/Day - Daily productivity metric
• 🔥 Day Streak - Consecutive days with task completions
• 📊 Priority Distribution - Visual breakdown of task priorities

• ⏰ Automated Reminders - Get email notifications 15 minutes before task due time
• 🧾 Professional Templates - Beautiful HTML email templates
• 🔁 Toggle Control - Enable/disable email reminders in settings

• 👥 User Accounts - Sign up and sign in with email/password
• 📌 Remember Me - Optional persistent sessions across browser restarts
• 💾 Session Storage - Automatic login during current session (even without Remember Me)
• 🔒 Per-User Data - Tasks are stored separately for each user
• 🔐 Secure Logout - Clean session cleanup on sign out

• 🟢 Node.js (v18 or higher)
• 📦 npm (comes with Node.js)
• ✉️ Gmail account (for email reminders)

1. Clone the repository

   git clone https://github.com/KGFCH2/ToDo_List.git
   cd ToDo_List

2. Install dependencies

   npm install

3. 🔑 Set up environment variables

   Create a .env file in the root directory:

   EMAIL_USER=your-email@gmail.com
   EMAIL_PASSWORD=your-app-password
   APP_URL=http://localhost:3000
   PORT=3000

   Note: For Gmail, you need to use an App Password, not your regular password. Enable 2-Step Verification first, then generate an App Password.

4. ▶️ Start the server

   npm start

5. 🌐 Open in browser

   http://localhost:3000
   

To-Do/
├── 📄 todo.html          # 🔐 Secure entry page (home/auth)
├── 📄 workspace.html     # 🧩 Main workspace (Tasks, Analytics, Settings)
├── 🎨 styles.css         # 🎨 Global styling, themes, blurred backgrounds
├── ⚙️ app.js             # 🧠 Frontend logic: routing, tasks, auth, analytics
├── 🔄 loader.js          # ⏳ Todo-list themed loader component
├── 🎭 loader.css         # 💅 Loader animations and styles
├── 🖥️ server.js          # 📡 Express backend: APIs + email reminders
├── 🪪 favicon.svg        # 🎯 App icon
├── 📦 package.json       # 📋 NPM scripts and dependencies
├── 🔐 .env               # 🔑 Environment variables (not committed)
├── 🙈 .gitignore         # 📝 Git ignore rules
├── ⚖️ LICENSE            # ⚖️ MIT License (Babin Bid)
└── 📘 README.md          # 📖 Project documentation

TaskFlow Pro supports both dark and light themes:

• Dark Theme (default) - Deep slate background with vibrant accents
• Light Theme - Clean white background with subtle shadows

Toggle themes using the sun/moon button in the header.

The app uses CSS custom properties for easy customization:

:root {
    --primary: #6366f1;
    --accent: #06b6d4;
    --bg-dark: #0f172a;
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #f43f5e;
}

For email reminders to work:

1. Enable 2-Step Verification on your Google account
2. Generate an App Password at Google App Passwords
3. Add credentials to your .env file
4. Restart the server

Email reminders are sent 15 minutes before the task's end date/time.

npm start       # Start the production server
npm run dev     # Start with nodemon (auto-reload)

• 🌐 Frontend: Vanilla JavaScript, CSS3, HTML5
• 🖥️ Backend: Node.js, Express.js
• 📧 Email: Nodemailer with Gmail SMTP
• 💾 Storage: localStorage & sessionStorage (client-side)
• 🎨 UI/UX: Glassmorphism, CSS animations, Dynamic backgrounds
• ⏳ Loader: Custom todo-list themed animated loader

Clean authentication interface with Remember Me option

Quick overview of tasks, completion stats, and productivity metrics

Intuitive task creation with priorities, dates, and filtering

Visual insights: completion rate, streaks, and priority distribution

Customize theme, manage email reminders, and account preferences

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

• 🔔 Push notifications for tasks
• 🌐 Cloud sync across devices
• 👥 Team collaboration features
• 📱 Mobile app (React Native)
• 🎯 Task categories and tags
• 📊 Advanced analytics dashboard

This project is licensed under the MIT License - see the LICENSE file for details.

Babin Bid 🎓

• GitHub: @KGFCH2
• 📧 Email: babinbid05@gmail.com
• 🌟 Project: Study & Learning Portfolio

Made with ❤️ by Babin Bid
⭐ Star this repo if you found it helpful!